AJAX ControlToolkit学习日志-CascadingDropDown(5)
CascadingDropDown控件用于扩展DropDownList进行联动显示。
首先,了解一下该控件的一些属性。
a.category:与该CascadingDropDown进行联合的DropDownList显示的内容的名字,其实就是后台的xml文档中的标签名。
b.TargetControlID:与该CascadingDropDown关联的DropDownList。
c.PromptText:DropDownList未选择项目时的提示信息。
d.LoadingText:当DropDownList导入数据的提示文本。
e.ServicePath:将被使用的web服务的路径。
f.ServiceMethod:将被调用的web方法。
g.ParentControlID:上一级的DropDownList。
示例:
1)建立一个ASP.NET AJAX-Enabled Web Project工程项目。
2)在default.aspx中添加三个DropDownList控件。代码如下:
3)在default.aspx中添加三个CascadingDropDown,并使它们与DropDownList关联。代码如下:
4)在default.aspx中添加一个UpdatePanel控件,并在它里面添加一个Label和设定DropDownList3为其更新的触发器。代码如下:
5)最终的界面效果如下:
6)在项目中添加Web服务,取名为CarsService.asmx。代码如下:
7)按下CTRL+F5,在浏览器里查看本页。
首先,了解一下该控件的一些属性。
a.category:与该CascadingDropDown进行联合的DropDownList显示的内容的名字,其实就是后台的xml文档中的标签名。
b.TargetControlID:与该CascadingDropDown关联的DropDownList。
c.PromptText:DropDownList未选择项目时的提示信息。
d.LoadingText:当DropDownList导入数据的提示文本。
e.ServicePath:将被使用的web服务的路径。
f.ServiceMethod:将被调用的web方法。
g.ParentControlID:上一级的DropDownList。
示例:
1)建立一个ASP.NET AJAX-Enabled Web Project工程项目。
2)在default.aspx中添加三个DropDownList控件。代码如下:
1 Make:
2 <asp:DropDownList ID="DropDownList1" runat="server" Width="133px">
3 </asp:DropDownList><br />
4 Model:
5 <asp:DropDownList ID="DropDownList2" runat="server" Width="133px">
6 </asp:DropDownList><br />
7 Color:
8 <asp:DropDownList ID="DropDownList3" runat="server" Width="134px">
9 </asp:DropDownList>
2 <asp:DropDownList ID="DropDownList1" runat="server" Width="133px">
3 </asp:DropDownList><br />
4 Model:
5 <asp:DropDownList ID="DropDownList2" runat="server" Width="133px">
6 </asp:DropDownList><br />
7 Color:
8 <asp:DropDownList ID="DropDownList3" runat="server" Width="134px">
9 </asp:DropDownList>
3)在default.aspx中添加三个CascadingDropDown,并使它们与DropDownList关联。代码如下:
1 <cc1:CascadingDropDown ID="CascadingDropDown1" Category="Make" PromptText="Please select a make" ServicePath ="CarsService.asmx" ServiceMethod="GetDropDownContents" TargetControlID="DropDownList1" runat="server">
2 </cc1:CascadingDropDown>
3 <cc1:CascadingDropDown ID="CascadingDropDown2" Category="Model" PromptText="Please select a module" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents" TargetControlID="DropDownList2" ParentControlID="DropDownList1" runat="server">
4 </cc1:CascadingDropDown>
5 <cc1:CascadingDropDown ID="CascadingDropDown3" Category="Color" PromptText="Please select a color" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents" TargetControlID="DropDownList3" ParentControlID="DropDownList2" runat="server">
6 </cc1:CascadingDropDown>
2 </cc1:CascadingDropDown>
3 <cc1:CascadingDropDown ID="CascadingDropDown2" Category="Model" PromptText="Please select a module" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents" TargetControlID="DropDownList2" ParentControlID="DropDownList1" runat="server">
4 </cc1:CascadingDropDown>
5 <cc1:CascadingDropDown ID="CascadingDropDown3" Category="Color" PromptText="Please select a color" ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents" TargetControlID="DropDownList3" ParentControlID="DropDownList2" runat="server">
6 </cc1:CascadingDropDown>
4)在default.aspx中添加一个UpdatePanel控件,并在它里面添加一个Label和设定DropDownList3为其更新的触发器。代码如下:
1 <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
2 <ContentTemplate>
3 <asp:Label ID="label1" Text="[No response provided yet]" runat="server" />
4 </ContentTemplate>
5 <Triggers>
6 <asp:AsyncPostBackTrigger ControlID="DropDownList3" />
7 </Triggers>
8 </asp:UpdatePanel>
2 <ContentTemplate>
3 <asp:Label ID="label1" Text="[No response provided yet]" runat="server" />
4 </ContentTemplate>
5 <Triggers>
6 <asp:AsyncPostBackTrigger ControlID="DropDownList3" />
7 </Triggers>
8 </asp:UpdatePanel>
5)最终的界面效果如下:
6)在项目中添加Web服务,取名为CarsService.asmx。代码如下:
1 [System.Web.Script.Services.ScriptService()]
2 public class CarsService : System.Web.Services.WebService
3 {
4 // Member variables
5 private static XmlDocument _document;
6 private static object _lock = new object();
7
8 // we make these public statics just so we can call them from externally for the
9 // page method call
10 public static XmlDocument Document
11 {
12 get
13 {
14 lock (_lock)
15 {
16 if (_document == null)
17 {
18 // Read XML data from disk
19 _document = new XmlDocument();
20 _document.Load(HttpContext.Current.Server.MapPath("CarsService.xml"));
21 }
22 }
23 return _document;
24 }
25 }
26
27 public static string[] Hierarchy
28 {
29 get { return new string[] { "make", "model" }; }
30 }
31
32 /// <summary>
33 /// Helper web service method
34 /// </summary>
35 /// <param name="knownCategoryValues">private storage format string</param>
36 /// <param name="category">category of DropDownList to populate</param>
37 /// <returns>list of content items</returns>
38 [WebMethod]
39 public AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category)
40 {
41 // Get a dictionary of known category/value pairs
42 StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
43
44 // Perform a simple query against the data document
45 return AjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocument(Document, Hierarchy, knownCategoryValuesDictionary, category);
46 }
47 }
2 public class CarsService : System.Web.Services.WebService
3 {
4 // Member variables
5 private static XmlDocument _document;
6 private static object _lock = new object();
7
8 // we make these public statics just so we can call them from externally for the
9 // page method call
10 public static XmlDocument Document
11 {
12 get
13 {
14 lock (_lock)
15 {
16 if (_document == null)
17 {
18 // Read XML data from disk
19 _document = new XmlDocument();
20 _document.Load(HttpContext.Current.Server.MapPath("CarsService.xml"));
21 }
22 }
23 return _document;
24 }
25 }
26
27 public static string[] Hierarchy
28 {
29 get { return new string[] { "make", "model" }; }
30 }
31
32 /// <summary>
33 /// Helper web service method
34 /// </summary>
35 /// <param name="knownCategoryValues">private storage format string</param>
36 /// <param name="category">category of DropDownList to populate</param>
37 /// <returns>list of content items</returns>
38 [WebMethod]
39 public AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category)
40 {
41 // Get a dictionary of known category/value pairs
42 StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
43
44 // Perform a simple query against the data document
45 return AjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocument(Document, Hierarchy, knownCategoryValuesDictionary, category);
46 }
47 }
7)按下CTRL+F5,在浏览器里查看本页。