Filling cascading dropdown example using jQuery and AJAX.Net library

By | November 24, 2009

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

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.

.ASPX page(Default.aspx)

Default.aspx.cs:

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 cities5: //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