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    {
 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        /**//// <summary>
33        /// Helper web service method
34        /// </summary>
35        /// <param name="knownCategoryValues">private storage format string</param>
36        /// <param name="category">category of DropDownList to populate</param>
37        /// <returns>list of content items</returns>
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，在浏览器里查看本页。