ASP.NET Ajax級聯(lián)DropDownList實現(xiàn)代碼
更新時間:2008年12月11日 19:57:23 作者:
我想大家對Ajax已耳熟能詳。自web 2.0概念出現(xiàn)以后,提供更好的用戶體驗變得越來越重要。那么今天我來講解一下如何使用ASP.NET Ajax和web service構(gòu)建無刷新級聯(lián)DropDownList(以下簡稱為級聯(lián)DDL)。完成的效果圖

了解級聯(lián)DDL
那么考慮以下幾種常見情景:
· 用戶注冊時需要選擇國家、省、市、地區(qū)等。
· 用戶購買產(chǎn)品時選擇產(chǎn)品類別、產(chǎn)品名稱、產(chǎn)品型號。
以上的例子有一些共同特點:
· 上一級(如省)選擇后下一級(如市)才可以選擇。
· 下一級的內(nèi)容由上一級的內(nèi)容決定。
像這樣的一組DropDownList就是級聯(lián)DDL.常見的解決方法是將帶有層次的數(shù)據(jù)寫入XML,然后設(shè)置DropDownList的AutoPostBack屬性為"True"開啟自動回調(diào),最后處理SelectedIndexChanged事件。這樣不僅十分麻煩,過多的頁面刷新會給用戶帶來反感。那么如何實現(xiàn)無刷新的級聯(lián)DropDownList呢?
開始
一、 創(chuàng)建XML數(shù)據(jù)文件
比如,我想做用戶注冊時的省、市的級聯(lián)DDL, 那么首先建立以下XML文件。
復(fù)制代碼 代碼如下:
<?xmlversion="1.0"encoding="utf-8"?>
<CityServiceSource>
<areaname="中國">
<provinceID="1"provinceID="110000"name="北京市">
<cityCityID="110100"name="市轄區(qū)">
<PieceareaPieceareaID="110101"name="東城區(qū)" />
<PieceareaPieceareaID="110102"name="西城區(qū)" />
<PieceareaPieceareaID="110103"name="崇文區(qū)" />
<PieceareaPieceareaID="110104"name="宣武區(qū)" />
<PieceareaPieceareaID="110105"name="朝陽區(qū)" />
<PieceareaPieceareaID="110106"name="豐臺區(qū)" />
<PieceareaPieceareaID="110107"name="石景山區(qū)" />
<PieceareaPieceareaID="110108"name="海淀區(qū)" />
<PieceareaPieceareaID="110109"name="門頭溝區(qū)" />
<PieceareaPieceareaID="110111"name="房山區(qū)" />
<PieceareaPieceareaID="110112"name="通州區(qū)" />
<PieceareaPieceareaID="110113"name="順義區(qū)" />
<PieceareaPieceareaID="110114"name="昌平區(qū)" />
<PieceareaPieceareaID="110115"name="大興區(qū)" />
<PieceareaPieceareaID="110116"name="懷柔區(qū)" />
<PieceareaPieceareaID="110117"name="平谷區(qū)" />
</city>
<cityCityID="110200"name="縣">
<PieceareaPieceareaID="110228"name="密云縣" />
<PieceareaPieceareaID="110229"name="延慶縣" />
</city>
</province>
</area>
<areaname="英國">
</area>
<areaname="美國">
</area>
<areaname="日本">
</area>
</CityServiceSource>
二、 創(chuàng)建web service
創(chuàng)建web service(如CityService.asmx)
復(fù)制代碼 代碼如下:
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService()]
publicclassCityService : System.Web.Services.WebService
{
privatestaticXmlDocument _document; // 用來讀取XML數(shù)據(jù)
privatestaticobject _lock = newobject();// 多線程并發(fā)處理
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數(shù)據(jù)的層次
}
}
[WebMethod] //一會兒控件會自動調(diào)用的web method.這個函數(shù)不根據(jù)具體情況改變。
public AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category)
{
StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
return AjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocument(Document, Hierarchy, knownCategoryValuesDictionary, category);
}
}
三、創(chuàng)建DLL控件
如果沒有安裝Ajax Control Toolkit去下載并安裝(http://asp.net)。
創(chuàng)建三個標(biāo)準(zhǔn)的DropDownList(默認(rèn)命名為DropDownList1、DropDownList2、DropDownList3).
然后在Ajax Control Toolkit中拖拽出三個CascadingDropDown控件,注意一個Extender只能對于一個標(biāo)準(zhǔn)控件。
復(fù)制代碼 代碼如下:
<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”文件中創(chuàng)建web method.
[WebMethod]
[System.Web.Script.Services.ScriptMethod]
publicstaticCascadingDropDownNameValue[] GetDropDownContentsPageMethod(string knownCategoryValues, string category)
{
returnnewCityService().GetDropDownContents(knownCategoryValues, category);
}
下面分別對CascadingDropDown的各個屬性進(jìn)行說明。
ServiceMethod="GetDropDownContents" 調(diào)用的web method
ServicePath="~/webservices/cityservice.asmx" web service地址
TargetControlID="DropDownList1" 與其綁定的DropDownList控件的ID
Category="area" 該級聯(lián)DDL的層次
LoadingText="正在讀取..." 加載時顯示的文字
PromptText="請選擇國家"> 未選擇時顯示的文字
可以說Ajax在UE(User Experience)帶來了革命性的變化。異步的刷新模式大大改進(jìn)了傳統(tǒng)“一步一刷新”的尷尬局面。由于本人修為尚淺,如有錯誤歡迎批評指證。
by Kim
2008/12/11
您可能感興趣的文章:
- asp.net省市三級聯(lián)動的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例
- ASP.NET MVC下拉框聯(lián)動實例解析
- asp.net DropDownList實現(xiàn)二級聯(lián)動效果
- ASP.NET中DropDownList和ListBox實現(xiàn)兩級聯(lián)動功能
- asp.net下使用AjaxPro實現(xiàn)二級聯(lián)動代碼
- asp.net DropDownList 三級聯(lián)動下拉菜單實現(xiàn)代碼
- asp.net兩級聯(lián)動(包含添加和修改)
- 適用與firefox ASP.NET無刷新二級聯(lián)動下拉列表
- ASP.NET實現(xiàn)級聯(lián)下拉框效果實例講解
- jQuery+Asp.Net實現(xiàn)省市二級聯(lián)動功能的方法
相關(guān)文章
asp.net實現(xiàn)DropDownList,TreeView,ListBox的無限極分類目錄樹
這篇文章主要介紹了asp.net實現(xiàn)DropDownList,TreeView,ListBox的無限極分類目錄樹,結(jié)合實例形式較為詳細(xì)的分析了asp.net常見控件實現(xiàn)無限極分類目錄樹的具體實現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2016-06-06.NET程序性能監(jiān)控系統(tǒng)Elastic?AMP的使用方法
這篇文章介紹了.NET程序性能監(jiān)控系統(tǒng)Elastic?AMP的使用方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11解決uploadify使用時session發(fā)生丟失問題的方法
這篇文章主要為大家詳細(xì)介紹了uploadify使用時發(fā)現(xiàn)session發(fā)生丟失問題的解決方法,遇到過類似問題的朋友可以參考本文進(jìn)行解決2016-05-05ASP.NET?Core管理應(yīng)用程序狀態(tài)
這篇文章介紹了ASP.NET?Core管理應(yīng)用程序狀態(tài)的方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-04-04