Language

Using Auto-Postback with CascadingDropDown (VB)

By Christian Wenz|

Download Code or Download PDF

The CascadingDropDown control in the AJAX Control Toolkit extends a DropDownList control so that changes in one DropDownList loads associated values in another DropDownList. However when using the CascadingDropDown control, ASP.NET's DropDownList control's AutoPostBack feature does not work, since asynchronously loading data into the list generates an (unnecessary) postback itself. With some JavaScript code, this effect can be avoided.

Overview

The CascadingDropDown control in the AJAX Control Toolkit extends a DropDownList control so that changes in one DropDownList loads associated values in another DropDownList. (For instance, one list provides a list of US states, and the next list is then filled with major cities in that state.) However when using the CascadingDropDown control, ASP.NET's DropDownList control's AutoPostBack feature does not work, since asynchronously loading data into the list generates an (unnecessary) postback itself. With some JavaScript code, this effect can be avoided.

Steps

In order to activate the functionality of ASP.NET AJAX and the Control Toolkit, the ScriptManager control must be put anywhere on the page (but within the <form> element):

<asp:ScriptManager ID="asm" runat="server" />

Then, a DropDownList control is required:

<div> Vendor: <asp:DropDownList ID="VendorsList" runat="server"/> </div>

For this list, a CascadingDropDown extender is added, providing web service URL and method information:

<ajaxToolkit:CascadingDropDown ID="ccd1" runat="server" ServicePath="CascadingDropdown3.vb.asmx" ServiceMethod="GetVendors" TargetControlID="VendorsList" Category="Vendor" />

The CascadingDropDown extender then asynchronously calls a web service with the following method signature:

Public Function MethodNameHere(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()

The method returns an array of type CascadingDropDown value. The type's constructor expects first the list entry's caption and then the value (HTML value attribute).

<%@ WebService Language="VB" Class="CascadingDropDown3" %> Imports System.Web.Script.Services Imports AjaxControlToolkit Imports System.Web Imports System.Web.Services Imports System.Web.Services.Protocols Imports System.Collections.Generic <ScriptService()> _ Public Class CascadingDropDown3 Inherits System.Web.Services.WebService <WebMethod()> _ Public Function GetVendors(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue() Dim l As New List(Of CascadingDropDownNameValue) l.Add(New CascadingDropDownNameValue("International", "1")) l.Add(New CascadingDropDownNameValue("Electronic Bike Repairs & Supplies","2")) l.Add(New CascadingDropDownNameValue("Premier Sport, Inc.", "3")) Return l.ToArray() End Function End Class

Loading the page in the browser will fill the dropdown list with three vendors, the second one being preselected. Also, ASP.NET defines the __doPostBack() JavaScript method. Once the page has been loaded, this JavaScript call is added to the dropdown list, but only if there are elements in it. If there are no elements in the list, the Control Toolkit is currently loading them, so the JavaScript code uses a timeout and tries again in a half second.

<script type="text/javascript"> function pageLoad() { addAutoPostBack(); } function addAutoPostBack() { if ($get("VendorsList").options.length > 0) { $get("VendorsList").setAttribute("onchange","javascript:setTimeout('__doPostBack(\\'VendorsList\\',\\'\\')', 0)"); } else { setTimeout("addAutoPostBack()", 500); } } </script>

This way, a postback is only executed when there are actually elements in the list and the user selects an entry.

Selecting a list element causes a postback (Click to view full-size image)

This article was originally created on June 2, 2008

Author Information

Christian Wenz

Christian Wenz – Christian Wenz is an author, trainer, and consultant. His main focus of working and writing is on web technologies and security. Christian has written or co-written over 100 books for various publishers. He works with both open source and closed source web technologies. This leads to the unusual situation that he has both been awarded a Microsoft MVP for ASP/ASP.NET and is listed in Zend's Who is Who of PHP. He is also listed in Mozilla's credits (about:credits) and is considered an expert in browser-agnostic JavaScript.