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后，先在页面的头部加上：

<%@ Register Assembly="AtlasControlToolkit" 

            Namespace="AtlasControlToolkit" 

            TagPrefix="atlasToolkit" %>

加入三个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)

{

    string connectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;

    SqlConnection connection = new

        SqlConnection(connectionString);

    SqlCommand command = new SqlCommand("SELECT * FROM Employees");

    command.Connection = connection;

    connection.Open();

    SqlDataAdapter adapter = new SqlDataAdapter(command);

    DataSet dataSet = new DataSet();

    adapter.Fill(dataSet);

    command.Connection.Close();

    DataTable tbl = dataSet.Tables[0];

    List<CascadingDropDownNameValue> values =

        new List<CascadingDropDownNameValue>();

    foreach (DataRow dr in tbl.Rows)

    {

        string sEmployee = (string)dr["FirstName"] + " " +

            dr["LastName"];

        int iEmployee = (int)dr["EmployeeID"];

        values.Add(new CascadingDropDownNameValue(

          sEmployee, iEmployee.ToString()));

    }

    return values.ToArray();

}

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

整个完整后的Web Service如下：

完整代码 System;

using System.Web;

using System.Collections;

using System.Configuration;

using System.Collections.Generic;

using System.Collections.Specialized;

using System.Web.Services;

using System.Web.Services.Protocols;

using AtlasControlToolkit;

using System.Data;

using System.Data.SqlClient;

 

/// <summary>

/// Summary description for Northwind

/// </summary>

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

public class Northwind : System.Web.Services.WebService {

 

    public Northwind () {

 

        //Uncomment the following line if using designed components 

        //InitializeComponent(); 

    }

 

    [WebMethod]

    public CascadingDropDownNameValue[] GetEmployees(

        string knownCategoryValues, string category)

    {

        string connectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;

        SqlConnection connection = new

            SqlConnection(connectionString);

 

        SqlCommand command = new SqlCommand("SELECT * FROM Employees");

 

        command.Connection = connection;

        connection.Open();

 

        SqlDataAdapter adapter = new SqlDataAdapter(command);

        DataSet dataSet = new DataSet();

 

        adapter.Fill(dataSet);

        command.Connection.Close();

 

        DataTable tbl = dataSet.Tables[0];

 

        List<CascadingDropDownNameValue> values =

            new List<CascadingDropDownNameValue>();

        foreach (DataRow dr in tbl.Rows)

        {

            string sEmployee = (string)dr["FirstName"] + " " +

                dr["LastName"];

            int iEmployee = (int)dr["EmployeeID"];

            values.Add(new CascadingDropDownNameValue(

              sEmployee, iEmployee.ToString()));

        }

        return values.ToArray();

    }

 

    [WebMethod]

    public CascadingDropDownNameValue[] GetOrdersByEmployee(

      string knownCategoryValues,

      string category)

    {

        StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

        int iEmployee;

        if (!kv.ContainsKey("Employee") || !Int32.TryParse(kv["Employee"], out iEmployee))

        {

            return null;

        }

 

        string connectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;

        SqlConnection connection = new

            SqlConnection(connectionString);

 

        SqlCommand command =

        new SqlCommand("SELECT OrderID FROM Orders WHERE EmployeeID = " + iEmployee);

 

        command.Connection = connection;

        connection.Open();

 

        SqlDataAdapter adapter = new SqlDataAdapter(command);

        DataSet dataSet = new DataSet();

 

        adapter.Fill(dataSet);

        command.Connection.Close();

 

        DataTable tbl = dataSet.Tables[0];

 

        List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();

        foreach (DataRow dr in tbl.Rows)

        {

            string sOrder = dr["OrderID"].ToString();

            int iOrder = (int)dr["OrderID"];

            values.Add(new CascadingDropDownNameValue(

              sOrder, iOrder.ToString()));

        }

        return values.ToArray();

    }

 

    [WebMethod]

    public CascadingDropDownNameValue[] GetDetailsByOrder(

      string knownCategoryValues,

      string category)

    {

        StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

        int iOrder;

        if (!kv.ContainsKey("Order") || !Int32.TryParse(kv["Order"], out iOrder))

        {

            return null;

        }

 

        string connectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;

        SqlConnection connection = new

            SqlConnection(connectionString);

 

        SqlCommand command =

        new SqlCommand("SELECT UnitPrice,OrderID FROM [Order Details] WHERE OrderID = " + iOrder);

 

        command.Connection = connection;

        connection.Open();

 

        SqlDataAdapter adapter = new SqlDataAdapter(command);

        DataSet dataSet = new DataSet();

 

        adapter.Fill(dataSet);

        command.Connection.Close();

 

        DataTable tbl = dataSet.Tables[0];

 

        List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();

        foreach (DataRow dr in tbl.Rows)

        {

            string UnitPrice = dr["UnitPrice"].ToString();

            int intOrder = (int)dr["OrderID"];

            values.Add(new CascadingDropDownNameValue(

              UnitPrice, intOrder.ToString()));

        }

        return values.ToArray();

    }   

}

在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>

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

选择：

完整示例下载