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

 本想传图片，但没有成功，不知道怎么才能用，将就着参考一下吧。