CascadingDropDown控件

     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: 
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    {
 4        // Member variables
 5        private static XmlDocument _document;
 6        private static object _lock = new object();
 7
 8        // we make these public statics just so we can call them from externally for the
 9        // page method call
10        public static XmlDocument Document
11        {
12            get
13            {
14                lock (_lock)
15                {
16                    if (_document == null)
17                    {
18                        // Read XML data from disk
19                        _document = new XmlDocument();
20                        _document.Load(HttpContext.Current.Server.MapPath("CarsService.xml"));
21                    }
22                }
23                return _document;
24            }
25        }
26
27        public static string[] Hierarchy
28        {
29            get { return new string[] { "make", "model" }; }
30        }
31
32        /**//// 

33        /// Helper web service method
34        /// 

35        /// private storage format string
36        /// category of DropDownList to populate
37        /// list of content items
38        [WebMethod]
39        public AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category)
40        {
41            // Get a dictionary of known category/value pairs
42            StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
43
44            // Perform a simple query against the data document
45            return AjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocument(Document, Hierarchy, knownCategoryValuesDictionary, category);
46        }
47    }

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