Tuesday, April 20, 2010

AjaxToolkit: AutoCompleteExtender

<%@ Register Assembly="AjaxControlToolkit"Namespace="AjaxControlToolkit" tagprefix="ajaxToolkit"%>

Which says that the reference assembly "AjaxControlToolkit.dll" should be registered on the page by using above method. We should also have tagprefix="ajaxToolkit" which is similar to .

In this article I have very simple database table called as "Tbl_Countries" with fields as:

CountryId int primary key,
CountryName varchar(50)

I am using a web service called as "AutoComplete.asmx" whose code behind gets automatically added to the "App_Code" folder.

Note: Very important part is you need to give a reference of "AjaxControlToolkit.dll".

Here is complete code for "AutoComplete.asms.cs".

using System;

using System.Web;

using System.Collections;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

///

/// Summary description for AutoComplete

///

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService]

public class AutoComplete : System.Web.Services.WebService

{

[WebMethod]

public string[] GetCountriesList(string prefixText)

{

DataSet dtst = new DataSet();

SqlConnection sqlCon = newSqlConnection(ConfigurationManager.AppSettings["ConnectionString"]);

string strSql = "SELECT CountryName FROM Tbl_Countries WHERE CountryName LIKE '" + prefixText + "%' ";

SqlCommand sqlComd = new SqlCommand(strSql, sqlCon);

sqlCon.Open();

SqlDataAdapter sqlAdpt = new SqlDataAdapter();

sqlAdpt.SelectCommand = sqlComd;

sqlAdpt.Fill(dtst);

string[] cntName = new string[dtst.Tables[0].Rows.Count];

int i = 0;

try

{

foreach (DataRow rdr in dtst.Tables[0].Rows)

{

cntName.SetValue(rdr["CountryName"].ToString(), i);

i++;

}

}

catch { }

finally

{

sqlCon.Close();

}

return cntName;

}

}

Let us take another page called as "default.aspx" in which I am having a tag and in which a tag in which you can specify path of webservices. You have already registered Assembly="AjaxControlToolkit" on this page so you can use that.


So my entire code will look something like this

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" tagprefix="ajaxToolkit"%>

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title>Untitled Pagetitle>

head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

<Services>

<asp:ServiceReference Path="AutoComplete.asmx" />

Services>

asp:ScriptManager>

<div>

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

<ajaxToolkit:AutoCompleteExtender runat="server" ID="autoComplete1" TargetControlID="txtCountry"ServicePath="AutoComplete.asmx" ServiceMethod="GetCountriesList" MinimumPrefixLength="1" EnableCaching="true" />

div>

form>

body>

html>

Following snapshot gives you clear idea as how the AutoCompleteExtender works.

No comments:

Post a Comment