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 阅读(6232) 评论(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的参数从哪儿来?具体没考虑过

  回复  引用    
#14楼2006-08-23 14:55 | xyunsh[未注册用户]
譬如是Request.QueryString
  回复  引用    
#15楼2006-08-29 16:14 | fangyifeng[未注册用户]
好像webservice的第二个参数一直都用,请问他的作用是什么呢?
  回复  引用    
#16楼2006-08-29 16:30 | fangyifeng[未注册用户]
还有问题请教:
就是 List<CascadingDropDownNameValue> 类似这种写法是什么意思? 我以前都还没用过这种写法!
谢谢

  回复  引用  查看    
#17楼[楼主]2006-08-29 16:58 | TerryLee      
@fangyifeng
第二个参数是指得类别,比如Employee等

List<CascadingDropDownNameValue> 是泛型

  回复  引用    
#18楼2006-09-19 15:14 | 太阳[匿名][未注册用户]
大哥,我用你的例子,selecteditem.text显示是value的值啊,请问是怎么回事?
  回复  引用  查看    
#19楼[楼主]2006-09-19 15:51 | TerryLee      
@太阳[匿名]
看一下你的WebService,对不对?

  回复  引用  查看    
#20楼[楼主]2006-09-19 19:55 | TerryLee      
@太阳[匿名]
请下载最新版本
“Modified CascadingDropDown to populate DropDownList.SelectedItem.Text so that both text and value can be accessed ”

  回复  引用    
#21楼2006-09-20 13:40 | Yoka[未注册用户]
最新的版本好像也不对,TerryLee ,你有类似的代码吗,我想看看
  回复  引用    
#22楼2006-09-25 21:53 | gglive[未注册用户]
问下web service中的方法需要参数,在
ServiceMethod="GetEmployees" ServicePath="Northwind.asmx"
里怎么传入参数的


  回复  引用  查看    
#23楼[楼主]2006-09-26 08:37 | TerryLee      
@gglive
Atlas会自己传入参数

  回复  引用    
#24楼2006-09-26 16:15 | gglive[未注册用户]
我想自定义参数怎么办?
  回复  引用    
#25楼2007-01-17 00:32 | snyod[未注册用户]
代表党(.NET平台)感谢您.
全部收藏.........

  回复  引用  查看    
#26楼2007-02-12 20:07 | 吴杰      
"Category  DropDownList表示的类别名称,在WebMethod中会用到"
是在哪里用啊,怎么我的老是出错,也不知道为什么,第一个可以正常显示,但每二个就不行了(没反应),为什么啊

  回复  引用  查看    
#27楼2007-02-12 20:10 | 吴杰      
Category的值问题, 我把它的值改一下就可以了,但有的不管怎么改就是有错误.Category的值跟什么有关系,能讲一下吗?我的邮箱wufujie2000@gmail.com,这个问题困扰我几天了,非常感谢.
  回复  引用  查看    
#28楼2007-03-16 15:24 | 胡敏      
PromptText指没有选择时显示的文字,
而我把这个属性不设置,为什么DropDownList变成不可修改状态了?有第一个数据。

  回复  引用  查看    
#29楼2007-04-08 15:27 | 吴杰      
我做了二个一样的功能的CascadingDropDown,第二个基本上就是跟第一个一模一样,只是调用的数据表不同,第一个能正常显示,但第二就就是不能正常显示,只能显示第一个下拉列表,这是为什么呢?能帮下我吗?
  回复  引用    
#30楼2007-04-28 17:00 | HBChan[未注册用户]
经过几次修改,终于达到自己想要的效果,谢谢啦`
  回复  引用  查看    
#31楼2007-05-10 10:13 | 孤叶(学习.net框架)      
@HBChan
你的数据是多数据库中动态获取的吗
为什么我按楼主说的那样去做,总提供webmethod error 500

  回复  引用    
#32楼2007-06-13 05:09 | victor[未注册用户]
if (!kv.ContainsKey("Order") || !Int32.TryParse(kv["Order"], out iOrder))
请问一下这个out iorder什么意思?iorder的值怎么获得??

  回复  引用  查看    
#33楼2007-07-09 16:57 | 林_枫      
@孤叶(学习.net框架)
你的WebService应该是没有标记ScriptMethod 刚开始我也遇到这样的e错误

  回复  引用    
#34楼2007-11-12 10:36 | lufinal[未注册用户]
博主你好.
我是新手,请问下.我在添加你的代码后报这种错误是什么原因啊?

cascadingDropDown不具有名为:cascadingDropDownProperties的公共属性

是不是还有一个cascadingDropDownProperties的控件啊?我在我添加的AtlasControlToolkit中没有看到有这个控件啊...

能帮忙解释下吗?

  回复  引用    
#35楼2008-01-13 23:19 | dreamsfeng[未注册用户]
如果使用Ajax control ToolKit的级联下拉控件时,我想预先设置选定数据,应该如何搞?
比如我打开页面时选定Employee的第三项,Orders的第四项,那应该如何做?

  回复  引用    
#36楼2008-01-24 13:49 | zdz[未注册用户]
同样的问题,我想预先设置选定数据,应该如何搞?
  回复  引用    
#37楼2008-02-27 11:54 | hjh[未注册用户]
请问一下怎样为Employee,Order Detail设置默认值?
  回复  引用    
#38楼2008-03-02 20:26 | lengxue1110[未注册用户]
现在关于dropdownlist不是可以直接绑定吗
用objectDataSource来得到值,然后直接绑定,效果和这个一样而且也比较简单,为什么要用这个啊,是不是这个有特别之处啊

  回复  引用  查看    
#39楼2008-04-06 13:48 | stewen      
有没有Ajax版本的啊?



发表评论

昵称: [登录] [注册]

主页:

邮箱:(仅博主可见)

评论内容:

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 466989




相关文章:

相关链接: