利用Asp.Net AJAX的CascadingDropDown控制項結合Web Service來讀取資料
這個範例主要是利用Web Service結合AJAX的CascadingDropDown控制項來讀取資料
CascadingDropDown_CS.aspx
01 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CascadingDropDown_CS.aspx.cs"
02 Inherits="CascadingDropDown_CS" %>
03
04 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
05 <html xmlns="http://www.w3.org/1999/xhtml">
06 <head id="Head1" runat="server">
07 <title>未命名頁面</title>
08 </head>
09 <body>
10 <form id="form1" runat="server">
11 <asp:ScriptManager ID="ScriptManager1" runat="server">
12 </asp:ScriptManager>
13 <asp:DropDownList ID="DropDownList1" runat="server">
14 </asp:DropDownList>
15 <asp:DropDownList ID="DropDownList2" runat="server">
16 </asp:DropDownList>
17 <ajaxtoolkit:cascadingdropdown id="CascadingDropDown1" runat="server" category="ClassA"
18 loadingtext="載入中..." prompttext="請選擇" servicemethod="GetDropDownContentsPageMethod"
19 targetcontrolid="DropDownList1">
20 </ajaxtoolkit:cascadingdropdown>
21 <ajaxtoolkit:cascadingdropdown id="CascadingDropDown2" runat="server" category="ClassB"
22 loadingtext="載入中..." prompttext="請選擇" servicemethod="GetDropDownContentsPageMethod"
23 targetcontrolid="DropDownList2" parentcontrolid="DropDownList1">
24 </ajaxtoolkit:cascadingdropdown>
25 </form>
26 </body>
27 </html>
28
02 Inherits="CascadingDropDown_CS" %>
03
04 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
05 <html xmlns="http://www.w3.org/1999/xhtml">
06 <head id="Head1" runat="server">
07 <title>未命名頁面</title>
08 </head>
09 <body>
10 <form id="form1" runat="server">
11 <asp:ScriptManager ID="ScriptManager1" runat="server">
12 </asp:ScriptManager>
13 <asp:DropDownList ID="DropDownList1" runat="server">
14 </asp:DropDownList>
15 <asp:DropDownList ID="DropDownList2" runat="server">
16 </asp:DropDownList>
17 <ajaxtoolkit:cascadingdropdown id="CascadingDropDown1" runat="server" category="ClassA"
18 loadingtext="載入中..." prompttext="請選擇" servicemethod="GetDropDownContentsPageMethod"
19 targetcontrolid="DropDownList1">
20 </ajaxtoolkit:cascadingdropdown>
21 <ajaxtoolkit:cascadingdropdown id="CascadingDropDown2" runat="server" category="ClassB"
22 loadingtext="載入中..." prompttext="請選擇" servicemethod="GetDropDownContentsPageMethod"
23 targetcontrolid="DropDownList2" parentcontrolid="DropDownList1">
24 </ajaxtoolkit:cascadingdropdown>
25 </form>
26 </body>
27 </html>
28
CascadingDropDown_CS.aspx.cs
01
using System;
02
using System.Data;
03
using System.Configuration;
04
using System.Collections;
05
using System.Web;
06
using System.Web.Security;
07
using System.Web.UI;
08
using System.Web.UI.WebControls;
09
using System.Web.UI.WebControls.WebParts;
10
using System.Web.UI.HtmlControls;
11
using System.Web.Services;
12
using AjaxControlToolkit;
13
14
public partial class CascadingDropDown_CS : System.Web.UI.Page
15
{
16
protected void Page_Load(object sender, EventArgs e)
17
{
18
19
}
20
21 [WebMethod]
22
[System.Web.Script.Services.ScriptMethod]
23
public static CascadingDropDownNameValue[] GetDropDownContentsPageMethod(string knownCategoryValues, string category)
24
{
25
return new WebService().GetDropDownContents(knownCategoryValues, category);
26
}
27
}

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21 [WebMethod]
22

23

24

25

26

27

在App_Code裡加入一個WebService.cs檔
WebService.cs
01
using System;
02
using System.Web;
03
using System.Collections;
04
using System.Web.Services;
05
using System.Web.Services.Protocols;
06
using AjaxControlToolkit;
07
using System.Collections.Generic;
08
using System.Collections.Specialized;
09
10
/// <summary>
11
/// WebService 的摘要描述
12
/// </summary>
13
[WebService(Namespace = "http://tempuri.org/")]
14
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
15
public class WebService : System.Web.Services.WebService
16
{
17
18 public WebService()
19
{
20
21 //如果使用設計的元件,請取消註解下行程式碼
22
//InitializeComponent();
23
}
24
25 [WebMethod]
26
public CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category)
27
{
28
29 List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();
30
31 if (category == "ClassA")
32
{
33
values.Add(new CascadingDropDownNameValue("ClassA-1", "1"));
34
values.Add(new CascadingDropDownNameValue("ClassA-2", "2"));
35
values.Add(new CascadingDropDownNameValue("ClassA-3", "3"));
36
}
37
38 if (category == "ClassB")
39
{
40
StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
41
42 int modelId;
43
if (!kv.ContainsKey("ClassA") || !Int32.TryParse(kv["ClassA"], out modelId))
44
{
45
return null;
46
}
47
48 //選擇ClassA的第1個項目
49
if (modelId == 1)
50
{
51
values.Add(new CascadingDropDownNameValue("ClassA-1,ClassB-1", "1"));
52
values.Add(new CascadingDropDownNameValue("ClassA-1,ClassB-2", "2"));
53
values.Add(new CascadingDropDownNameValue("ClassA-1,ClassB-3", "3"));
54
}
55
56 //選擇ClassA的第2個項目
57
if (modelId == 2)
58
{
59
values.Add(new CascadingDropDownNameValue("ClassA-2,ClassB-1", "1"));
60
values.Add(new CascadingDropDownNameValue("ClassA-2,ClassB-2", "2"));
61
values.Add(new CascadingDropDownNameValue("ClassA-2,ClassB-3", "3"));
62
}
63
64 //選擇ClassA的第3個項目
65
if (modelId == 3)
66
{
67
values.Add(new CascadingDropDownNameValue("ClassA-3,ClassB-1", "1"));
68
values.Add(new CascadingDropDownNameValue("ClassA-3,ClassB-2", "2"));
69
values.Add(new CascadingDropDownNameValue("ClassA-3,ClassB-3", "3"));
70
}
71
72
}
73
74 return values.ToArray();
75
}
76
77
}

02

03

04

05

06

07

08

09

10


11

12

13

14

15

16

17

18 public WebService()
19

20

21 //如果使用設計的元件,請取消註解下行程式碼
22

23

24

25 [WebMethod]
26

27

28

29 List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();
30

31 if (category == "ClassA")
32

33

34

35

36

37

38 if (category == "ClassB")
39

40

41

42 int modelId;
43

44

45

46

47

48 //選擇ClassA的第1個項目
49

50

51

52

53

54

55

56 //選擇ClassA的第2個項目
57

58

59

60

61

62

63

64 //選擇ClassA的第3個項目
65

66

67

68

69

70

71

72

73

74 return values.ToArray();
75

76

77

GetDropDownContents方法可以改為兩種方式來讀取資料:
1.利用資料庫
2.利用XML