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

最新推荐文章于 2022-02-08 16:48:10 发布

dujingjing1230

最新推荐文章于 2022-02-08 16:48:10 发布

阅读量3.5k

点赞数

分类专栏： AJAX Control ToolKit AJAX 文章标签： service dropdown string dataset webservice web

本文链接：https://blog.csdn.net/dujingjing1230/article/details/4284271

版权

AJAX 同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

AJAX Control ToolKit

22 篇文章 0 订阅

订阅专栏

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"

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

[System.Web.Services.WebMethod]

[System.Web.Script.Services.ScriptMethod]

public CascadingDropDownNameValue[]

GetDropDownContents(

string knownCategoryValues,

string category) { ... }

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

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

[System.Web.Services.WebMethod]

[System.Web.Script.Services.ScriptMethod]

public CascadingDropDownNameValue[]

GetDropDownContents(

string knownCategoryValues, string category,

string contextKey) { ... }

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

UseContextKey - 指定是否采用 ContextKey，当函数签名采用了带有 ContextKey 的函数签名时，这个属性将被自动设置为 True
ParentControlID - 上一级 DropDownList 控件的 ID，当其没有上一级 DropDownList 的时候，该属性被设置为空，例如上面例子中的 “区域”
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连接类实现，而是通过下面的方式实现:

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

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

右键点击App_Code,然后选择添加新项,在对话框中选择DataSet，并命名为dsCars,xsd。

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

配置数据集:

先选择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>

<%--显示被选中的汽车的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

dujingjing1230

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录