Atlas学习手记（12）：使用CascadingDropDown控件

CascadingDropDown通常叫作级联下拉菜单，本文将通过读取Northwind数据库中的Emplyee、Order、OrderDatail信息作为示例，来展示一下它的使用。

 

主要内容

1．CascadingDropDown控件介绍

2．从数据库读取数据并填充CascadingDropDown

 

一．CascadingDropDown控件介绍

CascadingDropDown通常叫作级联下拉菜单，本文将通过读取Northwind数据库中的Emplyee、Order、OrderDatail信息作为示例，来展示一下它的使用。示例代码如下：

<atlasToolkit:CascadingDropDown ID="CDD1" runat="server">

    

    <atlasToolkit:CascadingDropDownProperties

        TargetControlID="DropDownList2"

        Category="Model"

        PromptText="Please select a model"

        LoadingText="[Loading models]"

        ServicePath="CarsService.asmx"

        ServiceMethod="GetDropDownContents"

        ParentControlID="DropDownList1"

        SelectedValue="SomeValue">

    </atlasToolkit:CascadingDropDownProperties>

    

</atlasToolkit:CascadingDropDown>

对于CascadingDropDown需要为它添加CascadingDropDownProperties，有多少个下拉列表，就添加几个CascadingDropDownProperties，主要属性如下：

属性	说明
TargetControlID	指定要扩展的DropDownList的ID
Category	DropDownList表示的类别名称，在WebMethod中会用到
PromptText	没有选择时显示的文字
LoadingText	加载数据时显示的文字
ServicePath	获取数据的Web Service，为每个DropDownList都要指定
ServiceMethod	获取数据的Web Method
ParentControlID	要扩展的DropDownList的父控件ID
SelectedValue	默认的选择项的值

二．从数据库读取数据并填充CascadingDropDown

下面用读取Northwind数据库中的Emplyee、Order、OrderDatail信息，看一个完整的示例。在新建一个Web Site后，先在页面的头部加上：

%>

加入三个DropDownList，分别用来显示Emplyee，Order，OrderDatail：

<div>

    <h3>

        Employee:

        <asp:DropDownList ID="ddlEmployees" runat="server" /><br /><br />

         &nbsp;&nbsp;Order:

        <asp:DropDownList ID="ddlOrders" runat="server" /><br /><br />

         &nbsp;&nbsp;Detail:

        <asp:DropDownList ID="ddlOrderDetails" runat="server" />

    </h3>

</div>

下面我们添加一个Northwind.asmx的Web Service，编写相关的Web Method：

[WebMethod]

public CascadingDropDownNameValue[] GetEmployees(

    string knownCategoryValues, string category)

}

注意Web Method的参数签名是不可以改变的，并且它最后返回的是名-值对这种形式的数组。

整个完整后的Web Service如下：

}

在Web.config中设置连接信息：

<connectionStrings>

    <add name="ConnectionString" connectionString="Data Source=RJ-097;User ID=sa;Password=sa;Initial Catalog=Northwind" providerName="System.Data.SqlClient"/>

</connectionStrings>

这时我们再添加CascadingDropDown控件，设置它的属性如下：

<atlasToolkit:CascadingDropDown ID="CascadingDropDown1" runat="server">

    <atlasToolkit:CascadingDropDownProperties Category="Employee" ParentControlID=""

        PromptText="Select Employee" SelectedValue="" ServiceMethod="GetEmployees" ServicePath="Northwind.asmx"

        TargetControlID="ddlEmployees" />

    <atlasToolkit:CascadingDropDownProperties Category="Order" ParentControlID="ddlEmployees"

        PromptText="Select Order" SelectedValue="" ServiceMethod="GetOrdersByEmployee"

        ServicePath="Northwind.asmx" TargetControlID="ddlOrders" />

    <atlasToolkit:CascadingDropDownProperties Category="OrderDetail" ParentControlID="ddlOrders"

        PromptText="Select OrderDetail" SelectedValue="" ServiceMethod="GetDetailsByOrder"

        ServicePath="Northwind.asmx" TargetControlID="ddlOrderDetails" />

</atlasToolkit:CascadingDropDown>

至此，大功告成。运行后效果如下：

选择：

完整示例下载：https://files.cnblogs.com/Terrylee/CascadingDropDownDemo.rar