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

  上一篇講的是以xml爲數據源時的三級聯動，下面來看一下用數據庫作數據源時應該怎樣實現。在toolkit包中的walkthrough中有一個示例，但只講了webservice如何實現，至於如何實現獲取數據只是一筆帶過，對於很少用強類型化DataSet的人來講一下就蒙了，我就弄了半天，費了好大的勁，在網上google了若干相關內容，終於找到一個http://www.nateirwin.net/2006/11/09/using-aspnet-ajaxs-cascadingdropdown-with-sql-server-database/comment-page-1/#comment-108附在這裏了--英文的，有興趣的不妨看一下，順便給增加個點擊量也好。但這位仁兄只講了步驟，具體的還是沒有。苦惱了許久還是在代碼提示中找到了線索。現在就講一下啦。

aspx頁面:

還是三個DropDownList控件

製造商:     <asp:DropDownList ID="DropDownList1" runat="server"/><br/> 汽車型號: <asp:DropDownList ID="DropDownList2" runat="server"/><br/> 汽車顏色: <asp:DropDownList ID="DropDownList3" runat="server" AutoPostBack="True" onselectedindexchanged="ddlColor_SelectedIndexChanged"/>

 

三個CascadingDropDown:

<cc1:CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID ="DropDownList1" Category ="Make" PromptText ="請選擇廠家" LoadingText ="[loading categories...]" ServicePath ="CarsDBService.asmx" ServiceMethod ="GetMakes"> </cc1:CascadingDropDown> <cc1:CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID ="DropDownList2" Category ="Model" PromptText="請選擇汽車型號" LoadingText="[Loading models...]" ServicePath ="CarsDBService.asmx" ServiceMethod ="GetModelsForMake" ParentControlID ="DropDownList1"> </cc1:CascadingDropDown> <cc1:CascadingDropDown ID="CascadingDropDown3" runat="server" TargetControlID ="DropDownList3" Category="Color" PromptText="請選擇您喜歡的顏色" LoadingText="[Loading colors...]" ServicePath ="CarsDBService.asmx" ServiceMethod ="GetColorsForModel" ParentControlID="DropDownList2"> </cc1:CascadingDropDown>

與第一篇不同的只是設置web服務的設置。

UpdatePanel控件與前一篇同。

 

aspx.cs與前一篇同,不再用那個頁面方法。

 

WebService:

/// <summary> /// 獲取製造商數據,使用了強類型化的dataset,只要符合CascadingDropDownNameValue[]返回類型的獲取方式都是可以的。 /// </summary> /// <param name="knownCategoryValues"></param> /// <param name="category"></param> /// <returns></returns> [WebMethod ] public CascadingDropDownNameValue[] GetMakes(string knownCategoryValues,string category) { CarsTableAdapters.MakesTableAdapter makeAdapter = new CarsTableAdapters.MakesTableAdapter();//在命名空間CarsTableAdapters下面 Cars.MakesDataTable makes = makeAdapter.GetMakes();//此處只是獲取數據的方式，可以用任何方式代替。 List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>(); foreach (DataRow dr in makes) { string make = dr["Manufacturer"] as string; int makeID = (int)dr["id"]; values.Add(new CascadingDropDownNameValue (make,makeID .ToString ())); } return values .ToArray (); } /// <summary> /// 獲取Model數據。 /// </summary> /// <param name="knownCategoryValues"></param> /// <param name="category"></param> /// <returns></returns> [WebMethod] public CascadingDropDownNameValue[] GetModelsForMake(string knownCategoryValues, string category) { StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues); int makeID; if(!kv.ContainsKey("Make")||!Int32.TryParse (kv["Make"],out makeID ))//判斷第一個dropdownlist有沒有傳遞合法數據,爲下面使用id作準備。 { return null; } CarsTableAdapters.ModelsTableAdapter modelAdapter = new CarsTableAdapters.ModelsTableAdapter(); Cars.ModelsDataTable models = modelAdapter.GetModels(makeID);//此處只是獲取數據的方式，可以用任何方式代替。 List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>(); foreach (DataRow dr in models) { values.Add(new CascadingDropDownNameValue(dr["modelName"] as string, dr["modelID"].ToString())); } return values.ToArray(); } [WebMethod] public CascadingDropDownNameValue[] GetColorsForModel(string knownCategoryValues,string category) { StringDictionary kv=CascadingDropDown.ParseKnownCategoryValuesString (knownCategoryValues); int modelID; if(!kv.ContainsKey("Model")||!Int32.TryParse (kv["Model"],out modelID ))//判斷第一個dropdownlist有沒有傳遞合法數據,爲下面使用id作準備。 { return null; } CarsTableAdapters .ColorsTableAdapter colorAdapter=new CarsTableAdapters.ColorsTableAdapter (); Cars.ColorsDataTable colorTable=colorAdapter.GetColors (modelID); List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>(); foreach (DataRow dr in colorTable) { values.Add(new CascadingDropDownNameValue((string)dr["color"], dr["colorID"].ToString())); } return values.ToArray(); }

基本上與toolkit中sampleWebSite中的相同，但因用的數據庫不同，有字段是不同的。

 

下面就是如何來建立強類型化的DataSet了

1.建立dataset文件，您的示例網站-》右鍵-》add new item-》DataSet，取名爲Cars，最後生成Cars.xsd文件，這樣才和sampleWebSite中的示例一致。

2.爲每一個表都建立一個TableAdapter，在新建立的文件中右鍵-》add-》TableAdapter按提示做就可以了。前提是你已經建立了數據表，至於數據表我附在了後面。在本例中要建三個。

3.這樣在Web Service中就可以引用了。類Cars下有你所建立的表如：ColorsDataTable，命名空間CarsTableAdapters下有您所需要的Adapter，如MakesTableAdapter。

 

附：我所用的數據表：

Makes:

id int Unchecked
Manufacturer nvarchar(200) Unchecked
descn nvarchar(1000) Checked
  Unchecked

Models:

 modelID int Unchecked
modelName nvarchar(100) Unchecked
manuID int Unchecked
descn nchar(10) Checked
  Unchecked

Colors:

 colorID int Unchecked
color nvarchar(50) Checked
modelID int Unchecked
descn nvarchar(50) Checked
  Unchecked

 本想傳圖片，但沒有成功，不知道怎麼才能用，將就着參考一下吧。