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>

至此,大功告成。运行后效果如下:

选择:

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

作者:TerryLee
出处:http://terrylee.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
posted @ 2006-08-03 18:17 TerryLee 阅读(5742) 评论(40)  编辑 收藏 网摘 所属分类: [08]  Web开发

  回复  引用  查看    
#1楼 2006-08-03 18:22 | aspnetx      
终于又见楼主有更新了
期待更多优秀作品发布
呵呵,抢个沙发坐下来好好研究
  回复  引用  查看    
#2楼 [楼主]2006-08-03 18:25 | TerryLee      
@aspnetx
呵呵,现在基本是一天一篇
这些都是AtlasControlToolkit,要使用是很简单的。
  回复  引用  查看    
#3楼 2006-08-03 20:01 | aspnetx      
@TerryLee
楼主文章的特点就是我能看懂
真的
之前看别人写的就感觉木
配置那个配置这个的
不过还多谢楼主当初帮我入门,呵呵,还记得吗?
我当时有几个疑问都被你给很清晰的解答了
要知道在我们这样的环境(长春),能找个人请教一下真是太不容易了
  回复  引用  查看    
#4楼 2006-08-03 23:53 | Dflying Chen      
@aspnetx
我个人觉得这些文章都是偏于实际应用的。且和ASP.NET的编程模型完全一致,所以让你觉得比较容易懂。
待到后期介绍客户端的基本概念和组件,仍旧会觉得“麻木”的。
恕我冒昧……
  回复  引用  查看    
#5楼 2006-08-04 06:52 | aspnetx      
@Dflying Chen
不过已经习惯他的风格和思路了
相对来说再看后面就没那么"麻木"了
  回复  引用  查看    
#6楼 [楼主]2006-08-04 08:13 | TerryLee      
@Dflying Chen
Dflying 说的也对,这些都是控件的应用,且效果都很“炫”,所以学习起来可能轻松一些:-)

@aspnetx
这个系列基本上记录的是我学习Atlas的过程,我尽量保持这个风格吧:-)
  回复  引用  查看    
#7楼 2006-08-04 10:48 | 姜翊华      
我按照Demo写的为什么初始化的时候没有调用GetEmployees方法,这应该是什么问题呢,非常感谢。
  回复  引用  查看    
#8楼 [楼主]2006-08-04 11:00 | TerryLee      
@姜翊华
你说的GetEmployees方法没被调用,是不是在运行的时候第一个下拉列表为空呢?如果这样,先对Northwind.asmx做一下测试,确保它可以读出数据。
  回复  引用  查看    
#9楼 2006-08-04 13:03 | 姜翊华      
非常感谢您的回答,但是我是使用debug模式运行的,在GetEmployees方法的开始设置了端点,结果运行的时候端点没有停止,看起来的情况是画面初始化的时候没有自动提交去掉用GetEmployees方法,请您看看不提交应该是什么原因造成的呢,谢谢。
  回复  引用  查看    
#10楼 [楼主]2006-08-04 13:12 | TerryLee      
@姜翊华
是这样的,不是没有去掉用GetEmployees(),我觉得应该是调用GetEmployees()方法时出错了,这里如果出错是不会报任何错误的,只是下拉列表为空!

我的意思是你先在浏览器中测试一下GetEmployees()方法,看看有没有数据返回?
  回复  引用    
#11楼 2006-08-16 22:36 | 孤叶 [未注册用户]
我第一次用到ajax这种东东,就是用到这种级联菜单,想当初我们项目的城市县份下拉列表,是用弹出窗口来做的,我现在想起来都怕,一弹来,如果网速快的话,可能一下子就没了,如果网速慢,那个蜗牛呀。。。,如果客户设置了屏蔽掉弹出窗口,那后果。。,所以没有办法,后来我找到了AJAX这种东东,可是那时我不知有框架这种东东,就用一个xmlhttprequest和dhtml来完成,我所谓的AJAX,我晕,现在想来我那时有多弱痴,不过还好,为我学AJAX打下了点基础,现在看到ALTAS,才真真明白AJAX的强大
谢谢terryLee写的这么好的入门资料
  回复  引用    
#12楼 2006-08-23 12:01 | xyunsh [未注册用户]
我在使用CascadingDropDown中遇到一个问题,就是
如果Employee是根据参数返回部分结果该怎么编码呢?
就是这个参数该怎么传入
  回复  引用  查看    
#13楼 [楼主]2006-08-23 14:04 | TerryLee      
@xyunsh
Employee的参数从哪儿来?具体没考虑过
  回复  引用