ASP.NET Ajax级联DropDownList实现代码

 更新时间:2008年12月11日 19:57:23   作者:  
我想大家对Ajax已耳熟能详。自web 2.0概念出现以后,提供更好的用户体验变得越来越重要。那么今天我来讲解一下如何使用ASP.NET Ajax和web service构建无刷新级联DropDownList(以下简称为级联DDL)。完成的效果图

了解级联DDL
那么考虑以下几种常见情景:
· 用户注册时需要选择国家、省、市、地区等。
· 用户购买产品时选择产品类别、产品名称、产品型号。
以上的例子有一些共同特点:
· 上一级(如省)选择后下一级(如市)才可以选择。
· 下一级的内容由上一级的内容决定。
像这样的一组DropDownList就是级联DDL.常见的解决方法是将带有层次的数据写入XML,然后设置DropDownList的AutoPostBack属性为"True"开启自动回调,最后处理SelectedIndexChanged事件。这样不仅十分麻烦,过多的页面刷新会给用户带来反感。那么如何实现无刷新的级联DropDownList呢?
开始
一、 创建XML数据文件
比如,我想做用户注册时的省、市的级联DDL, 那么首先建立以下XML文件。
复制代码 代码如下:

<?xmlversion="1.0"encoding="utf-8"?>
<CityServiceSource>
<areaname="中国">
<provinceID="1"provinceID="110000"name="北京市">
<cityCityID="110100"name="市辖区">
<PieceareaPieceareaID="110101"name="东城区" />
<PieceareaPieceareaID="110102"name="西城区" />
<PieceareaPieceareaID="110103"name="崇文区" />
<PieceareaPieceareaID="110104"name="宣武区" />
<PieceareaPieceareaID="110105"name="朝阳区" />
<PieceareaPieceareaID="110106"name="丰台区" />
<PieceareaPieceareaID="110107"name="石景山区" />
<PieceareaPieceareaID="110108"name="海淀区" />
<PieceareaPieceareaID="110109"name="门头沟区" />
<PieceareaPieceareaID="110111"name="房山区" />
<PieceareaPieceareaID="110112"name="通州区" />
<PieceareaPieceareaID="110113"name="顺义区" />
<PieceareaPieceareaID="110114"name="昌平区" />
<PieceareaPieceareaID="110115"name="大兴区" />
<PieceareaPieceareaID="110116"name="怀柔区" />
<PieceareaPieceareaID="110117"name="平谷区" />
</city>
<cityCityID="110200"name="县">
<PieceareaPieceareaID="110228"name="密云县" />
<PieceareaPieceareaID="110229"name="延庆县" />
</city>
</province>
</area>
<areaname="英国">
</area>
<areaname="美国">
</area>
<areaname="日本">
</area>
</CityServiceSource>

二、 创建web service
创建web service(如CityService.asmx)
复制代码 代码如下:

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService()]
publicclassCityService : System.Web.Services.WebService
{
privatestaticXmlDocument _document; // 用来读取XML数据
privatestaticobject _lock = newobject();// 多线程并发处理
publicstaticXmlDocument Document
{
get
{
lock (_lock)
{
if (_document == null)
{
_document = newXmlDocument();
_document.Load(HttpContext.Current.Server.MapPath("~/App_Data/CityServiceSource.xml"));
}
}
return _document;
}
}
publicstaticstring[] Hierarchy
{
get
{
returnnewstring[] { "area", "province"};// XML数据的层次
}
}
[WebMethod] //一会儿控件会自动调用的web method.这个函数不根据具体情况改变。
public AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category)
{
StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
return AjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocument(Document, Hierarchy, knownCategoryValuesDictionary, category);
}
}

三、创建DLL控件
如果没有安装Ajax Control Toolkit去下载并安装(http://asp.net)。
创建三个标准的DropDownList(默认命名为DropDownList1、DropDownList2、DropDownList3).
然后在Ajax Control Toolkit中拖拽出三个CascadingDropDown控件,注意一个Extender只能对于一个标准控件。 
复制代码 代码如下:

<ajaxToolkit:CascadingDropDownID="CascadingDropDown1"runat="server"
ServiceMethod="GetDropDownContents"
ServicePath="~/webservices/cityservice.asmx"TargetControlID="DropDownList1"
Category="area"LoadingText="正在读取..."PromptText="请选择国家">
</ajaxToolkit:CascadingDropDown>
<ajaxToolkit:CascadingDropDownID="CascadingDropDown2"runat="server"
ParentControlID="DropDownList1"ServiceMethod="GetDropDownContentsPageMethod"
TargetControlID="DropDownList2"Category="province"LoadingText="正在读取..."
PromptText="请选择省">
</ajaxToolkit:CascadingDropDown>
<ajaxToolkit:CascadingDropDownID="CascadingDropDown3"runat="server"
ParentControlID="DropDownList2"ServiceMethod="GetDropDownContents"
ServicePath="~/webservices/cityservice.asmx"TargetControlID="DropDownList3"
Category="city"LoadingText="正在读取..."PromptText="请选择城市">
</ajaxToolkit:CascadingDropDown>
<asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional"RenderMode="inline">
<Triggers>
<asp:AsyncPostBackTriggerControlID="DropDownList3"EventName="SelectedIndexChanged"/>
</Triggers>
</asp:UpdatePanel>

在”.cs”文件中创建web method.
[WebMethod]
[System.Web.Script.Services.ScriptMethod]
publicstaticCascadingDropDownNameValue[] GetDropDownContentsPageMethod(string knownCategoryValues, string category)
{
returnnewCityService().GetDropDownContents(knownCategoryValues, category);
}
下面分别对CascadingDropDown的各个属性进行说明。
ServiceMethod="GetDropDownContents" 调用的web method
ServicePath="~/webservices/cityservice.asmx" web service地址
TargetControlID="DropDownList1" 与其绑定的DropDownList控件的ID
Category="area" 该级联DDL的层次
LoadingText="正在读取..." 加载时显示的文字
PromptText="请选择国家"> 未选择时显示的文字
可以说Ajax在UE(User Experience)带来了革命性的变化。异步的刷新模式大大改进了传统“一步一刷新”的尴尬局面。由于本人修为尚浅,如有错误欢迎批评指证。
by Kim
2008/12/11

相关文章

  • .NET Core 1.0创建Self-Contained控制台应用

    .NET Core 1.0创建Self-Contained控制台应用

    这篇文章主要为大家详细介绍了.NET Core 1.0创建Self-Contained控制台应用的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 利用ASP.NET MVC和Bootstrap快速搭建个人博客之文章打赏功能(六)

    利用ASP.NET MVC和Bootstrap快速搭建个人博客之文章打赏功能(六)

    这篇文章主要介绍了利用ASP.NET MVC和Bootstrap快速搭建个人博客之文章打赏功能(六) 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • WinForm中窗体间的数据传递交互的一些方法

    WinForm中窗体间的数据传递交互的一些方法

    通过子窗口向外引发一个事件,父窗口去实现该事件,我们可以再不关闭父窗口和子窗口的情况下进行数据的传输显示
    2012-12-12
  • ASP.net WebAPI跨域调用问题的解决方法

    ASP.net WebAPI跨域调用问题的解决方法

    在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案。下面这篇文章主要给大家介绍了关于ASP.net WebAPI跨域调用问题的解决方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。
    2018-03-03
  • asp.net DbProviderFactory的使用-示例

    asp.net DbProviderFactory的使用-示例

    NET 2.0有一个抽象工厂模式的典型应用:通过DBProviderFactory 可以对不同数据库进行操作。
    2009-11-11
  • APS.NET MVC4生成二维码简单解析

    APS.NET MVC4生成二维码简单解析

    这篇文章主要介绍了APS.NET MVC4二维码的生成过程,需要的朋友可以参考下
    2015-11-11
  • GridView常用操作事件图文介绍

    GridView常用操作事件图文介绍

    对于gridview学NET的同学再熟悉不过,但是其中功能事件是否能编码熟练实现
    2012-11-11
  • ASP.NET+XML打造网络硬盘原理分析

    ASP.NET+XML打造网络硬盘原理分析

    文件传送常用的三种方式:FTP、Email及网上邻居,都在一定程度上实现了文件数据的交流,但它们都主要面向“点对点”的传送,无法实现一块空间,资源互见的应用需求,这种基于点对多的共享模式需要寻求另外的传输途径,网络硬盘就是一种很好的解决方式
    2012-09-09
  • 总结十条.NET异常处理建议

    总结十条.NET异常处理建议

    .NET中从始至终要紧记异常处理的策略:抛出具体的一个异常,而不是只抛出Exception类型的异常,这样能方便我们捕获对应类型的异常。我们在编写代码时要注意考虑到应用程序最差的情况;显示有好的信息,并提供适当的管理员联系信息
    2015-11-11
  • asp.net mvc发送邮件实例讲解

    asp.net mvc发送邮件实例讲解

    这篇文章主要为大家详细介绍了asp.net mvc发送邮件实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05

最新评论