Asp.net Ajax CascadingDropDown 控制項的用法
- 2019 年 10 月 7 日
- 筆記
CascadingDropDown 控制項提供了級聯下拉列表顯示的功能。在一些特定的業務環境下，我們希望下拉列表會根據頁面中的另外一個控制項（TextBox、CheckBox或DropDownList）的值而顯示不同的列表項，最常見的就是在進行區域選擇時，當選擇了省級為「北京」時，我們希望在DropDownList中的列表項為「朝陽」、「海淀」、「東城」、「西城」等屬於北京市的下級區域。如上所說，對於存在包含關係的下拉列表選擇中，CascadingDropDown控制項將會非常有用。
要是用CascadingDropDown 控制項，首要現在頁面上放置一個DropDownList控制項，並將CascadingDropDown控制項的TargetControlID設置為DropDownList控制項。下面是CascadingDropDown的使用程式碼：
<ajaxToolkit:CascadingDropDown ID="CDD1" runat="server" TargetControlID="DropDownList2" Category="Model" PromptText="Please select a model" LoadingText="[Loading models...]" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents" ParentControlID="DropDownList1" SelectedValue="SomeValue"/>
- TargetControlID：目標控制項的ID
- Category：所屬分類名稱，在下級列表中，會作為參數的一部分傳遞給Webservice的方法，用來確定需要返回給下級列表什麼樣的數據。
- PromptText：在沒有選擇時顯示的內容
- LoadingText：在進行數據載入時顯示的內容
- ServicePath：提供數據的WebService的路徑
- ServiceMethod：WebService的方法
- ParentControlID：上一級（父級）列表的ID
- SelectedValue：默認選中的數據
我們來添加一個示例，首先在頁面放置三個DropDownList，分別用來選擇省、市、區，程式碼如下：
<table> <tr> <td> 省 </td> <td> <asp:DropDownList ID="DropDownList1" runat="server" Width="170"/> </td> </tr> <tr> <td> 市 </td> <td> <asp:DropDownList ID="DropDownList2" runat="server" Width="170"/> </td> </tr> <tr> <td> 區 </td> <td> <asp:DropDownList ID="DropDownList3" runat="server" Width="170"/> </td> </tr> </table>
然後，為這三個DropDownList分別添加CascadingDropDown 控制項，程式碼如下：
<ajaxToolkit:CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID="DropDownList1" Category="省" PromptText="請選擇一個省" LoadingText="正在載入省……" ServicePath="/WebService/CascadingDropDownService.asmx" ServiceMethod="GetDropDownContents"/> <ajaxToolkit:CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID="DropDownList2" Category="市" PromptText="請選擇一個市" LoadingText="正在載入市……" ServicePath="/WebService/CascadingDropDownService.asmx" ServiceMethod="GetDropDownContents" ParentControlID="DropDownList1"/> <ajaxToolkit:CascadingDropDown ID="CascadingDropDown3" runat="server" TargetControlID="DropDownList3" Category="區" PromptText="請選擇一個區" LoadingText="正在載入區……" ServicePath="/WebService/CascadingDropDownService.asmx" ServiceMethod="GetDropDownContents" ParentControlID="DropDownList2"/>
可以看出，這段程式碼三個CascadingDropDown控制項中的ServicePath和ServiceMethod是相同的，我們只需要在方法GetDropDownContents中添加適當的分支處理就可以了，CascadingDropDownService的GetDropDownContents方法的程式碼如下：
[System.Web.Services.WebMethod] [System.Web.Script.Services.ScriptMethod] public CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category) { CascadingDropDownNameValue[] result =null; StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues); switch (category) { case"省": { result =new CascadingDropDownNameValue[] { new CascadingDropDownNameValue("河南", "hn"), new CascadingDropDownNameValue("山西", "sx")}; } break; case"市": { switch (knownCategoryValuesDictionary["省"]) { case"hn": { result =new CascadingDropDownNameValue[] { new CascadingDropDownNameValue("洛陽", "ly"), new CascadingDropDownNameValue("南陽", "ny") }; } break; case"sx": { result =new CascadingDropDownNameValue[] { new CascadingDropDownNameValue("太原", "ty"), new CascadingDropDownNameValue("呂梁", "ll") }; } break; } } break; case"區": { switch (knownCategoryValuesDictionary["市"]) { case"ly": { result =new CascadingDropDownNameValue[] { new CascadingDropDownNameValue("西工區", "xg"), new CascadingDropDownNameValue("澗西區", "jx") }; } break; case"ny": { result =new CascadingDropDownNameValue[] { new CascadingDropDownNameValue("卧龍區", "wl")}; } break; case"ty": { result =new CascadingDropDownNameValue[] { new CascadingDropDownNameValue("迎澤區", "yz"), new CascadingDropDownNameValue("杏花嶺區", "xhl") }; } break; case"ll": { result =new CascadingDropDownNameValue[] { new CascadingDropDownNameValue("離石區", "ls")}; } break; } } break; } return result; }
這個WebService要允許通過JS調用，所以要在Service的頭部添加[System.Web.Script.Services.ScriptService]，這樣就可以了。
上面的示例只是一個簡單的測試例子，更複雜的應用需要訪問資料庫、處理複雜業務等，但控制項本身的用法沒有太大差別，希望你能夠舉一反三啊！
希望對你有所幫助，謝謝關注！
