Asp.net Ajax CascadingDropDown 控件的用法
- 2019 年 10 月 7 日
- 笔记
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]，这样就可以了。
上面的示例只是一个简单的测试例子，更复杂的应用需要访问数据库、处理复杂业务等，但控件本身的用法没有太大差别，希望你能够举一反三啊！
希望对你有所帮助，谢谢关注！
