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 refreshand 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:
PromptText="Please select an author" />
PromptText="Please select a title" />
<td style="width: 60px">Authors</td>
<td style="width: 115px">
ID="DropDownList1" runat="server" Width="215px">
<td style="width: 60px">Titles</td>
<td style="width: 115px">
element associates the CascadingDropDown control with a DropDownList control. Here's a brief explanation of the attributes for the element:
- Categoryindicates the name of the category the DropDownList represents; more on this later.
- TargetControlIDspecifies the control you are extending.
- ParentControlIDspecifies the control that affects the content of the control as indicated in the TargetControlID attribute; this attribute is optional.
- ServiceMethodspecifies the name of the Web method that returns the list of values for the DropDownList control; you will define this later.
- ServicePathspecifies the name of the Web service .asmx file containing the Web method specified in the ServiceMethod attribute.
- PromptTextthe text to display when no values are selected in the control.