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

}

}

ｇ、效果如下：