asp.net ajax toolkit中的CascadingDropDown使用详解(一)

   实际开发经常要用到级联下拉框，如省份、城市、地区，或三级分类等都要用到。开发起来总是很麻烦，现在有了asp.net ajax tooolkit的CascadingDropDown控件，情况变的好起来了，下面就来看看是怎样实现的。

.aspx页面中的关键代码：

 

三个DropDownList，形成三级联动。

<table> <tr> <td>Make</td> <td><asp:DropDownList ID="DropDownList1" runat="server" Width="170" /></td> </tr> <tr> <td>Model</td> <td><asp:DropDownList ID="DropDownList2" runat="server" Width="170" /></td> </tr> <tr> <td>Color</td> <td><asp:DropDownList ID="DropDownList3" runat="server" Width="170" AutoPostBack="True" onselectedindexchanged="DropDownList3_SelectedIndexChanged" /></td> </tr> </table>

注意最后一个的设置，自动回传，其中的事件是获取结果并显示在UpdatePanel中的。

 

三个CascadingDropDown控件，分别关连上面的三个DropDownList

<cc1:CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID ="DropDownList1" Category ="Make" PromptText ="please select a make" LoadingText ="[loading categories...]" ServicePath ="CarsService.asmx" ServiceMethod ="GetDropDownContents"> </cc1:CascadingDropDown> <cc1:CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID ="DropDownList2" Category ="Model" PromptText="Please select a model" LoadingText="[Loading models...]" ServiceMethod="GetDropDownContentsPageMethod" ParentControlID ="DropDownList1"> </cc1:CascadingDropDown> <cc1:CascadingDropDown ID="CascadingDropDown3" runat="server" TargetControlID ="DropDownList3" Category="Color" PromptText="Please select a color" LoadingText="[Loading colors...]" ServicePath="~/cascadingDDL/CarsService.asmx" ServiceMethod="GetDropDownContents" ParentControlID="DropDownList2"> </cc1:CascadingDropDown>

    可能是出于演示的目的，第三个dropdownlist使用了页面方法。

    数据源使用了sampleWebSite中的xml文件。   

    Category="Make"中的Make是制造厂商，Model是汽车的类型，Color是汽车的颜色。其它的各个属性的意义:

TargetControlID 不用说了吧；

Category ：是各级分类名，如省份，在这里就是制造厂商Make；

PromptText：在初始化时的提示文本；

LoadingText：加载时的提示文本；

ServicePath：web Service文件，全称；

ServiceMethod：web service中的获取数据的方法；

ParentControlID ：上一级的dropdownlist的ID。

还有其它的属性，读者自己只好去查toolkit的文档了。

 

一个UpdatePanel用来显示您选择的结果。

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode ="Conditional" RenderMode ="Inline" > <ContentTemplate > <asp:Label ID="Label1" runat="server" Text="没有服务器响应数据(结果将显示在这里)"></asp:Label> </ContentTemplate> <Triggers > <asp:AsyncPostBackTrigger ControlID ="DropDownList3" EventName ="SelectedIndexChanged" /> </Triggers> </asp:UpdatePanel>
还有一样，千万不要忘了，要不总是出现那个烦人的黄色的页面。

在<%@ Page 中设置EnableEventValidation ="false" 。

aspx.cs后置代码中的代码

protected void DropDownList3_SelectedIndexChanged(object sender, EventArgs e) { string make = DropDownList1.SelectedItem.Text; string model = DropDownList2.SelectedItem.Text; string color = DropDownList3.SelectedItem.Text; if (string.IsNullOrEmpty(make)) Label1.Text = "Please select a make."; else if (string.IsNullOrEmpty(model)) Label1.Text = "Please select a model."; else if (string.IsNullOrEmpty(color)) Label1.Text = "Please select a color."; else Label1.Text = string.Format("您已经选择了一个{0} {1} {2}.Nice car!", color, make, model); } [WebMethod] [System.Web.Script.Services.ScriptMethod] public static CascadingDropDownNameValue[] GetDropDownContentsPageMethod(string knownCategoryValues, string category) { return new CarsService().GetDropDownContents(knownCategoryValues ,category ); }

很简单，只是用来获取结果并显示在页面上。中间有个页面方法,在第二个ddl上使用了。

 

下面来看看关键的获取数据的WEB服务

[System.Web.Script.Services.ScriptService] public class CarsService : System.Web.Services.WebService { private static XmlDocument _document; private static Regex _inputValidationRegex; private static object _lock = new object(); public CarsService() { //Uncomment the following line if using designed components //InitializeComponent(); } /// <summary> /// 属性--获取xml数据。 /// </summary> public static XmlDocument Document { get { lock (_lock) { if(_document ==null ) { _document = new XmlDocument(); _document.Load(HttpContext.Current.Server.MapPath("~/App_Data/CarsService.xml")); } } return _document; } } /// <summary> /// 属性--做什么用啊?-返回xml文件的层次 /// </summary> public static string[] Hierarchy { get { return new string[] { "make", "model" }; } } /// <summary> /// 属性--产生regex对象 /// </summary> public static Regex InputValidationRegex { get { lock (_lock ) { if (null == _inputValidationRegex) { _inputValidationRegex = new Regex("^[0-9a-zA-Z //(//)]*$"); } } return _inputValidationRegex; } } /// <summary> /// web服务帮助方法--用从数据源返回所需的数据。 /// </summary> /// <param name="knownCategoryValues">就是选中的项，格式"分类名:值;分类名:值;",如"Make:Acura;","Make:Acura;Model:RL;"</param> /// <param name="category">总是级联dropdownlist中点击的下一个dropdownlist的分类名如"Model"</param> /// <returns></returns> [WebMethod] public AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues,string category) { StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown. ParseKnownCategoryValuesString(knownCategoryValues);//记录的是已经选择的dropdownlist的选中项的名值对,可以是多个。 //转换为特定的格式而已,把字符串形式转换为StringDictionary类型。 return AjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocument( Document ,Hierarchy ,knownCategoryValuesDictionary ,category ,InputValidationRegex );//获取的下一项dropdownlist的内容。 //从xml文档中获取指定的内容。 }

中间已经有了许多注释。下面再来增加点：

      QuerySimpleCascadingDropDownDocument(
               Document ,Hierarchy ,knownCategoryValuesDictionary ,category ,InputValidationRegex )
         * 参数：
         * Document:xml文档,数据源。
         * Hierarchy:xml文档的层次结构。
         * knownCategoryValuesDictionary:就是已经选中项的字符串形式的值。
         * category:下一个dropdownlist的分类名。
         * InputValidationRegex:是用来验证knownCategoryValuesDictionary ,category两个参数的合法性的。
        
         * 返回值中的CascadingDropDownNameValue 是CascadingDropDown下的一个类

 

提示：不要忘了在类上方加上这个--[System.Web.Script.Services.ScriptService]

      这样，一个使用xml作数据源的级联下拉框就完成了。希望能对你的开发提供一点帮助，本人也正在学习中，如果有什么新的思路，请评论里留言讨论。下一篇将介绍如果使用我们最常用的数据库做数据源来实现级联下拉框。