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如下：

完整代码
using 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 >

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

选择：

完整示例下载：http://www.cnblogs.com/Files/Terrylee/CascadingDropDownDemo.rar