快捷導(dǎo)航

ASP.NET Ajax級(jí)聯(lián)DropDownList實(shí)現(xiàn)代碼

更新時(shí)間：2008年12月11日 19:57:23 作者：

我想大家對(duì)Ajax已耳熟能詳。自web 2.0概念出現(xiàn)以后，提供更好的用戶體驗(yàn)變得越來越重要。那么今天我來講解一下如何使用ASP.NET Ajax和web service構(gòu)建無刷新級(jí)聯(lián)DropDownList(以下簡稱為級(jí)聯(lián)DDL)。完成的效果圖

了解級(jí)聯(lián)DDL
那么考慮以下幾種常見情景:
· 用戶注冊(cè)時(shí)需要選擇國家、省、市、地區(qū)等。
· 用戶購買產(chǎn)品時(shí)選擇產(chǎn)品類別、產(chǎn)品名稱、產(chǎn)品型號(hào)。
以上的例子有一些共同特點(diǎn)：
· 上一級(jí)（如?。┻x擇后下一級(jí)（如市）才可以選擇。
· 下一級(jí)的內(nèi)容由上一級(jí)的內(nèi)容決定。
像這樣的一組DropDownList就是級(jí)聯(lián)DDL.常見的解決方法是將帶有層次的數(shù)據(jù)寫入XML，然后設(shè)置DropDownList的AutoPostBack屬性為"True"開啟自動(dòng)回調(diào)，最后處理SelectedIndexChanged事件。這樣不僅十分麻煩，過多的頁面刷新會(huì)給用戶帶來反感。那么如何實(shí)現(xiàn)無刷新的級(jí)聯(lián)DropDownList呢？
開始
一、創(chuàng)建XML數(shù)據(jù)文件
比如，我想做用戶注冊(cè)時(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="豐臺(tái)區(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] //一會(huì)兒控件會(huì)自動(dòng)調(diào)用的web method.這個(gè)函數(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)建三個(gè)標(biāo)準(zhǔn)的DropDownList(默認(rèn)命名為DropDownList1、DropDownList2、DropDownList3).
然后在Ajax Control Toolkit中拖拽出三個(gè)CascadingDropDown控件，注意一個(gè)Extender只能對(duì)于一個(gè)標(biāo)準(zhǔn)控件。

復(fù)制代碼代碼如下:

<ajaxToolkit:CascadingDropDownID="CascadingDropDown1"runat="server" 
ServiceMethod="GetDropDownContents" 
ServicePath="~/webservices/cityservice.asmx"TargetControlID="DropDownList1" 
Category="area"LoadingText="正在讀取..."PromptText="請(qǐng)選擇國家"> 
</ajaxToolkit:CascadingDropDown> 
<ajaxToolkit:CascadingDropDownID="CascadingDropDown2"runat="server" 
ParentControlID="DropDownList1"ServiceMethod="GetDropDownContentsPageMethod" 
TargetControlID="DropDownList2"Category="province"LoadingText="正在讀取..." 
PromptText="請(qǐng)選擇省"> 
</ajaxToolkit:CascadingDropDown> 
<ajaxToolkit:CascadingDropDownID="CascadingDropDown3"runat="server" 
ParentControlID="DropDownList2"ServiceMethod="GetDropDownContents" 
ServicePath="~/webservices/cityservice.asmx"TargetControlID="DropDownList3" 
Category="city"LoadingText="正在讀取..."PromptText="請(qǐng)選擇城市"> 
</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);
}
下面分別對(duì)CascadingDropDown的各個(gè)屬性進(jìn)行說明。
ServiceMethod="GetDropDownContents" 調(diào)用的web method
ServicePath="~/webservices/cityservice.asmx" web service地址
TargetControlID="DropDownList1" 與其綁定的DropDownList控件的ID
Category="area" 該級(jí)聯(lián)DDL的層次
LoadingText="正在讀取..." 加載時(shí)顯示的文字
PromptText="請(qǐng)選擇國家"> 未選擇時(shí)顯示的文字
可以說Ajax在UE(User Experience)帶來了革命性的變化。異步的刷新模式大大改進(jìn)了傳統(tǒng)“一步一刷新”的尷尬局面。由于本人修為尚淺，如有錯(cuò)誤歡迎批評(píng)指證。
by Kim
2008/12/11

您可能感興趣的文章: