Wednesday, February 27, 2013

Ajax AutoCompleteExtender In Master Page Asp.Net

Posted by Manoj Ram on 10:38 PM with No comments so far
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>

VB.NET
01Imports System.Collections.Generic
02Imports System.Web.Services
03Imports System.Data.SqlClient
04Imports System.Data
05Imports System.Configuration
06 
07<webservice([namespace] :="http://tempuri.org/" )=""> _
08<webservicebinding(conformsto :="WsiProfiles.BasicProfile1_1)"> _
09<system.web.script.services.scriptservice> _
10Public Class AutoComplete
11 Inherits System.Web.Services.WebService
12 
13 Public Sub New()
14 End Sub
15 
16 <webmethod> _
17 Public Function GetCompletionList(prefixText As String, count As Integer) As String()
18  If count = 0 Then
19   count = 10
20  End If
21  Dim dt As DataTable = GetRecords(prefixText)
22  Dim items As New List(Of String)(count)
23 
24  For i As Integer = 0 To dt.Rows.Count - 1
25   Dim strName As String = dt.Rows(i)(0).ToString()
26   items.Add(strName)
27  Next
28  Return items.ToArray()
29 End Function
30 
31 Public Function GetRecords(strName As String) As DataTable
32  Dim strConn As String = ConfigurationManager.ConnectionStrings("NorthwindConnectionString").ConnectionString
33  Dim con As New SqlConnection(strConn)
34  Dim cmd As New SqlCommand()
35  cmd.Connection = con
36  cmd.CommandType = System.Data.CommandType.Text
37  cmd.Parameters.AddWithValue("@Name", strName)
38  cmd.CommandText = "Select FirstName from Employees where FirstName like '%'+@Name+'%'"
39  Dim objDs As New DataSet()
40  Dim dAdapter As New SqlDataAdapter()
41  dAdapter.SelectCommand = cmd
42  con.Open()
43  dAdapter.Fill(objDs)
44  con.Close()
45  Return objDs.Tables(0)
46 End Function
47End Class
48</webmethod></system.web.script.services.scriptservice></webservicebinding(conformsto></webservice([namespace]>


Build and run the application.

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)