轻松掌握Ajax.net系列教程三：使用CascadingDropDown组件

这次我们学习使用AjaxControlToolkit中的CascadingDropDown组件。CascadingDropDown主要是控制数个普通的DropDownList控件，并使它们产生无刷新的级联效果。最常见的用法例如选择地理位置，我们要先选取国家，才能进一步选取所选国家的省份，然后才是城市如此类推。学会CascadingDropDown组件将会大大简化我们开发无刷新级联下拉菜单的流程。

第一步：建立Xml文件和WebService

为了方便我们使用了Xml作为数据源，大家可以参照以下文件格式建立Xml文件。

要使用CascadingDropDown，我们需要建立WebService作为数据传输的载体，因此我们先添加一个WebService并命名为CityService.asmx。

进入CityService.cs文件后我们首先要加上[System.Web.Script.Services.ScriptService()]属性，目的是告诉编译器该WebService需要暴露给客户端使用，否则系统会返回异常。

接着我们需要建立XmlDocument对象，用以返回Xml文件中的数据。

public XmlDocument Document
    {
        get
        {
           _document = new XmlDocument();
           _document.Load(HttpContext.Current.Server.MapPath("~/App_Data/Data.xml"));
           return _document;
        }
    }

    public string[] Hierarchy
    {
        get{
            string[] _hierarchy = new string[]{"province", "city"};
            return _hierarchy;
        }
    }

 以上代码返回了两个属性，一个是返回XmlDocument对象，一个是返回xml文件的层次，大家按照实际情况编写就可以了。

最后我们写一个简单的函数，用以返回数据源。

 [WebMethod]
    public AjaxControlToolkit.CascadingDropDownNameValue[ ] GetDropDownContents(string knownCategoryValues, string category){
       System.Collections.Specialized.StringDictionary knowCategoryValuesDictionary = new System.Collections.Specialized.StringDictionary();
        knowCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
        return AjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocument(Document, Hierarchy, knowCategoryValuesDictionary, category);
    }

以上要注意的是，函数GetDropDownContents的参数knownCategoryValues和category不能改变名称。因为AjaxControlToolkit所规定的签名格式包括参数字母大小写，数据类型都是不可变的，如果要更改必须重新修改AjaxControlToolkit源码。

到了这一步我们就完成了CityService.asmx。

第二步：使用CascadingDropDown组件

使用之前我们先把所需控件拖到设计界面，包括一个UpdatePanel控件、三个DropDownList控件、三个CascadingDropDown组件和一个Label控件，如下图所示。

 然后我们要设置所有的CascadingDropDown组件。打开属性窗口，设置CascadingDropDown的TargetControlID属性。CascadingDropDown1的TargetControlID设为DropDownList1，CascadingDropDown2的TargetControlID设为DropDownList2，CascadingDropDown3的TargetControlID设为DropDownList3，这样我们就可以把CascadingDropDown控件和所有的DropDownList控件关联起来了。

然后我们要到DropDownList控件的Extenders栏里设置相关属性，如下图所示：

DropDownList1关联的是Xml文件中的province节点，因此DropDownList1的Category属性要填写province。同时因为DropDownList1是最上级下拉菜单，因此它的ParentControlID为空。LoadingText属性故名思义就是当读取数据时下拉菜单显示的文字；PromptText显示的是下拉菜单初始选项的文字；ServiceMethod填写WebService中的数据调用函数名称；ServicePath填写WebService文件名。

DropDownList2的设置可以参照下图：

DropDownList3的设置参照DropDownList2的设置即可。

第三步：返回数据

到目前为止，所有设置已经完成了，我们只需要编写常规代码，取出所有数据即可。双击DropDownList3，编写如下代码：

 protected void DropDownList3_SelectedIndexChanged(object sender, EventArgs e)
    {
         Label1.Text = "gaga";
        string province = DropDownList1.SelectedItem.Text;
        string city = DropDownList2.SelectedItem.Text;
        string town = DropDownList3.SelectedItem.Text;

        if(String.IsNullOrEmpty(province))
            Label1.Text = "Please select a province";
        else if(String.IsNullOrEmpty(city))
             Label1.Text = "Please select a city";
          else if(String.IsNullOrEmpty(town))
             Label1.Text = "Please select a town";
          else
              Label1.Text = String.Format("you have chosen {0},{1},{2}",province,city,town);

    }

这样当我们选择完第三个下拉菜单之后，我们能在Label上看到我们所有的选择结果。注意：请将所有DropDownList的AutoPostBack属性设为True，否则将看不到效果。

运行，OK！

 结束：

本章主要介绍了怎样使用CascadingDropDown组件，大家可以举一反三，用数据库作为数据源。另外要注意的是AjaxControlToolkit所规定的签名格式是不可更改的，否则会返回Method error 500，大家要严格按照以上的例子编写。