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#

show source     
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

show source     
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.

If you like this post than join us or share

4 comments:

rakesh said... 1: good ...; October 3, 2012 at 12:19 PM
Unknown said... 2: it's not working for me. could you give me hand please?
form_dosen.aspx

-------------------------------------------------------------------------------------------------------------
WebServices.asmx.vb
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.ComponentModel
Imports System.Data.SqlClient

' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
_
_
_
_
Public Class WebService1
Inherits System.Web.Services.WebService
_
Public Function cariDosen(ByVal nama As String) As String()
bacaData_tabel = dataDosen(nama)
Dim items As New List(Of String)()
Dim lengkap As String
For x As Integer = 0 To bacaData_tabel.Rows.Count - 1
lengkap = bacaData_tabel.Rows(x)(0).ToString()
items.Add(lengkap)
Next x
Return items.ToArray()
End Function

Public Function dataDosen(ByVal nama_dosen As String) As DataTable
Using perintah_Query As New SqlCommand()
perintah_Query.CommandType = CommandType.StoredProcedure
perintah_Query.CommandText = "sp_tampil_nama_dosen"
perintah_Query.Parameters.AddWithValue("@p1", nama_dosen)
perintah_Query.Connection = koneksi_db
bacaData_adapter = New SqlDataAdapter(perintah_Query)
bacaData_set = New DataSet()
bacaData_adapter.Fill(bacaData_set)
Return bacaData_set.Tables(0)
End Using
End Function
End Class; January 30, 2014 at 11:22 AM
Anonymous said... 3: thanks for your attention about this topic; March 2, 2014 at 11:27 PM
Djama said... 4: not working with me, asp.net 4.5; February 20, 2015 at 7:54 PM

Csharp Asp.Net Articles C# VB Tutorials Code Examples Samples

Ajax AutoCompleteExtender In Master Page Asp.Net

4 comments:

Post a Comment

Recent Posts

Find More Articles

Csharp Asp.Net Articles C# VB Tutorials Code Examples Samples

Ajax AutoCompleteExtender In Master Page Asp.Net

Other asp.net,C#,VB.NET articles:

4 comments:

Post a Comment

Recent Posts

Find More Articles