In this post I will talk about Ajax again.This time we will use an extender to ajaxify our application.I am going to use the AutoCompleteExtender extender together with a textbox. Inside the extender control I will call a web service (a service method) and I will pass it whatever the user types in the textbox.

Then the method will search in a .xml file and return only those results that match the input of the user.In order to better understand what I mean think of this example something like the Google Suggest like auto-complete features. This is very useful for the user since he can select valid data for the textbox and to prevent him from typing invalid data.

You will need to have the Ajax Control Toolkit in order to complete this sample. The toolkit is a library of Ajax-enabled server side controls.They have much richer client side functionality than the other ASP.Net controls.To be more specific they encapsulate client-side CSS and Javascript.

If you want to see how you can download and install the Ajax Control Toolkit (as part of the Visual Studio 2010 tool) you can click here. Download the binary version and not the source one. The source version is only useful only if you want to extend the toolkit.The toolkit was not developed by Microsoft. It is a collaborative effort and the source code is placed on the open source project repository website , codeplex.com.Ajax toolkit is a brilliant example on how developer's skills and commitment can benefit the community.

A Control Extender adds functionality to another control. Extenders extend existign UI elements. Extenders can be applied to a variety of ASP.Net controls and can be applied to existing controls in existing applications. The extender controls and their class ExtenderControl inherits from the Control base class.

1) Launch Visual Studio 2010 (express edition will do). Create a new ASP.Net Web application and give it an appropriate name. Choose C# as the development language.

2) Add a new item in your application, a web form. Name it Footballers.aspx. Yes, you guessed it, we will query an xml file with football related data.

3) Add a textbox control on the form. Name it FootballTextBox.Add a ScriptManager control on the page.

4) Add a new item to your application, an .xml file. Name it Footballers.xml. The code for the file follows.

<?xml version="1.0" encoding="utf-8" ?>
<Footballers>
    <footballer name ="Henderson" />
    <footballer name ="Adam" />
    <footballer name ="Carragher" />
    <footballer name ="Carroll" />
    <footballer name ="Kuyt" />
    <footballer name ="Lucas" />
    <footballer name ="Agger" />
    <footballer name ="Aquilani" />
    <footballer name ="Aurelio" />
    <footballer name ="Bellamy" />
    <footballer name ="Coady" />
    <footballer name ="Coates" />
    <footballer name ="Cole" />
    <footballer name ="Downing" />
    <footballer name ="Flanagan" />
    <footballer name ="Gerrard" />
    <footballer name ="Maxi" />
    <footballer name ="Meireles" />
    <footballer name ="Srktel" />
    <footballer name ="Spearing" />
    <footballer name ="Sterling" />
    <footballer name ="Suarez" />
    <footballer name ="Wilson" />
    <footballer name ="Wisdom" />
</Footballers>

 5) Add a new item to your application, a web service.Name it footballer.asmx. In the code behind (footballer.asmx.cs) of this file we will have to uncomment this line of code

[System.Web.Script.Services.ScriptService]

The whole code for the footballer class (that inherits from the WebService class) follows

[System.Web.Script.Services.ScriptService]
public class footballer: System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod]
public string[] GetFootballers(string prefixText, int count)
	{
	XmlDocument doc = new XmlDocument();
	string path = HttpContext.Current.Server.
	MapPath("~/App_data/Footballers.xml");
	doc.Load(path);
	XmlNodeList footballerData = doc.GetElementsByTagName("footballer");
 
	List<string> footballers = new List<string>();
	foreach (XmlNode footballer in footballerData)
	{
	string footballerName = footballer.Attributes["name"].Value;
 
	if (footballerName.ToLower().StartsWith(prefixText.ToLower()))
	footballers.Add(footballerName);
 
	if (footballers.Count >= count)
	break;
	}
 
	return footballers.ToArray();
}
}
}

 I will explain what I do in the code above. I am creating an XmlDocument object.Then I get the path of the .xml file and load the file.Then I create a XmlNodeList object that holds the footballer elements.Then I create a list of strings object (footballers). Then I loop through the elements and for each element I get the attribute name value.Then I check to see if that name attribute value matches the input (characters) the user typed in the textbox.If it is true I add that name value to the array and finally I return that array of matching footballers. It is not difficult to understand the code for this method.

5) Let me show you the markup for the AutoCompleteExtender extender.First select the Textbox control and then click the smart tag ( Add Extender) and from the available extenders choose AutoCompleteExtender and click OK.Then complete markup follows.

	<form id="form1" runat="server">
	<div>
		<asp:ScriptManager ID="ScriptManager1" runat="server">
		</asp:ScriptManager>
		<asp:TextBox ID="FootballTextBox" runat="server"></asp:TextBox>
		<asp:AutoCompleteExtender 
			ID="FootballTextBox_AutoCompleteExtender" 
			runat="server" DelimiterCharacters=""
			Enabled="True" ServicePath="footballer.asmx"
			ServiceMethod="GetFootballers"
			MinimumPrefixLength="2" 
			TargetControlID="FootballTextBox">
		</asp:AutoCompleteExtender>
	</div>
	</form>

 I will explain some of the properties of the AutoCompleteExtender. ServicePath property is set to the web service file. The ServiceMethod property is set to the method we just described above.The MinimumPrefixLength property is set to 2, which defines how many characters the user must insert before asynchronous requests are triggered back to the server.

6) Run your application and type the letters "wi". When you do that all the footballer names that start with "Wi" should appear in the dropdownlist.

Have a look at the picture below.

I hope you understood how important extender controls are and how more responsive our application becomes. We have partial/asynschronous postbacks to the server without the page flickering. If you want to see the communication that takes place you can donwload Fiddler (works something like a web listener/debugger) here. You can see exactly what happens between the client and the server.You can see the requests, the responses, the headers, the actual HTML sent to the client.

Have  a look at the picture below.

Email me if you want the source code!!!

Hope it helps!!!