AJAX ControlToolkit学习日志-CascadingDropDown(5)

      CascadingDropDown控件用于扩展DropDownList进行联动显示。

首先，了解一下该控件的一些属性。
   a.category:与该CascadingDropDown进行联合的DropDownList显示的内容的名字，其实就是后台的xml文档中的标签名。
   b.TargetControlID:与该CascadingDropDown关联的DropDownList。
   c.PromptText:DropDownList未选择项目时的提示信息。
   d.LoadingText:当DropDownList导入数据的提示文本。
   e.ServicePath:将被使用的web服务的路径。
   f.ServiceMethod:将被调用的web方法。
   g.ParentControlID:上一级的DropDownList。

示例：

1)建立一个ASP.NET AJAX-Enabled Web Project工程项目。

2)在default.aspx中添加三个DropDownList控件。代码如下：

1        Make: 
2        <asp:DropDownList ID="DropDownList1" runat="server" Width="133px">
3        </asp:DropDownList><br />
4        Model:
5        <asp:DropDownList ID="DropDownList2" runat="server" Width="133px">
6        </asp:DropDownList><br />
7        Color:&nbsp;
8        <asp:DropDownList ID="DropDownList3" runat="server" Width="134px">
9        </asp:DropDownList>

3)在default.aspx中添加三个CascadingDropDown，并使它们与DropDownList关联。代码如下：

1        <cc1:CascadingDropDown ID="CascadingDropDown1" Category="Make" PromptText="Please select a make" ServicePath ="CarsService.asmx" ServiceMethod="GetDropDownContents" TargetControlID="DropDownList1" runat="server">
2        </cc1:CascadingDropDown>
3        <cc1:CascadingDropDown ID="CascadingDropDown2" Category="Model" PromptText="Please select a module" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents" TargetControlID="DropDownList2" ParentControlID="DropDownList1"  runat="server">
4        </cc1:CascadingDropDown>
5        <cc1:CascadingDropDown ID="CascadingDropDown3" Category="Color" PromptText="Please select a color" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents" TargetControlID="DropDownList3" ParentControlID="DropDownList2" runat="server">
6        </cc1:CascadingDropDown>

4)在default.aspx中添加一个UpdatePanel控件，并在它里面添加一个Label和设定DropDownList3为其更新的触发器。代码如下：

1        <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
2            <ContentTemplate>
3                <asp:Label ID="label1" Text="[No response provided yet]" runat="server" />
4            </ContentTemplate>
5            <Triggers>
6                <asp:AsyncPostBackTrigger ControlID="DropDownList3" />
7            </Triggers>
8        </asp:UpdatePanel>

5)最终的界面效果如下：


6)在项目中添加Web服务，取名为CarsService.asmx。代码如下：

 1    [System.Web.Script.Services.ScriptService()]
 2    public class CarsService : System.Web.Services.WebService
 3    }

7)按下CTRL+F5，在浏览器里查看本页。