Simplify Dependent Lists with the Microsoft AJAX CascadingDropDown Control

ne key problem that AJAX addresses is improving Web application user interfaces. By reducing the need to constantly refresh the entire Web page, Atlas helps ensure that your Web application is always responsive to user actions. For example, suppose you're filling in a Web form to register for a free email account, or a free magazine and you are asked to select the country you are from. After you select the appropriate country, the entire page refreshes so that the application can now ask you specific questions related to the selected country, such as the state you are in, etc. Even worse, the information you have already painstakingly entered may disappear along with the refresh—and then you have to enter it all over again. Sounds familiar? This is the problem that I address in this fouth article on Atlas (now renamed to Microsoft ASP.NET AJAX).

In this article, I'll show you how to create a sample application to control and monitor the user's selection in DropDownList controls so that selecting an item in one control automatically changes the list of items in another control; all without refreshing the entire page.

Creating the Sample Application
Using Visual Studio 2005, create a new Atlas application and name it as C:\CascadingDropDown. Drag and drop a CascadingDropDown control from the ToolBox onto the default.aspx page (see Figure 1).

Tip: The CascadingDropDown control is one of many controls available in the Atlas Control Toolkit, an extended library of Atlas controls developed by both Microsoft and community developers.

Next, insert a 2x2 table and populate it with two DropDownList controls as shown in Figure 1).

Figure 1. Sample Application Form: Here's how the default.aspx page should look after you place the controls

Switch to Source View and add two CascadingDropDownProperties elements, shown in bold in the following code:

   <cc1:CascadingDropDown ID="CascadingDropDown1" 
     runat="server">
      <cc1:CascadingDropDownProperties 
         Category="Author" 
         TargetControlID="DropDownList1"
         ServiceMethod="GetAuthors" 
         ServicePath="WebService.asmx" 
         PromptText="Please select an author" />
      <cc1:CascadingDropDownProperties 
         Category="Title" 
         TargetControlID="DropDownList2"
         ParentControlID="DropDownList1" 
         ServiceMethod="GetTitles" 
         ServicePath="WebService.asmx"
         PromptText="Please select a title" />
   </cc1:CascadingDropDown>
   <table>
      <tr>
          <td style="width: 60px">Authors</td>
          <td style="width: 115px">
             <asp:DropDownList 
                ID="DropDownList1" runat="server" Width="215px">
             </asp:DropDownList></td>
      </tr>
      <tr>
          <td style="width: 60px">Titles</td>
          <td style="width: 115px">
             <asp:DropDownList ID="DropDownList2" 
                runat="server" Width="392px">
             </asp:DropDownList></td>
      </tr>
   </table>

The CascadingDropDownProperties element associates the CascadingDropDown control with a DropDownList control. Here's a brief explanation of the attributes for the element:

• Category—indicates the name of the category the DropDownList represents; more on this later.
• TargetControlID—specifies the control you are extending.
• ParentControlID—specifies the control that affects the content of the control as indicated in the TargetControlID attribute; this attribute is optional.
• ServiceMethod—specifies the name of the Web method that returns the list of values for the DropDownList control; you will define this later.
• ServicePath—specifies the name of the Web service .asmx file containing the Web method specified in the ServiceMethod attribute.
• PromptText—the text to display when no values are selected in the control.

Next Page