我想大家对Ajax已耳熟能详。自web 2.0概念出现以后,提供更好的用户体验变得越来越重要。那么今天我来讲解一下如何使用ASP.NET Ajax和web service构建无刷新级联DropDownList(以下简称为级联DDL)。完成的效果图
了解级联DDL
那么考虑以下几种常见情景:
・ 用户注册时需要选择国家、省、市、地区等。
・ 用户购买产品时选择产品类别、产品名称、产品型号。
以上的例子有一些共同特点:
・ 上一级(如省)选择后下一级(如市)才可以选择。
・ 下一级的内容由上一级的内容决定。
像这样的一组DropDownList就是级联DDL.常见的解决方法是将带有层次的数据写入XML,然后设置DropDownList的AutoPostBack属性为”True”开启自动回调,最后处理SelectedIndexChanged事件。这样不仅十分麻烦,过多的页面刷新会给用户带来反感。那么如何实现无刷新的级联DropDownList呢?
开始
一、 创建XML数据文件
比如,我想做用户注册时的省、市的级联DDL, 那么首先建立以下XML文件。
二、 创建web service
创建web service(如CityService.asmx)
[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只能对于一个标准控件。
ServicePath=”~/webservices/cityservice.asmx”TargetControlID=”DropDownList1″
Category=”area”LoadingText=”正在读取…”PromptText=”请选择国家”>
ParentControlID=”DropDownList1″ServiceMethod=”GetDropDownContentsPageMethod”
TargetControlID=”DropDownList2″Category=”province”LoadingText=”正在读取…”
PromptText=”请选择省”>
ParentControlID=”DropDownList2″ServiceMethod=”GetDropDownContents”
ServicePath=”~/webservices/cityservice.asmx”TargetControlID=”DropDownList3″
Category=”city”LoadingText=”正在读取…”PromptText=”请选择城市”>
在”.cs”文件中创建web method.
[WebMethod]
[System.Web.Script.Services.ScriptMethod]
pub来源gao*daima.com搞@代#码网licstaticCascadingDropDownNameValue[] 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
以上就是ASP.NET Ajax级联DropDownList实现代码的详细内容,更多请关注gaodaima搞代码网其它相关文章!