.net3.5 和vs2008中Ajax控件的使用--CascadingDropDown(作级联下拉菜单)控件

一、属性

TargetControlID  指定要扩展的DropDownList的ID

Category  DropDownList表示的类别名称，在WebMethod中会用到

PromptText  没有选择时显示的文字

LoadingText  加载数据时显示的文字

ServicePath  获取数据的Web Service，为每个DropDownList都要指定

ServiceMethod  获取数据的Web Method

 ParentControlID  要扩展的DropDownList的父控件ID

SelectedValue  默认的选择项的值

二、使用实例

a、新建Ajax Web 窗体，并命名为CascadingDropDown.aspx

b、在窗体上拖放三个DropDownList控件，然后分别为刚建立的三个控件建立CascadingDropDown扩展程序

添加完扩展程序后，在源代码页面，我们可以看到如下代码：

c、我们这里使用xml文件来作为DropDownList显示的内容，新建一个xml文件取名为DropDownList.xml

 DropDownList.xml文件内容如下：

d、设置好数据源后，我们要新建一个web 服务来提取xml文件中相关内容，新建Web 服务，取名为Carservice.asmx。

ｅ、为CascadingDropDown.asmx添加方法来调用xml中的内容，代码如下：

 

<?xml version="1.0" encoding="utf-8" ?><CarsService>  <make name="Acura">    <model name="Integra">      <color name="Green" />      <color name="Sea Green" />      <color name="Pale Green" />    </model>    <model name="RL">      <color name="Red" />      <color name="Bright Red" />    </model>    <model name="TL">      <color name="Teal" />      <color name="Dark Teal" />    </model>  </make>  <make name="Audi" value="Audi (value)">    <model name="A4" value="A4 (value)">      <color name="Azure" value="Azure (value)" />      <color name="Light Azure" value="Light Azure (value)" />      <color name="Dark Azure" value="Dark Azure (value)" />    </model>    <model name="S4" value="S4 (value)">      <color name="Silver" value="Silver (value)" />      <color name="Metallic" value="Metallic (value)" />    </model>    <model name="A6" value="A6 (value)">      <color name="Cyan" value="Cyan (value)" />    </model>  </make>  <make name="BMW" value="BMW (value)">    <model name="3 series" value="3 series (value)">      <color name="Blue" value="Blue (value)" />      <color name="Sky Blue" value="Sky Blue (value)" />      <color name="Racing Blue" value="Racing Blue (value)" />    </model>    <model name="5 series" value="5 series (value)">      <color name="Yellow" value="Yellow (value)" />      <color name="Banana" value="Banana (value)" />    </model>    <model name="7 series" value="7 series (value)">      <color name="Brown" value="Brown (value)" />    </model>  </make></CarsService>

f、为三个CascadingDropDown控件添加相关的属性和方法，代码如下：

 <asp:DropDownList ID="DropDownList1" runat="server">    </asp:DropDownList>    <cc1:CascadingDropDown ID="DropDownList1_CascadingDropDown" runat="server"         Enabled="True" TargetControlID="DropDownList1" Category="Make"  PromptText="Please select a make"  LoadingText="[Loading makes...]"            ServicePath="Carservice.asmx" ServiceMethod="GetDropDownContents">    </cc1:CascadingDropDown>    <asp:DropDownList ID="DropDownList2" runat="server">    </asp:DropDownList>    <cc1:CascadingDropDown ID="DropDownList2_CascadingDropDown" runat="server"         Enabled="True" TargetControlID="DropDownList2"        Category="Model" PromptText="Please select a model" LoadingText="[Loading models...]"            ServiceMethod="GetDropDownContentsPageMethod" ParentControlID="DropDownList1">    </cc1:CascadingDropDown>    <asp:DropDownList ID="DropDownList3" runat="server">    </asp:DropDownList>       <cc1:CascadingDropDown ID="DropDownList3_CascadingDropDown" runat="server"         Enabled="True" TargetControlID="DropDownList3"        Category="Color" PromptText="Please select a color" LoadingText="[Loading colors...]"            ServicePath="Carservice.asmx" ServiceMethod="GetDropDownContents"            ParentControlID="DropDownList2">    </cc1:CascadingDropDown>

其中大家注意GetDropDownContentsPageMethod是写在CascadingDropDown.aspx的代码页面，而不是写在web　服务里面，代码如下：

Carservice.cs中方法代码如下：

public class CarService : System.Web.Services.WebService {    private static XmlDocument _document;    private static Regex _inputValidationRegex;    private static object _lock = new object();    // we make these public statics just so we can call them from externally for the    // page method call    public static XmlDocument Document    {        get        {            lock (_lock)            {                if (_document == null)                {                    // Read XML data from disk                    _document = new XmlDocument();                    _document.Load(HttpContext.Current.Server.MapPath("DropDownList.xml"));                }            }            return _document;        }    }    public static string[] Hierarchy    {        get { return new string[] { "make", "model" }; }    }    public static Regex InputValidationRegex    {        get        {            lock (_lock)            {                if (null == _inputValidationRegex)                {                    _inputValidationRegex = new Regex("^[0-9a-zA-Z //(//)]*___FCKpd___1quot;);                }            }            return _inputValidationRegex;        }    }    public CarService () {        //如果使用设计的组件，请取消注释以下行         //InitializeComponent();     }    [WebMethod]    public AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category)    {        // Get a dictionary of known category/value pairs        StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);        // Perform a simple query against the data document        return AjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocument(Document, Hierarchy, knownCategoryValuesDictionary, category, InputValidationRegex);    }    }

写在CascadingDropDown.aspx代码页面的代码如下：

public partial class CascadingDropDown:Page{    [WebMethod]    [System.Web.Script.Services.ScriptMethod]    public static CascadingDropDownNameValue[] GetDropDownContentsPageMethod(string knownCategoryValues, string category)    {        return new CarService().GetDropDownContents(knownCategoryValues, category);    }}

ｇ、效果如下：