AutoCompleteExtender in ASP.NET
We got introduced many features in ASP.NET Ajax controls. Today we are going to discuss about the control which we oftenly needs to develop in your ASP.NET Web Application. The AutoCompleteExtender with data from ASP.NET code behind and Data from the Web Services. The AutoCompleteExtender used to fill the text box with options data which we will get as a list.
The AutoCompleteExtender with data from ASP.NET code behind:
Now we will see how to develop the webpage with AutoCompleteExtender associate with the text box to suggest the names to fill the text box. Create one Webpage with the Name SampleAutoComplete. Drag the script manager control from the AJAX Extesions tool box and drag text box control from the ASP.NET tool box and Name it as txtName, now drag AutoCompleteExtender from AJAX tool kit on to a webpage. Set the AutoCompleteExtender's TargetControlID property with txtName, set the UseContextKey as true, ServicePath as null and ServiceMethod is MyName like as shown in below code snippet. And also please set the MinimumPrefixLength as you wish like 2 or 3 characters.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SampleAutoComplete.aspx.cs" Inherits="WebApplication12.SampleAutoComplete" %>
<%@ 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>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:AutoCompleteExtender ID="aceNames" runat="server" TargetControlID="txtName" UseContextKey="true" ServicePath="" ServiceMethod="MyNames" MinimumPrefixLength="2">
</asp:AutoCompleteExtender>
</div>
</form>
</body>
</html>
From the below code snippet I have developed one web method MyNames() in SampleAutoComplete.ASPX.cs page by setting the tags WebMethod and Scriptmethods likes as shown below. You should have to use the input parameters names and type exactly like as shown in the below example. Here I have created one string array and defined it with Items to add names.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication12
{
public partial class SampleAutoComplete : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static string[] MyNames(string prefixText,int count)
{
string[] Names = {"Naveen", "Venkat","Radha","Lakshmi","Sri Krishna","Taral","Tony","Naga","Naresh"};
return Names;
}
}
} Below is the Screen shot which AutoCompleted Extender look like.
The AutoCompleteExtender with data from ASP.NET Web Service:
Like as above example, now drag the TextBox and Name it as txtCountryNames, drag the AutoCompleteExtender and name it as aceCountry. Set the properties TargetControlID="txtCountryNames" UseContextKey="true" ServicePath="AutoCompleteService.asmx" ServiceMethod="MyCountryNames" MinimumPrefixLength="2" of the AutoCompleteExtender. Below is the sample code. Here I have created the AutoCompleteService.asmx in the same directory.
Below is the Sample ASPX code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SampleAutoComplete.aspx.cs" Inherits="WebApplication12.SampleAutoComplete" %>
<%@ 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>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:TextBox ID="txtCountryNames" runat="server"></asp:TextBox>
<asp:AutoCompleteExtender ID="aceCountry" runat="server" TargetControlID="txtCountryNames" UseContextKey="true" ServicePath="AutoCompleteService.asmx" ServiceMethod="MyCountryNames" MinimumPrefixLength="2">
</asp:AutoCompleteExtender>
</div>
</form>
</body>
</html>
The web service would be like as below.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
namespace WebApplication12
{
/// <summary>
/// Summary description for AutoCompleteService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 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 AutoCompleteService : System.Web.Services.WebService
{
[WebMethod]
public string[] MyCountryNames(string prefixText, int count)
{
string[] counryNames = { "India", "Pakistan", "Germany", "Japan", "China", "Swedan", "Switzar Land", "Malesia", "Korai","US","UK" };
return counryNames;
}
}
} Below is the Screen shot which AutoCompleted Extender look like.
You can download the source code from the below link:
Instead of this approach we can get the same through JQuery in less than 7 lines of code...
This is not preferable in the real time development