Finishing an ASP.NET AJAX-based Application - Adding the CascadingDropDown Control to the Web Page

(Page 3 of 4 )

First, let's do some cleaning. Remove the two properties named AutoPostBack and OnSelectedIndexChanged from the two corresponding DropDownList controls. The following shows the code after modification:

 

<asp:DropDownList ID="ddlCountry" Runat="server" >

</asp:DropDownList>

//omitted…

<asp:DropDownList ID="ddlState" Runat="server">

</asp:DropDownList>

 

Second, let's add the two CascadingDropDown controls:

 

<ajaxToolkit:CascadingDropDown ID="cddCountry" runat="server"

   TargetControlID="ddlCountry"

   Category="Country"

   PromptText="Please Choose a Country"

   LoadingText="Loading Countries..."

   ServicePath="../LocationService.asmx"

   ServiceMethod="GetCountries" />

<ajaxToolkit:CascadingDropDown ID="cddCity" runat="server"

   TargetControlID="ddlState"

   Category="City"

   PromptText="Please Choose a State"

   LoadingText="Loading States..."

   ServicePath="../LocationService.asmx"

   ServiceMethod="GetStatesForCountry"

   ParentControlID="ddlCountry" />

 

Let's take a close look at the first <ajaxToolkit:CascadingDropDown>. Note that its TargetControlID property is bound to the DropDownList "ddlCountry" and the Category is set to "Country" (please refer to the sentence "…kv["Country"]));" within the Web Method named GetStatesForCountry). And also, the ServicePath property is pointing to the Web Service we've just defined, and ServiceMethod is bound to the corresponding method named GetCountries, which indicates that the data source of this DropDownList comes from it. Similar things happen with the second <ajaxToolkit:CascadingDropDown>. However, the real secret that joins the two CascadingDropDowns together lies in the ParentControlID property of the second CascadingDropDown.

Last but not least, according to the materials provided by MS AJAX framework, we have to disable the validate event of the related web page, or else there will be an "Invalid post back or callback argument" exception thrown during the post back of this page. Please refer to the following code in bold:

 

<%@ Page Language="C#" EnableEventValidation="false" MasterPageFile="~/MasterPage.master" CodeFile="jobsearch.aspx.cs" Inherits="jobsearch_aspx" Title="Untitled Page" %>

 

Next: Modifying the Related Contents in the CodeFile >>
 

More ASP.NET Articles
More By Xianzhong Zhu

Comments On: Finishing an ASP.NET AJAX-based Application

· I was looking for this since long time. Finally I find it. Great work. I am working...   >>> Post your comment now!