Tuesday, July 10, 2012

Implementing Auto Suggest Functionality using Ajax Control Toolkit

http://www.codeproject.com/Tips/413197/A-Beginners-Guide-Implementing-Auto-Suggest-Functi

http://www.misfitgeek.com/2011/04/jquery-textbox-autocomplete/


Introduction 

This tip describes how the auto complete textbox can be created using the AJAXControlExtender. We will also implement a small application to show how this can be done.

Background  

The Ajax control toolkit provides the AutoCompleteExtender which can be used to create the autocomplete textbox without too much of overhead. We can also create the same thing using XMLHttpRequest or jQuery AJAX but perhaps I will write another tip for that.
The AutoCompleteExtender need to be attached with a textbox first. this can be done using the TargetControlID property of the extender. The Processing for getting the autocomplete results will be done at server side. typically this was done in a static method contained in a web service.

Using the code

The extender can then use this webservice to get the data from the server side and show the suggestions.
So Let us create the a small application that will suggest the list of countries as user types into the textbox. Lets us start by looking at the Database. For now let us create a small database.

Now let us create a small webservice that will search the suggestion results from the database.

Now let us run the page and see the results.


The suggestion will be shown as the user will type in the textbox. these results are coming from serverside asynchronously.

Default.aspx:

<%@ 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>Ajax control toolkit - Auto complete extender demo</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
          
        </asp:ScriptManager>
        <div>
            <asp:TextBox ID="txtCountry" runat="server"></asp:TextBox>
            <ajaxToolkit:AutoCompleteExtender runat="server" ID="autoComplete1" TargetControlID="txtCountry"
                ServicePath="WebService.asmx" ServiceMethod="GetCountriesList" MinimumPrefixLength="1"
                EnableCaching="true" CompletionInterval="10" />
        </div>
    </form>
</body>
</html>
 

WebService.asmx:

<%@ WebService Language="C#" CodeBehind="~/App_Code/WebService.cs" Class="WebService" %>



 WebService.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>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
    const string selectQuery = "SELECT Country FROM Countries WHERE Country LIKE @prefixText";

    [WebMethod]
    public string[] GetCountriesList(string prefixText)
    {
        string[] cntName = null;
        try
        {
            using (SqlConnection sqlCon = new SqlConnection(ConfigurationManager.ConnectionStrings["DatabaseConnectionString1"].ConnectionString))
            {
                sqlCon.Open();               
                using (SqlCommand sqlComd = sqlCon.CreateCommand())
                {
                    sqlComd.CommandType = CommandType.Text;
                    sqlComd.CommandText = selectQuery;
                    sqlComd.Parameters.Add(new SqlParameter("@prefixText", string.Format("{0}%", prefixText)));

                    using (SqlDataAdapter sqlAdpt = new SqlDataAdapter())
                    {
                        sqlAdpt.SelectCommand = sqlComd;

                        using (DataTable table = new DataTable())
                        {
                            sqlAdpt.Fill(table);
                            cntName = new string[table.Rows.Count];
                            int i = 0;
                            foreach (DataRow rdr in table.Rows)
                            {
                                cntName[i] = rdr["Country"].ToString().Trim();
                                ++i;
                            }
                        }
                    }
                }
            }
        }

        catch
        {
            //something went wrong
        }

        return cntName;
    }
  
}


WebConfig File:



 <?xml version="1.0"?>
<configuration>
    <configSections>
        <sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
            <sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
                <section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
                <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
                    <section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere"/>
                    <section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
                    <section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
                </sectionGroup>
            </sectionGroup>
        </sectionGroup>
    </configSections>
  <connectionStrings>  
    <add name="DatabaseConnectionString1" connectionString="Data Source=MVSL1718\MSSQLSERVER2K8R2;Initial Catalog=Countries;User ID=sa;Password=Maxval2"
      providerName="System.Data.SqlClient" />
  </connectionStrings>
    <system.web>
        <pages>
            <controls>
                <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
            </controls>
        </pages>
        <!--
          Set compilation debug="true" to insert debugging
          symbols into the compiled page. Because this
          affects performance, set this value to true only
          during development.
    -->
        <compilation debug="true">
            <assemblies>
                <add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
                <add assembly="System.Web.Extensions.Design, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
                <add assembly="System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/>
                <add assembly="System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/></assemblies>
        </compilation>
        <httpHandlers>
            <remove verb="*" path="*.asmx"/>
            <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
            <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
            <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
        </httpHandlers>
        <httpModules>
            <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
        </httpModules>
    </system.web>
 <system.webServer>
        <validation validateIntegratedModeConfiguration="false"/>
        <modules>
            <add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
        </modules>
        <handlers>
            <remove name="WebServiceHandlerFactory-Integrated"/>
            <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
            <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
            <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
        </handlers>
    </system.webServer>
</configuration>










Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)