.Net源码论坛 [ 繁体中文 ]

发新话题 回复该主题

轻松掌握Ajax.net系列教程三:使用CascadingDropDown组件 [复制链接]

楼主
这次我们学习使用AjaxControlToolkit中的CascadingDropDown组件。CascadingDropDown主要是控制数个普通的DropDownList控件,并使它们产生无刷新的级联效果。最常见的用法例如选择地理位置,我们要先选取国家,才能进一步选取所选国家的省份,然后才是城市如此类推。学会CascadingDropDown组件将会大大简化我们开发无刷新级联下拉菜单的流程。 第一步:建立Xml文件和WebService 为了方便我们使用了Xml作为数据源,大家可以参照以下文件格式建立Xml文件。 要使用CascadingDropDown,我们需要建立WebService作为数据传输的载体,因此我们先添加一个WebService并命名为CityService.asmx。 进入CityService.cs文件后我们首先要加上[System.Web.Script.Services.ScriptService()]属性,目的是告诉编译器该WebService需要暴露给客户端使用,否则系统会返回异常。 接着我们需要建立XmlDocument对象,用以返回Xml文件中的数据。 public XmlDocument Document     {         get         {            _document = new XmlDocument();            _document.Load(HttpContext.Current.Server.MapPath("~/App_Data/Data.xml"));            return _document;         }     }     public string[] Hierarchy     {         get{             string[] _hierarchy = new string[]{"province", "city"};             return _hierarchy;         }     } 以上代码返回了两个属性,一个是返回XmlDocument对象,一个是返回xml文件的层次,大家按照实际情况编写就可以了。 最后我们写一个简单的函数,用以返回数据源。 [WebMethod]     public AjaxControlToolkit.CascadingDropDownNameValue[ ] GetDropDownContents(string knownCategoryValues, string category){       System.Collections.Specialized.StringDictionaryknowCategoryValuesDictionary = newSystem.Collections.Specialized.StringDictionary();         knowCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);        returnAjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocument(Document,Hierarchy, knowCategoryValuesDictionary, category);     } 以上要注意的是,函数GetDropDownContents的参数knownCategoryValues和category不能改变名称。因为AjaxControlToolkit所规定的签名格式包括参数字母大小写,数据类型都是不可变的,如果要更改必须重新修改AjaxControlToolkit源码。 到了这一步我们就完成了CityService.asmx。 第二步:使用CascadingDropDown组件 使用之前我们先把所需控件拖到设计界面,包括一个UpdatePanel控件、三个DropDownList控件、三个CascadingDropDown组件和一个Label控件,如下图所示。 然后我们要设置所有的CascadingDropDown组件。打开属性窗口,设置CascadingDropDown的TargetControlID属性。CascadingDropDown1的TargetControlID设为DropDownList1,CascadingDropDown2的TargetControlID设为DropDownList2,CascadingDropDown3的TargetControlID设为DropDownList3,这样我们就可以把CascadingDropDown控件和所有的DropDownList控件关联起来了。 然后我们要到DropDownList控件的Extenders栏里设置相关属性,如下图所示: DropDownList1关联的是Xml文件中的province节点,因此DropDownList1的Category属性要填写province。同时因为DropDownList1是最上级下拉菜单,因此它的ParentControlID为空。LoadingText属性故名思义就是当读取数据时下拉菜单显示的文字;PromptText显示的是下拉菜单初始选项的文字;ServiceMethod填写WebService中的数据调用函数名称;ServicePath填写WebService文件名。 DropDownList2的设置可以参照下图: DropDownList3的设置参照DropDownList2的设置即可。 第三步:返回数据 到目前为止,所有设置已经完成了,我们只需要编写常规代码,取出所有数据即可。双击DropDownList3,编写如下代码: protected void DropDownList3_SelectedIndexChanged(object sender, EventArgs e)     {          Label1.Text = "gaga";         string province = DropDownList1.SelectedItem.Text;         string city = DropDownList2.SelectedItem.Text;         string town = DropDownList3.SelectedItem.Text;         if(String.IsNullOrEmpty(province))             Label1.Text = "Please select a province";         else if(String.IsNullOrEmpty(city))              Label1.Text = "Please select a city";           else if(String.IsNullOrEmpty(town))              Label1.Text = "Please select a town";           else               Label1.Text = String.Format("you have chosen {0},{1},{2}",province,city,town);     } 这样当我们选择完第三个下拉菜单之后,我们能在Label上看到我们所有的选择结果。注意:请将所有DropDownList的AutoPostBack属性设为True,否则将看不到效果。 运行,OK! 结束: 本章主要介绍了怎样使用CascadingDropDown组件,大家可以举一反三,用数据库作为数据源。另外要注意的是AjaxControlToolkit所规定的签名格式是不可更改的,否则会返回Method error 500,大家要严格按照以上的例子编写。 如要下载视频请打开如下地址:http://www.asp.net/learn/videos/view.aspx?tabid=63&id=77
分享 转发
多多交流!
TOP
沙发

回复:轻松掌握Ajax.net系列教程三:使用CascadingDropDown组件

正在自学呢~~谢谢老大了
TOP
板凳

回复:轻松掌握Ajax.net系列教程三:使用CascadingDropDown组件

谢谢 你的3篇文章 我已经转载到我的QQ空间了
TOP
地板

不知道性能会不会有什么影响。。。我按你做的。测试一下看看。。。以前也搞过这个。。当时弄死我了。。最后还是刷新弄两下快。。。。
TOP
五楼

thank you
TOP
六楼

众里寻他千百度,暮然回首,那代码却在51aspx.com
    Thank you!
TOP
七楼

众里寻他千百度,暮然回首,那代码却在51aspx.com
Thank you!
TOP
八楼

不错
TOP
九楼

组件不错啊
TOP
十楼

回复 1楼webbest的帖子 新手很适合,楼主很用心
TOP
发新话题 回复该主题