Sunday 23 February 2014

Ajax AutoCompleteExtender example and sample without using webservice


 
In this article I will explain what Ajax AutoCompleteExtender example and sample without using webservice in asp.net.

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.

AutoComplete Extender:

AutoComplete is an ASP.NET AJAX extender that can be attached to any TextBox control, and will associate that control with a popup panel to display words that begin with the prefix typed into the textbox.

The dropdown with candidate words supplied by a web service is positioned on the bottom left of the text box.


Syntax:

<ajax:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="TextBox1"
            ServicePath="WebService.asmx" MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1"
            CompletionInterval="1000" ServiceMethod="GetCityName" OnClientPopulating="ShowProcessImage"
            OnClientPopulated="HideProcessImage">
        </ajax:AutoCompleteExtender>

DataBase Connection:

<connectionStrings>
<add name="con" connectionString="Data Source=LocalHost;Integrated Security=true;Initial Catalog=DBName"/>
</connectionStrings >

Example:

Below is the code for page design.

<%@ 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="TextBox1"
MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1" CompletionInterval="1000" ServiceMethod="GetCountries" >
</ajax:AutoCompleteExtender>
</div>
</form>
</body>
</html>

Below is the Aspx.cs code:

using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Collections.Generic;
using System.Web.Services;

[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List<string> GetNames(string prefixText)
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con "].ToString());
con.Open();
SqlCommand cmd = new SqlCommand("select * from Table where Name like @Name+'%'", con);
cmd.Parameters.AddWithValue("@Name", prefixText);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
List<string> Names = new List<string>();
for (int i = 0; i < dt.Rows.Count; i++)
{
Names.Add(dt.Rows[i][1].ToString());
}
return Names;
}

No comments:

Post a Comment