Follow by Email

Using AutoCompleteExtender of ajax in asp.net or how to use autocomplete property of ajax toolkit ?

In this tutorial i will show how to use AutoCompleteExtender of Ajax tool kit in asp.net

Steps are as follows:

  1. Add scriptmanger.
  2. Add AutocompleteExtender.
     <asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
TargetControlID="TextBox1" ServiceMethod="GetCompletionList"
UseContextKey="True" MinimumPrefixLength="1">
asp:AutoCompleteExtender>

this will have TargetControlID as id of textbox.
MinimumPrefixlength is length of the text in textbox after which autoCompleteExtender
start showing suggestions.

  3. Add one textbox.

<asp:TextBox ID="TextBox1" runat="server">asp:TextBox>

4. Now go to design mode & Click on Add AutoComplete Page Method.




5. After this you will see that some code is added to ur code behind file ,
just replace it with this code
(here i have bounded the colum from database for which i want suggestions ,
you should change this with your database teble & column)
(Here i have used Name Column of CountryRegion of Adventureworks Database )
[System.Web.Services.WebMethodAttribute(),
System.Web.Script.Services.ScriptMethodAttribute()]
public
static string[] GetCompletionList
(string prefixText, int count, string contextKey)
{
SqlConnection conn;
SqlCommand cmd;
string cmdString =
"Select Name from Person.CountryRegion WHERE Name LIKE '" +
prefixText + "%'";
conn = new
SqlConnection(@"Data Source=VRAKSH-VAIBHAVS;Initial Catalog=AdventureWorks;
User ID=sa;Password=data#123"
);
// Put this string on one line in your code
cmd = new SqlCommand(cmdString, conn);
conn.Open();
SqlDataReader myReader;
List<string> returnData = new List<string>();
myReader = cmd.ExecuteReader(CommandBehavior.CloseConnection);
while (myReader.Read())
{
returnData.Add(myReader["Name"].ToString());
}
return returnData.ToArray();
}

Just save & run ....

type just one character in your textbox & wait for 2-3 seconds.....
u will find suggestion box is shown under it.

Here is Full code.....


Source code......


<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
asp:ScriptManager>
<asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
TargetControlID="TextBox1" ServiceMethod="GetCompletionList"
UseContextKey="True" MinimumPrefixLength="1">
asp:AutoCompleteExtender>
<asp:TextBox ID="TextBox1" runat="server">asp:TextBox>
div>


code behind....

protected void Page_Load(object sender, EventArgs e)
{

}

[System.Web.Services.WebMethodAttribute(),
System.Web.Script.Services.ScriptMethodAttribute()]
public static string[] GetCompletionList
(string prefixText, int count, string contextKey)
{
SqlConnection conn;
SqlCommand cmd;
string cmdString =
"Select Name from Person.CountryRegion WHERE Name LIKE '" +
prefixText + "%'";
conn = new
SqlConnection(@"Data Source=VRAKSH-VAIBHAVS;Initial Catalog=AdventureWorks;
User ID=sa;Password=data#123"
);
// Put this string on one line in your code
cmd = new SqlCommand(cmdString, conn);
conn.Open();
SqlDataReader myReader;
List<string> returnData = new List<string>();
myReader = cmd.ExecuteReader(CommandBehavior.CloseConnection);
while (myReader.Read())
{
returnData.Add(myReader["Name"].ToString());
}
return returnData.ToArray();
}

0 comments:

Post a Comment