Easiest way to implement Ajax in your ASP.Net 2.0 applications

In this article i am giving you a very usefull example, that is when you choose the country in a dropdown list which is filled dynamically and want the state comes in another dropdown will depend on the first dropdown list. To remove this post back i use ajax here.

Introduction

Asynchronous JavaScript and xml (AJAX) is now the need of the new generation websites. In the asp.net using AJAX is very easy. We just place few line codes in the web.config file and start using Ajax tags. But you should download Ajaxtoolkit first from the following Microsoft link.

Requirements:
(1) Microsoft .NET Framework Version 2.0,
(2) IE 5.01 or later
(3) Windows 2000; Windows Server 2003; Windows Vista; Windows XP

After download this exe you will get the additional option in your .net toolbox is Ajax Extensions.

Now two ways to use ajax
(1) Create a new ajax enabled web site. File->new ->ajax enabled web site
OR
(2) Changes made in your existing asp.net2.0 website.
You must add the following lines in your web.config files.
Add these lines in <system.web>

</p> <p><httpHandlers><br /> <remove verb=”*” path=”*.asmx”/><br /> <add verb=”*” path=”*.asmx” validate=”false” type=”System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″/><br /> <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”/><br /> </httpHandlers><br /> <httpModules><br /> <add name=”ScriptModule” type=”System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″/><br /> </httpModules></p> <p>

If you think why I add these lines in you web.config file then the answer is these lines you can find in you system

C or other system directory \Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\web.config
If you don’t do that, then you will get the ‘sys is undefine’ javascript error. And your ajax will not work fine.

So, cheer up, now your application is ready to implement the ajax in .net 2.0. First place a “script manager� and then a “update panel�. Now Any control in the update panel if request to server, then only the part within the update panel will submitted to the server. This is very useful when your page is frequently postback.

Examples

Here I am giving you a very simple and useful example, which you deals many times while making the dynamic website. The example is when data is dynamically filled in the dropdownlist then when you choose the country and want to display the information about only that state which belongs to that particular country, means in another dropdown you want to fill the state related to that particular country, which is selected by the user, the page postback. To remove this postback you can use ajax as in the given example I did.

For the ease of your understanding I doesn’t uses anything on that particular page except the necessary thing and the things which are more convenient for your understandings. I use XML database (for you convenience) for this example, you can use any of other database.

My naming convention is as follows:
Drop down list for country: ddlCountry
Drop down list for state :ddlState
And a label :lblMsg

Now ddlCountry is dynamically filled by the xml database on pageload event. For this purpose I call a function fillCountry(). It is called only once to fill the dropdownlist ddlcountry.
Page Load Event:

<br /> ”’ <summary><br /> ”’ On page load the drop down for choose country is filled, by a function fillCountry()<br /> ”’ </summary><br /> ”’ <param name=”sender”></param><br /> ”’ <param name=”e”></param><br /> ”’ <remarks></remarks><br /> Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load<br /> If Not IsPostBack Then<br /> fillCountry()<br /> End If</p> <p>End Sub</p> <p>

Sub routine fillCountry:
fillCountry() sub routine is used to fill the ddlCountry. It just read the xml file in the dataset. It uses listitem to fill the dropdownlist. Listitem text and listitem value is provided dynamically from the dataset.And at the end listitem is added to the dropdown.

<br /> ”’ <summary><br /> ”’ This subroutine is used to fill the drop down list for country , dynamically<br /> ”’ </summary><br /> ”’ <remarks></remarks><br /> Private Sub fillCountry()<br /> Dim ds As New DataSet()<br /> Dim lst As ListItem ‘list items that will be added to drop down list after assigning the text and value<br /> Dim i As Integer = 0<br /> If Not IsPostBack() Then<br /> ddlCountry.Items.Clear()<br /> End If</p> <p>ds.ReadXml(Server.MapPath(”App_Data\country.xml”))<br /> lst = New ListItem()<br /> lst.Text = “–Choose Country–”<br /> lst.Value = “0″<br /> ddlCountry.Items.Add(lst)<br /> For i = 0 To ds.Tables(0).Rows.Count - 1<br /> lst = New ListItem()<br /> lst.Text = ds.Tables(0).Rows(i)(0)<br /> lst.Value = ds.Tables(0).Rows(i)(1)<br /> ddlCountry.Items.Add(lst)<br /> Next</p> <p>End Sub</p> <p>

The country drop down is dynamically filled by the above code.

</p> <p>On Select Index Change event of Country dropdownlist<br /> Protected Sub ddlCountry_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)<br /> ddlState.Enabled = True<br /> fillState(ddlCountry.SelectedItem.Value.ToString().Trim())<br /> lblMsg.Text = “You are selected ” + ddlCountry.SelectedItem.Text<br /> End Sub</p> <p>

On the change of the dropdown selection, it enable the state dropdown list (ddlState) and dynamically fill the ddlstate dropdown by the function fillState(country’s Selected item value).

Sub routine fillState(CountryID):
If you have a close look on the below code you will find the line ddlState.Items.Clear()
Actually it is just clear the ddlState every time before dynamically filling the data into them, if this line is not written the each time when this function called it will not remove the previous data, just add new item into them.
Now again a new thing :
lst = New ListItem()
lst.Text = “–Choose State–”
lst.Value = “0″

What these three line do. These simply add the first list item as choose state so user can easily understand that this dropdown is to choose the state. And its value is 0 you can put it -1 or some thing string as you want.
One last thing
If ds.Tables(0).Rows(i)(2) = countryid Then
Above line is fillter the data for state which belongs to the particular countryid (See State.xml). If you are using another database you just do it by using where condition in the sql select statement.

</p> <p>”’ <summary><br /> ”’ It fills the drop down for the state dynamically<br /> ”’ </summary><br /> ”’ <param name=”countryid”&gtIt accepts the select item value from the country drop down list</param><br /> ”’ <remarks></remarks><br /> Private Sub fillState(ByVal countryid As String)<br /> Dim ds As New DataSet()<br /> Dim lst As ListItem<br /> Dim i As Integer = 0<br /> ddlState.Items.Clear()<br /> lst = New ListItem()<br /> lst.Text = “–Choose State–”<br /> lst.Value = “0″<br /> ddlState.Items.Add(lst)<br /> ds.ReadXml(Server.MapPath(”App_Data\state.xml”))<br /> For i = 0 To ds.Tables(0).Rows.Count - 1<br /> If ds.Tables(0).Rows(i)(2) = countryid Then<br /> lst = New ListItem()<br /> lst.Text = ds.Tables(0).Rows(i)(0)<br /> lst.Value = ds.Tables(0).Rows(i)(1)<br /> ddlState.Items.Add(lst)<br /> End If<br /> Next</p> <p>

Summary

Now we can come to this conclusion, you can enhance the lots of user interaction using Ajax. You can use it on every where, where you think it required. Another member for the toolbox in Ajax extension is for the different purpose like update progress is for the displaying the progress in the Ajax panel when it takes too much time to update. Another example of Ajax is you can use it in data grid also, it just remove the post back when you enable paging and shorting. In calendar control it also removes the post back etc. I will come with my other articles with more features of Ajax.

Copyright @ Gaurav Kumar Singh 2007
Utstarcom Inc: GS&SI
Signature Tower, Gurgaon
Desk: +91 124 4166371
Mobile: +91 9350914173