• 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],这样就可以了。

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

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

    2021年9月 北京、西安两地,高薪诚聘 .NET工程师,请私信联系!
    如果认为此文对您有帮助,别忘了支持一下哦!
    声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论,与本人所在单位没有直接利益关系。转载时请在文章页面明显位置给出原文链接。
  • 相关阅读:
    Entity Framework 和NHibernate的区别
    Windows 2008 的TCP/IP原理
    Mono 2.0正式发布了
    自定义Unity对象生命周期管理集成ADO.NET Entity Framework
    Entity Framework(EF)数据查询
    WCF采用 netTcpBinding 发生的Socket errors
    ADO.NET 实体框架概述
    IronPython 2.0 beta 5
    用sp_change_users_login消除Sql Server的孤立用户
    微软修改了Managed Extensibility Framework(MEF)的协议
  • 原文地址:https://www.cnblogs.com/youring2/p/2106860.html
Copyright © 2020-2023  润新知