AjaxToolKit--CascadingDropDown(无刷新级联筛选)的介绍

?

?

?

1.?????? Introduction:

Cascading DropDown是AjaxToolKit的一个使用Web Service实现级联刷新的控件。当然和传统的dropdownList的区别就是不用刷新可以实现级联筛选。这个控件使用Web Service从服务器端的xml文件或者是数据库中取数据。

?? cascadingDropDown还有一个功能是可以设置它由哪个cascadingDropDown控件来控制它,也就是它的父级,只有当它的父级发生变化时,它才会变化。所以如果你需要实现一个5级筛选就得用到5个cascadingDropDown控件。

?? 在下面我们会提供两个例子分别是从xml取数据和从数据库取数据。微软提供的是从xml文件取数据,后面我们比较详细的介绍一下从数据库取数据的例子。

2.?????? Properties:

CascadingDropDown控件的属性如下,其中斜体为可选属性:

<ajaxToolkit:CascadingDropDown ID="CDD1" runat="server"

??? TargetControlID="DropDownList2"

??? Category="Model"

? ??PromptText="Please select a model"

??? LoadingText="[Loading models...]"

??? ServicePath="CarsService.asmx"

??? ServiceMethod="GetDropDownContents"

??? ParentControlID="DropDownList1"

1. TargetControlID: 被控制的dropdownList的ID.
2. Category: DropDownList所属分类的名称,其实就是每个dropdown前面显示的那个字符串。
3. PromptText: dropdownlist未选择数据前显示的字符串,用来提示用户。
4. EmptyText - 当从 Web Service 中获得数据为空的时候 DropDownList 显示的信息，可选
5. EmptyValue - 对应当数据项为空的时候 DropDownList 中显示 EmptyText 的信息的 Value，这里指的是 DropDownList 中一个 ListItem 中的 Value 值，可选
6. LoadingText - 当 CascadingDropDown 在和 Web Service 进行数据通信的时候显示的信息
7. ServicePath - 对应的获得数据的 Web Service 路径，如果对应的 Web Service 方法为当前页的 Web Service 方法时，需要将其指定为空
8. ServiceMethod - 对应的获得 Web Service 方法名，它需要指定为如下的函数签名:

你可以替换上面示例中的方法名称，GetDropDownContents 为任何你想要的方法名，但是返回值和参数列表需要保持完全一致。

1. ContextKey - 一个可用于传入 Web Service 方法的参数，该参数将用于 Web Service 根据客户端的不同操作产生相应的不同的返回结果，当采用 ContextKey 的时候，这个方法的函数签名如下表示：

你可以替换上面示例中的方法名称，GetDropDownContents 为任何你想要的方法名，但是返回值和参数列表需要保持完全一致。

1. UseContextKey - 指定是否采用 ContextKey，当函数签名采用了带有 ContextKey 的函数签名时，这个属性将被自动设置为 True
2. ParentControlID - 上一级 DropDownList 控件的 ID，当其没有上一级 DropDownList 的时候，该属性被设置为空，例如上面例子中的 “区域”
3. SelectedValue - 默认的初始化选中值的 Value，这里指的是 DropDownList 中 ListItem 的 Value 值

3.?????? Example:

首先说明一下,这里提供的例子将会是使用VS2005和SQL Server 2005(8)。

先看一下微软提供的那个web service提供方法从xml文件取数据的例子。

第一步: 创建一个ajaxtoolkit模板:

?

起个项目名字叫做AjaxControlToolKit_CascadingDropDown_XML。

第二步:向default.aspx文件中添加一个div用来显示例子的名字。然后拖入一个table,设置为三行两列,第一列显示一个字符串,第二列是dropdownlist。

?? 然后从ajax Tool Kit的控件中放入三个CascadingDropDown控件。然后再给页面拖入一个UpdatePanel,在这个Panel种拖入一个Label,ID为Label1,设计页面如下图：

arExtender,属性设置如下:

?

CascadingDropDown控件的属性设置如下:

?

你应该注意到了ServicePath的设定,

你应该注意到了ServicePath的设定,而且有个问题是为什么CascadingDropDwon2没有设置ServicePath？？？别急,一会再看这个问题。

下一步我们就需要添加CarsService.asmx这个web Service文件,右键项目,然后点击添加新项:

?

选择web Service文件,然后命名为CarsService.asmx。前面说过我们这个例子的web Service方法将会读取xml数据,所以我们还需要在App_Data文件夹下创建一个xml文件名字为CarsService.xml。如下图:

?

Web Service的代码和xml文件的数据在源代码中。这里不很详细的贴出来了。微软提供的读取xml文件的方法相当厉害,你如果还不会XMLDucoment操作和正则表达式,希望你在看这个webService方法前先去学习下这两方面的知识。

Web Service的方法主要是通过对已经读取一个xml文件,然后去设置好三个属性为GetDropdownContent方法提供参数,大致如下所示:

?

另外上面提到的那个问题:为什么cascadingdropdown2为什么没有servicepath??是因为它调用的webservice在default.aspx文件的代码文件中,default.aspx.cs,

?? [WebMethod]

??? [System.Web.Script.Services.ScriptMethod]

??? public static CascadingDropDownNameValue[] GetDropDownContentsPageMethod(string knownCategoryValues,string category)

??? {

??????? return new CarsService().GetDropDownContents(knownCategoryValues,category);

}

它也是去调用了GetDropDownContents的方法。

?

?

剩下一部分就是如何让label的内容来显示所有dropdownlist的当前选项。通过第三个dropdownlist的selectedindxChanged事件来实现。

?

?

上面这里例子如果运行的时候报错,关于安全问题的,需要在<% page里加个东西,你可以在文章最后提供的下载链接里下载下来看加什么。

?

第二个例子是Web Service从数据库取数据来给dropdownlist绑定。

第一步: 创建一个ajaxtoolkit模板:

?

起个项目名字叫做AjaxControlToolKit_CascadingDropDown_DB。

第二步:因为使用的是SQL2005(8)还有VS2005(8),所以这里的方式不再是传统的使用sql连接类实现，而是通过下面的方式实现:

1. 右键App_Data,然后选择添加新项,选择添加SQL Database改名字为SampleData.mdf,然后点击添加。现在你可以通过VS的左侧工具栏去添加两个新表如下图:

????

1. 创建一个访问Cars表和CarModels表的数据集。

右键点击App_Code,在对话框中选择DataSet，并命名为dsCars,xsd。

?

当你创建好这个DataSet的时候,会弹出来一个TableAdaoter Configuration Wizard向导,然后根据提示配置好。

1. 配置数据集:

先选择SampleData.mdf,然后点击下一步:

?

然后你会被询问到是否需要添加SampleDataConnectionString到Web.config文件中,选择是,点击下一步:

?

接下来的页面选择选择’Use SQL Statements’点击下一步.,会进入Enter a SQL Statement页面,然后输入下面的sql 查询,点击下一步：

?

然后在’Choose Methods to Generate’页面,反选中Fill a DataTable,并且在Mothed name后面输入GetAllCars.如下图:

?

然后点击保存就创建了一个数据集。

同样的方法创建一个DataSet叫做GetModelsByCarId.截图如下:

?

?

?

第三步是创建一个Web Service,

内容大致如下:

??? //web方法可以通过给出的carId得到所有的model.

??

??? //参数是knownCategoryValues就是上面那个父级的dropdown的当前值的集合

??? // 输出一个字符串数组,即当前的carId下的所有model。

??? [WebMethod]

??? public CascadingDropDownNameValue[] GetModelsByCarId(string knownCategoryValues,

??????? string category)

??? {

????? //对于已经第一个dropdownlist,值得形式应该是undefined和下拉列表元素的id.

??? ??// 例如: "undefined: 13;"

??? ??// 也就是说处于index1位置的是我们需要的carId.

??????? string[] _categoryValues = knownCategoryValues.Split(':',';');

??????? // 把index1得元素转化为整数

??????? int _carID = Convert.ToInt32(_categoryValues[1]);

??????? //创建一个 CascadingDropDownNameValue 的List来存放CarModels数据。

??????? List<CascadingDropDownNameValue> _carModels = new List<CascadingDropDownNameValue>();

??????? // 创建CarModels TableAdapter的一个实体

??????? dsCarModelsTableAdapters.CarModelsTableAdapter _carModelAdapter = new dsCarModelsTableAdapters.CarModelsTableAdapter();

??????? // 添加modelName到List

??????? foreach (DataRow _row in _carModelAdapter.GetModelsByCarId(_carID))

??????? {

??????????? _carModels.Add(new CascadingDropDownNameValue(_row["ModelName"].ToString(),_row["ModelId"].ToString()));

??????? }

??????? //转化为字符组并返回值

??????? return _carModels.ToArray();

再给出aspx文件:

<asp:ScriptManager ID="ScriptManager1" runat="server" />

??????? <div>

??????? <%--Dropdown来显示汽车--%>

??????? Car:<asp:DropDownList ID="ddlCars" runat="server" DataSourceID="ods_Cars" DataTextField="CarName" DataValueField="CarId">

??????????? </asp:DropDownList><asp:ObjectDataSource ID="ods_Cars" runat="server" OldValuesParameterFormatString="original_{0}"

??????????? SelectMethod="GetAllCars" TypeName="dsCarsTableAdapters.CarsTableAdapter"></asp:ObjectDataSource>

??????????? <br /><br />

??????? <%--显示被选中的汽车的models--%>

??????? Model:<asp:DropDownList ID="ddlCarModels" runat="server">

??????????? </asp:DropDownList><br /><br />

??????? <%--ASP.NET AJAX CascadingDropDown--%>

??????? <ajaxToolkit:CascadingDropDown ID="CascadingDropDown1" runat="server" Category="Cars" LoadingText="Please wait..." ParentControlID="ddlCars"

???????? PromptText="Select a model" TargetControlID="ddlCarModels" ServicePath="CarsService.asmx" ServiceMethod="GetModelsByCarId" />

??????? </div>

需要注意的是这里已经在设计页面对car进行了数据绑定。注意CascadingDropDown的设置.

?

3.Css Style:

.demoarea {

?????? padding:20px;

?????? background:#FFF url(images/demotop.png) no-repeat left top;

}

?

.demoarea p

{

?????? padding:5px;

}

?

.demoheading {

?????? padding-bottom:20px;

?????? color:#5377A9;

?????? font-family:Arial, Sans-Serif;

?????? font-weight:bold;

?????? font-size:1.5em;

}

?

.demobottom {

?????? height:8px;

?????? background:#FFF url(images/demobottom.png) no-repeat left bottom;

}

?

4.Layout和代码:

http://download.csdn.net/source/1423164

?