Asp.net Ajax CascadingDropDown 控件的用法

简介:

CascadingDropDown 控件提供了级联下拉列表显示的功能。在一些特定的业务环境下,我们希望下拉列表会根据页面中的另外一个控件(TextBox、CheckBox或DropDownList)的值而显示不同的列表项,最常见的就是在进行区域选择时,当选择了省级为“北京”时,我们希望在DropDownList中的列表项为“朝阳”、“海淀”、“东城”、“西城”等属于北京市的下级区域。如上所说,对于存在包含关系的下拉列表选择中,CascadingDropDown控件将会非常有用。

  要是用CascadingDropDown 控件,首要现在页面上放置一个DropDownList控件,并将CascadingDropDown控件的TargetControlID设置为DropDownList控件。下面是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"
SelectedValue
="SomeValue"/>
复制代码
  • TargetControlID:目标控件的ID
  • Category:所属分类名称,在下级列表中,会作为参数的一部分传递给Webservice的方法,用来确定需要返回给下级列表什么样的数据。
  • PromptText:在没有选择时显示的内容
  • LoadingText:在进行数据加载时显示的内容
  • ServicePath:提供数据的WebService的路径
  • ServiceMethod:WebService的方法
  • ParentControlID:上一级(父级)列表的ID
  • SelectedValue:默认选中的数据

我们来添加一个示例,首先在页面放置三个DropDownList,分别用来选择省、市、区,代码如下:

复制代码
<table>
<tr>
<td>

</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server" Width="170"/>
</td>
</tr>
<tr>
<td>

</td>
<td>
<asp:DropDownList ID="DropDownList2" runat="server" Width="170"/>
</td>
</tr>
<tr>
<td>

</td>
<td>
<asp:DropDownList ID="DropDownList3" runat="server" Width="170"/>
</td>
</tr>
</table>
复制代码

然后,为这三个DropDownList分别添加CascadingDropDown 控件,代码如下:

复制代码
<ajaxToolkit:CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID="DropDownList1"
Category
="省" PromptText="请选择一个省" LoadingText="正在加载省……" ServicePath="/WebService/CascadingDropDownService.asmx"
ServiceMethod
="GetDropDownContents"/>
<ajaxToolkit:CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID="DropDownList2"
Category
="市" PromptText="请选择一个市" LoadingText="正在加载市……" ServicePath="/WebService/CascadingDropDownService.asmx"
ServiceMethod
="GetDropDownContents" ParentControlID="DropDownList1"/>
<ajaxToolkit:CascadingDropDown ID="CascadingDropDown3" runat="server" TargetControlID="DropDownList3"
Category
="区" PromptText="请选择一个区" LoadingText="正在加载区……" ServicePath="/WebService/CascadingDropDownService.asmx"
ServiceMethod
="GetDropDownContents" ParentControlID="DropDownList2"/>
复制代码

  可以看出,这段代码三个CascadingDropDown控件中的ServicePath和ServiceMethod是相同的,我们只需要在方法GetDropDownContents中添加适当的分支处理就可以了,CascadingDropDownService的GetDropDownContents方法的代码如下:

复制代码
        [System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category)
{
CascadingDropDownNameValue[] result =null;
StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
switch (category)
{
case"":
{
result =new CascadingDropDownNameValue[] { new CascadingDropDownNameValue("河南", "hn"), new CascadingDropDownNameValue("山西", "sx")};
}
break;
case"":
{
switch (knownCategoryValuesDictionary[""])
{
case"hn":
{
result =new CascadingDropDownNameValue[] { new CascadingDropDownNameValue("洛阳", "ly"), new CascadingDropDownNameValue("南阳", "ny") };
}
break;
case"sx":
{
result =new CascadingDropDownNameValue[] { new CascadingDropDownNameValue("太原", "ty"), new CascadingDropDownNameValue("吕梁", "ll") };
}
break;
}
}
break;
case"":
{
switch (knownCategoryValuesDictionary[""])
{
case"ly":
{
result =new CascadingDropDownNameValue[] { new CascadingDropDownNameValue("西工区", "xg"), new CascadingDropDownNameValue("涧西区", "jx") };
}
break;
case"ny":
{
result =new CascadingDropDownNameValue[] { new CascadingDropDownNameValue("卧龙区", "wl")};
}
break;
case"ty":
{
result =new CascadingDropDownNameValue[] { new CascadingDropDownNameValue("迎泽区", "yz"), new CascadingDropDownNameValue("杏花岭区", "xhl") };
}
break;
case"ll":
{
result =new CascadingDropDownNameValue[] { new CascadingDropDownNameValue("离石区", "ls")};
}
break;
}
}
break;
}

return result;
}
复制代码

这个WebService要允许通过JS调用,所以要在Service的头部添加[System.Web.Script.Services.ScriptService],这样就可以了。

上面的示例只是一个简单的测试例子,更复杂的应用需要访问数据库、处理复杂业务等,但控件本身的用法没有太大差别,希望你能够举一反三啊!

希望对你有所帮助,谢谢关注!




本文转自齐师傅博客园博客,原文链接:http://www.cnblogs.com/youring2/archive/2011/07/14/2106860.html,如需转载请自行联系原作者

相关文章
|
6月前
|
存储 开发框架 NoSQL
ASP.NET WEB——项目中Cookie与Session的用法
ASP.NET WEB——项目中Cookie与Session的用法
88 0
|
3月前
|
开发框架 JavaScript 前端开发
震撼!破解 ASP.NET 服务器控件 Button 执行顺序之谜,颠覆你的开发认知!
【8月更文挑战第16天】在ASP.NET开发中,通过Button控件实现先执行JavaScript再触后台处理的需求十分常见。例如,在用户点击按钮前需前端验证或提示,确保操作无误后再传递数据至后台深度处理。此过程可通过设置Button的`OnClientClick`属性调用自定义JavaScript函数完成验证;若验证通过,则继续触发后台事件。此外,结合jQuery也能达到相同效果,利用`__doPostBack`手动触发服务器端事件。这种方式增强了应用的交互性和用户体验。
44 8
|
15天前
|
开发者 Windows
.NET 开源扁平化、美观的 C/S 控件库
【10月更文挑战第23天】介绍了三款适用于 .NET 平台的开源扁平化、美观的 C/S 控件库:MaterialSkin 采用 Google Material Design 风格,适合现代感界面;Krypton Toolkit 提供丰富控件,界面易于定制;Fluent Ribbon Control Suite 模仿 Office 界面,适合复杂功能应用。每款控件库均附有示例代码及 GitHub 链接。
winform .net6 和 framework 的图表控件,为啥项目中不存在chart控件,该如何解决?
本文讨论了在基于.NET 6和.NET Framework的WinForms项目中添加图表控件的不同方法。由于.NET 6的WinForms项目默认不包含Chart控件,可以通过NuGet包管理器安装如ScottPlot等图表插件。而对于基于.NET Framework的WinForms项目,Chart控件是默认存在的,也可以通过NuGet安装额外的图表插件,例如LiveCharts。文中提供了通过NuGet添加图表控件的步骤和截图说明。
winform .net6 和 framework 的图表控件,为啥项目中不存在chart控件,该如何解决?
|
22天前
|
C# Android开发 iOS开发
一组.NET MAUI绘制的开源控件 - AlohaKit
一组.NET MAUI绘制的开源控件 - AlohaKit
|
6月前
|
开发框架 前端开发 JavaScript
ASP.NET AJAX使用方法概述(三)
ASP.NET AJAX使用方法概述(三)
47 1
|
2月前
|
开发框架 JavaScript 前端开发
|
3月前
|
开发框架 前端开发 .NET
闲话 ASP.NET Core 数据校验(二):FluentValidation 基本用法
闲话 ASP.NET Core 数据校验(二):FluentValidation 基本用法
|
5月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
89 2
|
6月前
|
开发框架 缓存 前端开发
安装ASP.NET AJAX (一安装)
安装ASP.NET AJAX (一安装)
86 0