.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);

    }

}

ｇ、效果如下：