ASP.NET中实现Ajax级联DropDownList

最新推荐文章于 2021-08-05 17:35:41 发布

bosnma

最新推荐文章于 2021-08-05 17:35:41 发布

阅读量1.1k

点赞数

文章标签： ajax asp.net hierarchy service webservice string

本文链接：https://blog.csdn.net/bosnma/article/details/3500270

版权

我想大家对Ajax已耳熟能详。自web 2.0概念出现以后，提供更好的用户体验变得越来越重要。那么今天我来讲解一下如何使用ASP.NET Ajax和web service构建无刷新级联DropDownList(以下简称为级联DDL)。完成的效果图可以查看我的个人网站的页面.（点此查看)

级联DDL效果图

了解级联DDL

那么考虑以下几种常见情景 :

· 用户注册时需要选择国家、省、市、地区等。

· 用户购买产品时选择产品类别、产品名称、产品型号。

以上的例子有一些共同特点：

· 上一级（如省）选择后下一级（如市）才可以选择。

· 下一级的内容由上一级的内容决定。

像这样的一组 DropDownList 就是级联 DDL. 常见的解决方法是将带有层次的数据写入 XML ，然后设置 DropDownList 的 AutoPostBack 属性为 "True" 开启自动回调，最后处理 SelectedIndexChanged 事件。这样不仅十分麻烦，过多的页面刷新会给用户带来反感。那么如何实现无刷新的级联 DropDownList 呢？

开始

一、创建XML数据文件

比如，我想做用户注册时的省、市的级联DDL, 那么首先建立以下XML文件。
<? xml version = " 1.0 " encoding = " utf-8 " ?>

< CityServiceSource >

< area name = " 中国 " >

< province ID = " 1 " provinceID = " 110000 " name = " 北京市 " >

< city CityID = " 110100 " name = " 市辖区 " >

< Piecearea PieceareaID = " 110101 " name = " 东城区 " />

< Piecearea PieceareaID = " 110102 " name = " 西城区 " />

< Piecearea PieceareaID = " 110103 " name = " 崇文区 " />

< Piecearea PieceareaID = " 110104 " name = " 宣武区 " />

< Piecearea PieceareaID = " 110105 " name = " 朝阳区 " />

< Piecearea PieceareaID = " 110106 " name = " 丰台区 " />

< Piecearea PieceareaID = " 110107 " name = " 石景山区 " />

< Piecearea PieceareaID = " 110108 " name = " 海淀区 " />

< Piecearea PieceareaID = " 110109 " name = " 门头沟区 " />

< Piecearea PieceareaID = " 110111 " name = " 房山区 " />

< Piecearea PieceareaID = " 110112 " name = " 通州区 " />

< Piecearea PieceareaID = " 110113 " name = " 顺义区 " />

< Piecearea PieceareaID = " 110114 " name = " 昌平区 " />

< Piecearea PieceareaID = " 110115 " name = " 大兴区 " />

< Piecearea PieceareaID = " 110116 " name = " 怀柔区 " />

< Piecearea PieceareaID = " 110117 " name = " 平谷区 " />

</ city >

< city CityID = " 110200 " name = " 县 " >

< Piecearea PieceareaID = " 110228 " name = " 密云县 " />

< Piecearea PieceareaID = " 110229 " name = " 延庆县 " />

</ city >

</ province >
</ area >
< area name = " 英国 " >
</ area >
< area name = " 美国 " >
</ area >
< area name = " 日本 " >
</ area >
</ CityServiceSource >

二、创建web service

创建web service(如CityService.asmx)

[ WebService (Namespace = "http://tempuri.org/" )]

[ WebServiceBinding (ConformsTo = WsiProfiles .BasicProfile1_1)]

[System.Web.Script.Services. ScriptService ()]

public class CityService : System.Web.Services. WebService

{

private static XmlDocument _document; // 用来读取XML数据

private static object _lock = new object (); // 多线程并发处理

public static XmlDocument Document

{

get

{

lock (_lock)

{

if (_document == null )

{

_document = new XmlDocument ();

_document.Load( HttpContext .Current.Server.MapPath( "~/App_Data/CityServiceSource.xml" ));

}

return _document;

}

public static string [] Hierarchy

{

get

{

return new string [] { "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 : CascadingDropDown ID ="CascadingDropDown1" runat ="server"

ServiceMethod ="GetDropDownContents"

ServicePath ="~/webservices/cityservice.asmx" TargetControlID ="DropDownList1"

Category ="area" LoadingText ="正在读取..." PromptText ="请选择国家">

</ ajaxToolkit : CascadingDropDown >

< ajaxToolkit : CascadingDropDown ID ="CascadingDropDown2" runat ="server"

ParentControlID ="DropDownList1" ServiceMethod ="GetDropDownContentsPageMethod"

TargetControlID ="DropDownList2" Category ="province" LoadingText ="正在读取..."

PromptText ="请选择省">

</ ajaxToolkit : CascadingDropDown >

< ajaxToolkit : CascadingDropDown ID ="CascadingDropDown3" runat ="server"

ParentControlID ="DropDownList2" ServiceMethod ="GetDropDownContents"

ServicePath ="~/webservices/cityservice.asmx" TargetControlID ="DropDownList3"