Atlas学习手记(12):使用CascadingDropDown控件

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

 

主要内容

1CascadingDropDown控件介绍

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

 

一.CascadingDropDown控件介绍

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

<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

指定要扩展的DropDownListID

Category

DropDownList表示的类别名称,在WebMethod中会用到

PromptText

没有选择时显示的文字

LoadingText

加载数据时显示的文字

ServicePath

获取数据的Web Service,为每个DropDownList都要指定

ServiceMethod

获取数据的Web Method

ParentControlID

要扩展的DropDownList的父控件ID

SelectedValue

默认的选择项的值

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

下面用读取Northwind数据库中的EmplyeeOrderOrderDatail信息,看一个完整的示例。在新建一个Web Site后,先在页面的头部加上:

<%@ Register Assembly="AtlasControlToolkit" 

            Namespace
="AtlasControlToolkit" 

            TagPrefix
="atlasToolkit" 
%>

加入三个DropDownList,分别用来显示EmplyeeOrderOrderDatail

<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.asmxWeb 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如下:

完整代码

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

posted @ 2006-08-03 18:17  TerryLee  阅读(8668)  评论(39编辑  收藏  举报