Ajax AutoCompleteExtender example or sample without using
webservice (or) Asp.Net AJAX AutoComplete Extender From Database without using
webservice
Introduction:
Here I will explain how to use Ajax AutoCompleteExtender without using webservice to display the words begin with prefix typed into the textbox using asp.net
Description:
In previous article I explained clearly how to implement AjaxAutoCompleteExtender with webservice. We can attach Ajax autocomplete exteneder to any textbox to implement this and after assign autocomplete extender to textbox and type more content than the specified minimum word length, a popup will show words or phrases starting with that value. So the user can choose exact word from the popup panel. Here we are implementing autoCompleteextender to fetch data from the database without using Webservice.
Here I will explain how to use Ajax AutoCompleteExtender without using webservice to display the words begin with prefix typed into the textbox using asp.net
Description:
In previous article I explained clearly how to implement AjaxAutoCompleteExtender with webservice. We can attach Ajax autocomplete exteneder to any textbox to implement this and after assign autocomplete extender to textbox and type more content than the specified minimum word length, a popup will show words or phrases starting with that value. So the user can choose exact word from the popup panel. Here we are implementing autoCompleteextender to fetch data from the database without using Webservice.
First design table in your
database like this
Column
Name |
Data
Type |
Allow
Nulls |
ID
|
Int(set identity property=true)
|
No
|
CountryName
|
Varchar(50)
|
Yes
|
After completion of design
table in database add AjaxControlToolkit reference to your application after that add
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="ajax" %> |
Our aspx page code like this
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="ajax" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ajax
AutoCompleteExtender without Webservice</title>
</head>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="ScriptManager1" runat="server"/>
<div>
<asp:TextBox ID="txtCountry" runat="server"></asp:TextBox>
<ajax:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
TargetControlID="txtCountry"
MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1"
CompletionInterval="1000" ServiceMethod="GetCountries" >
</ajax:AutoCompleteExtender>
</div>
</form>
</body>
</html>
|
Here if you observe above code
for autocompleteextender I declared different properties now I will explain
each property clearly
TargetControlID - The TextBox control where the user types content to be
automatically completed.
EnableCaching- Caching
is turned on, so typing the same prefix multiple times results in only one call
to the web service.
MinimumPrefixLength-
Minimum number of characters that must be entered before getting suggestions
from the web service.
CompletionInterval - Time in milliseconds when the timer will kick in to get
suggestions using the web service.
CompletionSetCount - Number of suggestions to be retrieved from the web service.
Don’t get confuse I explained
all the properties details only it’s very simple to implement auto completion
textbox after completion of your aspx page design add following namcespaces in
your code behind page
using System.Data;
using System.Data.SqlClient;
using System.Collections.Generic;
using System.Configuration;
|
After completion of adding
namespaces write the following code in codebehind
[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List<string> GetCountries(string prefixText)
{
SqlConnection con = newSqlConnection(ConfigurationManager.ConnectionStrings
["dbconnection"].ToString());
con.Open();
SqlCommand cmd = new SqlCommand("select
* from Country where CountryName like
@Name+'%'", con);
cmd.Parameters.AddWithValue("@Name",
prefixText);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt
= new DataTable();
da.Fill(dt);
List<string>
CountryNames = new List<string>();
for (int i = 0; i < dt.Rows.Count; i++)
{
CountryNames.Add(dt.Rows[i][1].ToString());
}
return CountryNames;
}
|
Note: Use same parameter name string prefixText in List<string>
GetCountries(string prefixText) method.
After that set your database connection in web.config like this
After that set your database connection in web.config like this
<connectionStrings>
<add name="dbconnection" connectionString="Data
Source=SureshDasari;Integrated
Security=true;Initial Catalog=MySampleDB"/>
</connectionStrings >
|
OutPut:
Is it necessary to take int column in db?What is the use of that int column?
ReplyDelete