20/11/09

Ajax AutoComplete

Ajax provides a cool way to implement the AutoComplete feature on TextBoxes. AutoComplete is a very useful feature for Web Sites, plus it makes your final product more dynamic in the eyes of the end user and more expensive in the eyes of your client and to top all of that it is very easy to implement.

What you will need is an aspx file and a Web Service

1.In the WebForm that you wish to implement the AutoComplete TextBox, drag & drop a ScriptManager, found under AJAX Extensions and a TextBox

2.Place your mouse over the TextBox and add the AutoCompleteExtender to your TextBox

3.Add a WebService to your solution. The method you must use must have the following signature
[WebMethod]
[System.Web.Script.Services.ScriptMethod] 
public string[] HelloWorld(string prefixText, int count)
//Make sure that you uncomment the line

//just after the using statements
[System.Web.Script.Services.ScriptService]


4.Your WebService method must look like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data;
using System.Data.SqlClient;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{

    public WebService()
    {
        //InitializeComponent();
    }
    [WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public string[] HelloWorld(string prefixText, int count)
    {

//Your connectionString will surely be different than mine

SqlConnection conne = new SqlConnection(@"Data Source=MSEN-PC\SQLEXPRESS;Initial Catalog=BookStore;Integrated Security=True");
//Since probably your database will be different too, select the appropriate field from your db table to appear in the AutoComplete
SqlDataAdapter ad = new SqlDataAdapter("select name from book where name like  '" + prefixText + "%'", conne);
        DataSet ds = new DataSet();
        ad.Fill(ds);
        List list = new List();
        count = 0;
        foreach (DataRow dr in ds.Tables[0].Rows)
        {
            list.Add(ds.Tables[0].Rows[count]["name"].ToString());
            count++;
        }
        return list.ToArray();
    }
}


5. Finally, your aspx must look like this



<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!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 id="Head1" runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <!--Make sure you add the Services tag within ScriptManager-->
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
        <asp:ServiceReference Path="WebService.asmx" />
        </Services>
        </asp:ScriptManager>
        <br />
        <br />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <cc1:AutoCompleteExtender
        ID="TextBox1_AutoCompleteExtender"
        runat="server"
        DelimiterCharacters=""
        Enabled="True"
<!-The name of the WebService to use-->
        ServicePath="WebService.asmx"
<!-The name of the WebMethod to use-->
        ServiceMethod="HelloWorld"
        TargetControlID="TextBox1"
<!-The minimum characters before AutoComplete starts-->
        MinimumPrefixLength="1">
        </cc1:AutoCompleteExtender>
    </div>
    </form>
</body>
</html>


Have fun!!!

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου