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，在浏览器里查看本页。