asp.net ajax toolkit中的CascadingDropDown使用詳解(一)

   實際開發經常要用到級聯下拉框，如省份、城市、地區，或三級分類等都要用到。開發起來總是很麻煩，現在有了asp.net ajax tooolkit的CascadingDropDown控件，情況變的好起來了，下面就來看看是怎樣實現的。

.aspx頁面中的關鍵代碼：

 

三個DropDownList，形成三級聯動。

<table> <tr> <td>Make</td> <td><asp:DropDownList ID="DropDownList1" runat="server" Width="170" /></td> </tr> <tr> <td>Model</td> <td><asp:DropDownList ID="DropDownList2" runat="server" Width="170" /></td> </tr> <tr> <td>Color</td> <td><asp:DropDownList ID="DropDownList3" runat="server" Width="170" AutoPostBack="True" onselectedindexchanged="DropDownList3_SelectedIndexChanged" /></td> </tr> </table>

注意最後一個的設置，自動回傳，其中的事件是獲取結果並顯示在UpdatePanel中的。

 

三個CascadingDropDown控件，分別關連上面的三個DropDownList

<cc1:CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID ="DropDownList1" Category ="Make" PromptText ="please select a make" LoadingText ="[loading categories...]" ServicePath ="CarsService.asmx" ServiceMethod ="GetDropDownContents"> </cc1:CascadingDropDown> <cc1:CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID ="DropDownList2" Category ="Model" PromptText="Please select a model" LoadingText="[Loading models...]" ServiceMethod="GetDropDownContentsPageMethod" ParentControlID ="DropDownList1"> </cc1:CascadingDropDown> <cc1:CascadingDropDown ID="CascadingDropDown3" runat="server" TargetControlID ="DropDownList3" Category="Color" PromptText="Please select a color" LoadingText="[Loading colors...]" ServicePath="~/cascadingDDL/CarsService.asmx" ServiceMethod="GetDropDownContents" ParentControlID="DropDownList2"> </cc1:CascadingDropDown>

    可能是出於演示的目的，第三個dropdownlist使用了頁面方法。

    數據源使用了sampleWebSite中的xml文件。   

    Category="Make"中的Make是製造廠商，Model是汽車的類型，Color是汽車的顏色。其它的各個屬性的意義:

TargetControlID 不用說了吧；

Category ：是各級分類名，如省份，在這裏就是製造廠商Make；

PromptText：在初始化時的提示文本；

LoadingText：加載時的提示文本；

ServicePath：web Service文件，全稱；

ServiceMethod：web service中的獲取數據的方法；

ParentControlID ：上一級的dropdownlist的ID。

還有其它的屬性，讀者自己只好去查toolkit的文檔了。

 

一個UpdatePanel用來顯示您選擇的結果。

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode ="Conditional" RenderMode ="Inline" > <ContentTemplate > <asp:Label ID="Label1" runat="server" Text="沒有服務器響應數據(結果將顯示在這裏)"></asp:Label> </ContentTemplate> <Triggers > <asp:AsyncPostBackTrigger ControlID ="DropDownList3" EventName ="SelectedIndexChanged" /> </Triggers> </asp:UpdatePanel>
還有一樣，千萬不要忘了，要不總是出現那個煩人的黃色的頁面。

在<%@ Page 中設置EnableEventValidation ="false" 。

aspx.cs後置代碼中的代碼

protected void DropDownList3_SelectedIndexChanged(object sender, EventArgs e) { string make = DropDownList1.SelectedItem.Text; string model = DropDownList2.SelectedItem.Text; string color = DropDownList3.SelectedItem.Text; if (string.IsNullOrEmpty(make)) Label1.Text = "Please select a make."; else if (string.IsNullOrEmpty(model)) Label1.Text = "Please select a model."; else if (string.IsNullOrEmpty(color)) Label1.Text = "Please select a color."; else Label1.Text = string.Format("您已經選擇了一個{0} {1} {2}.Nice car!", color, make, model); } [WebMethod] [System.Web.Script.Services.ScriptMethod] public static CascadingDropDownNameValue[] GetDropDownContentsPageMethod(string knownCategoryValues, string category) { return new CarsService().GetDropDownContents(knownCategoryValues ,category ); }

很簡單，只是用來獲取結果並顯示在頁面上。中間有個頁面方法,在第二個ddl上使用了。

 

下面來看看關鍵的獲取數據的WEB服務

[System.Web.Script.Services.ScriptService] public class CarsService : System.Web.Services.WebService { private static XmlDocument _document; private static Regex _inputValidationRegex; private static object _lock = new object(); public CarsService() { //Uncomment the following line if using designed components //InitializeComponent(); } /// <summary> /// 屬性--獲取xml數據。 /// </summary> public static XmlDocument Document { get { lock (_lock) { if(_document ==null ) { _document = new XmlDocument(); _document.Load(HttpContext.Current.Server.MapPath("~/App_Data/CarsService.xml")); } } return _document; } } /// <summary> /// 屬性--做什麼用啊?-返回xml文件的層次 /// </summary> public static string[] Hierarchy { get { return new string[] { "make", "model" }; } } /// <summary> /// 屬性--產生regex對象 /// </summary> public static Regex InputValidationRegex { get { lock (_lock ) { if (null == _inputValidationRegex) { _inputValidationRegex = new Regex("^[0-9a-zA-Z //(//)]*$"); } } return _inputValidationRegex; } } /// <summary> /// web服務幫助方法--用從數據源返回所需的數據。 /// </summary> /// <param name="knownCategoryValues">就是選中的項，格式"分類名:值;分類名:值;",如"Make:Acura;","Make:Acura;Model:RL;"</param> /// <param name="category">總是級聯dropdownlist中點擊的下一個dropdownlist的分類名如"Model"</param> /// <returns></returns> [WebMethod] public AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues,string category) { StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown. ParseKnownCategoryValuesString(knownCategoryValues);//記錄的是已經選擇的dropdownlist的選中項的名值對,可以是多個。 //轉換爲特定的格式而已,把字符串形式轉換爲StringDictionary類型。 return AjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocument( Document ,Hierarchy ,knownCategoryValuesDictionary ,category ,InputValidationRegex );//獲取的下一項dropdownlist的內容。 //從xml文檔中獲取指定的內容。 }

中間已經有了許多註釋。下面再來增加點：

      QuerySimpleCascadingDropDownDocument(
               Document ,Hierarchy ,knownCategoryValuesDictionary ,category ,InputValidationRegex )
         * 參數：
         * Document:xml文檔,數據源。
         * Hierarchy:xml文檔的層次結構。
         * knownCategoryValuesDictionary:就是已經選中項的字符串形式的值。
         * category:下一個dropdownlist的分類名。
         * InputValidationRegex:是用來驗證knownCategoryValuesDictionary ,category兩個參數的合法性的。
        
         * 返回值中的CascadingDropDownNameValue 是CascadingDropDown下的一個類

 

提示：不要忘了在類上方加上這個--[System.Web.Script.Services.ScriptService]

      這樣，一個使用xml作數據源的級聯下拉框就完成了。希望能對你的開發提供一點幫助，本人也正在學習中，如果有什麼新的思路，請評論裏留言討論。下一篇將介紹如果使用我們最常用的數據庫做數據源來實現級聯下拉框。