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.
