前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Asp.net Ajax CascadingDropDown 控件的用法

Asp.net Ajax CascadingDropDown 控件的用法

作者头像
拓荒者-NET
发布2019-09-25 20:42:15
1.8K0
发布2019-09-25 20:42:15
举报
文章被收录于专栏:.Net Core技术分享

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

  要是用CascadingDropDown 控件,首要现在页面上放置一个DropDownList控件,并将CascadingDropDown控件的TargetControlID设置为DropDownList控件。下面是CascadingDropDown的使用代码:

代码语言:javascript
复制
<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,分别用来选择省、市、区,代码如下:

代码语言:javascript
复制
<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 控件,代码如下:

代码语言:javascript
复制
<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方法的代码如下:

代码语言:javascript
复制
        [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],这样就可以了。

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2011-07-14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档