Saturday 14 September 2013

Ajax AutoCompleteExtender In Master Page Asp.Net


This Example shows How To Use Ajax AutoCompleteExtender TextBox In Master Page In Asp.Net.

Open Visual Studio and create new website, add master page in it and design it as you want.

Create a BIN folder in application and add AjaxControlToolkit.dll in it.

I have use Northwind database to fetch names for AutoCompletion list.

Add Connection String in web.config file

<connectionStrings>
<add name="NorthwindConnectionString" 
     connectionString="Data Source=AMITJAIN\SQL;
                       Initial Catalog=Northwind;
                       User ID=amit;Password=password"
providerName="System.Data.SqlClient"/>
</connectionStrings>


Place ToolkitScriptManager on Master Page inside form tag, one textbox and Add Ajax AutoComplete Extender from Toolbox.

HTML SOURCE OF MASTER PAGE


<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"/>
 
<asp:TextBox ID="txtAutoComplete" runat="server"/>
                               
<asp:AutoCompleteExtender ID="AutoCompleteExtender1" 
                          runat="server" 
                          DelimiterCharacters="" 
                          Enabled="True" 
                          ServicePath="~/AutoComplete.asmx" 
                          ServiceMethod="GetCompletionList"
                          TargetControlID="txtAutoComplete"
                          MinimumPrefixLength="1" 
                          CompletionInterval="10" 
                          EnableCaching="true"
                          CompletionSetCount="12">
</asp:AutoCompleteExtender>
                
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
 
</form>
</body>
</html>


We can set CompletionList WIdth and styles using CSS or use AutoCompleteExtender In GridView or Windows Forms Application.

Add new webservice, name it AutoComplete.asmx and write following code in it's code behind.

C#



01using System.Collections.Generic;
02using System.Web.Services;
03using System.Data.SqlClient;
04using System.Data;
05using System.Configuration;
06 
07[WebService(Namespace = "http://tempuri.org/")]
08[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
09[System.Web.Script.Services.ScriptService]
10public class AutoComplete : System.Web.Services.WebService {
11 
12    public AutoComplete ()
13    {
14    }
15 
16    [WebMethod]
17    public string[] GetCompletionList(string prefixText, int count)
18    {
19        if (count == 0)
20        {
21            count = 10;
22        }
23        DataTable dt = GetRecords(prefixText);
24        List<string> items = new List<string>(count);
25 
26        for (int i = 0; i < dt.Rows.Count; i++)
27        {
28            string strName = dt.Rows[i][0].ToString();
29            items.Add(strName);
30        }
31        return items.ToArray();
32    }
33 
34    public DataTable GetRecords(string strName)
35    {
36        string strConn = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
37        SqlConnection con = new SqlConnection(strConn);
38        SqlCommand cmd = new SqlCommand();
39        cmd.Connection = con;
40        cmd.CommandType = System.Data.CommandType.Text;
41        cmd.Parameters.AddWithValue("@Name", strName);
42        cmd.CommandText = "Select FirstName from Employees where FirstName like '%'+@Name+'%'";
43        DataSet objDs = new DataSet();
44        SqlDataAdapter dAdapter = new SqlDataAdapter();
45        dAdapter.SelectCommand = cmd;
46        con.Open();
47        dAdapter.Fill(objDs);
48        con.Close();
49        return objDs.Tables[0];
50    }
51}</string></string>

No comments:

Post a Comment