Tuesday, November 24, 2009

Filling cascading dropdown example using jQuery and AJAX.Net library

      ,    
Previous post related to filling cascading dropdown asynchronously offers more simple and traditional approach for beginner programmers who're more familiar with readymade asp.net update panel control. That post demonstrated dynamic approach which utilizes update panel to enable partial postbacks from a web page. You can read previous post from here.

As mentioned in previous post, we'll look into more advanced ways of solving same problem space. This time, I used combination of JQuery/AJAX.Net library to achieve responsive and far more superior user experience. I almost fell in love with jQuery. If you don't know jQuery library, I recommend you to read about it.

jQuery is a free open source lightweight javascript library which is compatible with Microsoft ASP.NET Ajax and Visual studio. jQuery provides powerful functions like DOM element manipulation, function Chaining and extensibility. jQuery usually exists as a single JavaScript file. It can be included within a web page using the following markup.

This demo demonstrates technique of calling server side method using jQuery script and Ajax.Net library. This offers more clean and faster way to update DOM elements with results from the server. This is more light weight and no page life cycle being kicked off. This is true power of jQuery.

Pre-Requisites:

Please register the Ajax HTTP handler in the web.config file in <httpHandlers> section to allow ajax call interception 

<!--following ajax handler is needed for asynchronous communication with server side code-->

<add path="ajax/*.ashx" verb="POST,GET" type="Ajax.PageHandlerFactory, Ajax"/>

Please add reference to approriate version of Ajax.Net assembly.

Please add reference to approriate version of jQuery script to your web page. I’ve utilized 1.3.2 version of jQuery “jQuery-1.3.2.min.js” for this demo.

<script type="text/javascript" src="JQuery/jquery-1.3.2.min.js"></script>

<script src="JQuery/JQueryScripts.js" type="text/javascript"></script>
.ASPX page(Default.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQueryAsynchronousCallBackDemo._Default" %>

<!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>

<!--following references include jQuery file and a script file which includes custom functions -->

<script type="text/javascript" src="JQuery/jquery-1.3.2.min.js"></script>

<script src="JQuery/JQueryScripts.js" type="text/javascript"></script>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:Literal ID="Literal1" runat="server">States:&nbsp;</asp:Literal>

<asp:DropDownList ID="ddStatesList" runat="server">

<asp:ListItem Selected ="True" Text = "please select state" Value = "0"></asp:ListItem>

<asp:ListItem Text="USA" Value ="1"></asp:ListItem>

<asp:ListItem Text ="Europe" Value = "2"></asp:ListItem>

<asp:ListItem Text ="Asia" Value = "3"></asp:ListItem>

</asp:DropDownList>

<br />

<hr />

<asp:Literal ID="Literal2" runat="server">Cities:&nbsp;</asp:Literal>

<asp:DropDownList ID="ddCitiesList" runat="server">

</asp:DropDownList>

</div>

</form>

</body>

</html>

Default.aspx.cs:

1: using System;

2: using System.Collections.Generic;

3: using System.Linq;

4: using System.Web;

5: using System.Web.UI;

6: using System.Web.UI.WebControls;

8: 

9: namespace JQueryAsynchronousCallBackDemo

10: {

11:     //THIS SAMPLE DEMONSTRATES USAGE OF AJAX.NET LIBRARY FOR DESIRED CLIENT SIDE PROGRAMMING.

12:     public partial class _Default : System.Web.UI.Page

13:     {

14:         protected void Page_Load(object sender, EventArgs e)

15:         {

16:             Ajax.Utility.RegisterTypeForAjax(typeof(AjaxUtilities)); 

17:             this.ddStatesList.Attributes.Add("OnChange", string.Format("AdjustCitiesDropDown(this, '{0}')", this.ddCitiesList.ClientID));

18:         }

19:     }

20: }

21: 
jQuery script file:
: //******************************************************************************************//3: //This is jquery based script. JQuery offers more concise and light weight javascript code.
//This script is called on "Onchange" event and asynchronously calls server side method to retrieve cities
5: //corresponding to given state. 
6: function AdjustCitiesDropDown(ddlState, ddlCity) {
7:     if (ddlState && ddlCity) {
8:         var stateId = $(ddlState).val();
9:             var res = AjaxUtilities.GetCities(stateId);
12:             if (res.value != null && res.value.length > 0) {
13:                 var options_cityTypes = '';
14:                 $.each(res.value, function(i, d) {
15:                 options_cityTypes += '<option value="' + d+ '">' + d + '<\/option>';
16:                 });
17:                 $('#' + ddlCity).html(options_cityTypes);
18:            }
19:     }
20: }


AjaxUtilities Class file



1: using System.Collections.Generic;

2: 

3: namespace JQueryAsynchronousCallBackDemo

4: {

5:     public class AjaxUtilities

6:     {

7:         public AjaxUtilities()

8:         {

9:         }

10:         //The method which is invoked from client side javascript/jquery must be marked with following

11:         //attribute

12:         [Ajax.AjaxMethod()]

13:         public List<string> GetCities(string stateId)

14:         {

15:             if (stateId == "1")

16:             {

17:                 return new List<string>() { "Chicago", "NewYork", "LA" };

18:             }

19:             else if (stateId == "2")

20:             {

21:                 return new List<string>() { "London", "Paris", "Madrid" };

22:             }

23:             else if (stateId == "3")

24:             {

25:                 return new List<string>() { "Mumbai", "Shanghai", "Tokyo" };

26:             }

27:             else

28:             {

29:                 return new List<string>() { "GothamCity" };

30:             }

31:         }

32:     }

33: }