Thứ Tư, 7 tháng 3, 2012

Ajax Auto Complete suggestion in asp.net using webservices (Ajax AutocompleteExtender)

AutoCompelete using Ajax in Asp.net 

Ajax a powerfull script on the web,It provides you a lot more functionality to
improve your application Performance.
Heres the article to show how to work with AutoCompleteExtender (Control in AjaxControlToolKIt).


AutoComplete Description
  • AutoComplete is an ASP.NET AJAX extender that can be attached to any TextBox control,
    and will associate that control with a popup panel to display words that
    begin with the prefix typed into the textbox.
  • The dropdown with candidate words supplied by a web service is
    positioned on the bottom left of the text box
    .

This means that the control will fetch the data from a webservice(sdsd), and it can be attached to a asp.net TextBox control.
Whenever users starts typing in the textbox, it automatically fetches a suggestion list from the configured webservice.


Note: Add latest Ajax dll in your application bin folder.

Step 1: Add  webservices (WebService.asmx)
code:  appcode/WebService.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Collections;

/// Summary description for WebService
[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 () {
//Uncomment the following line if using designed components
//InitializeComponent();
}

[WebMethod]
public string[] GetNames(string prefixText, int count, string contextKey)
{
ArrayList sampleList = new ArrayList();
sampleList.Add("ABC"); sampleList.Add("Hello");
sampleList.Add("Hi"); sampleList.Add("Apple");
sampleList.Add("Hey");
ArrayList filteredList = new ArrayList();
foreach (string s in sampleList){
if (s.ToLower().StartsWith(prefixText.ToLower()))
filteredList.Add(s);
}
return (string[])filteredList.ToArray(typeof(string));
}
}


Step 2: AC.aspx page:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ac.aspx.cs" Inherits="Ac" %>

<%@  Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="Ajaxtoolkit"  %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"></head>
 <body>

  <form id="form1" runat="server">
    <asp:scriptmanager id="ScriptManager1" runat="server"></asp:scriptmanager>
   <div>
        <asp:textbox id="TextBox1" runat="server"></asp:textbox>
          <ajaxtoolkit:autocompleteextender enabled="true" minimumprefixlength="0" runat="server" servicemethod="GetNames" servicepath="WebService.asmx" targetcontrolid="TextBox1" usecontextkey="true">
        </ajaxtoolkit:autocompleteextender>
    </div>
</form>
</body>
</html>

Không có nhận xét nào:

Đăng nhận xét