今天制作了一个客户端javascript脚本控制的二级联动菜单,使用ASP.NET很容易就能制作联动菜单,但是有个很大的问题,就是当选择一级菜单时,由于ASP.NET本身的特性,选择的项目需要被提交到服务器处理,然后再返回二级菜单的内容,中间有个服务器往返的问题,同时造成页面刷新,这在网络状况不好的情况下很不利。
我个人感觉使用客户端javascript脚本控制,难点是两个菜单中的数据都是数据库中动态绑定上去的,因此如何将菜单中的数据读入到客户点脚本中也是一个问题。可以使用ASP.NET动态生成含有菜单的元素内容的script脚本,这样在客户端进行菜单选择时,全部都是客户端脚本操作,速度很快,从而提高了性能。
以下举一个例子,一级菜单显示的栏目的类别(Catalogs),每个类别下又下设了很多的栏目(Class),因此二级菜单的内容就是根据一级菜单栏目的选择显示出栏目。首先先介绍一下用到的数据表:
newscatalogs表 |
newsclass表 | |
PK |
catalogid |
classid |
|
catalogname |
classname |
|
foundname |
catalogid |
|
addTime |
addtime |
在VS中新建一个webform,页面上放置两个下拉列表框DropDownlist服务器控件,一个ID是ddlcatalogs,一个ID是ddlclasses,然后再放置一个TextBox,ID是classid,注意三个控件都要在<form></form>标记内。每次在ddlcatalogs中选择一个类别,在ddlclasses中会自动生成属于此类别下的所有栏目,选择ddlclasses中的栏目,会在classid中显示出所选择栏目的数据库id。
控件的HTML代码如下:



在页面的Page_Load事件中输入以下代码(代码是用VB.NET写的,读者如使用C#可以理解原理后自己改写):
1
'建立数据库连接
2
Dim conn As SqlConnection = New SqlConnection(ConfigurationSettings.AppSettings.Get("sqlserver")) '从web.config中读取数据库连接字符串
3
conn.Open()
4
Dim cmd As SqlCommand = New SqlCommand
5
cmd.Connection = conn
6
7
'=====================================================================================
8
'生成客户端脚本控制的联动菜单
9
'查询newscatalogs表获得所有的类别
10
Dim sqlstr As String = "SELECT catalogid, catalogname FROM newscatalogs"
11
cmd.CommandText = sqlstr
12
Dim sqlda As SqlDataAdapter = New SqlDataAdapter(cmd)
13
14
'建立临时表存储类别数据
15
Dim dtnewscatalog As DataTable = New DataTable
16
sqlda.Fill(dtnewscatalog)
17
18
'将类别数据绑定到ddlcatalogs控件
19
ddlcatalogs.DataSource = dtnewscatalog
20
ddlcatalogs.DataValueField = "catalogid"
21
ddlcatalogs.DataTextField = "catalogname"
22
If Not IsPostBack Then ddlcatalogs.DataBind()
23
24
'获取类别的个数
25
Dim cataloglegth As Integer = dtnewscatalog.Rows.Count()
26
27
'使用StringBuilder构造含客户端控制脚本的字符串
28
Dim sbscript As New System.Text.StringBuilder
29
sbscript.Append("<script><!--")
30
sbscript.Append(Environment.NewLine & "var group=new Array(" & cataloglegth & ");for (i=0; i<" & cataloglegth & "; i++){group[i] = new Array()}" & Environment.NewLine)
31
'循环从类别临时表中取出一个类别,然后在数据库中查询此类别下的栏目
32
Dim i As Integer
33
Dim j As Integer
34
Dim tempclass As DataTable
35
Dim classlegth As Integer
36
For i = 0 To cataloglegth - 1
37
sqlstr = "SELECT classid, classname FROM newsclass WHERE (catalogid = " & CInt(dtnewscatalog.Rows(i)(0)) & ")"
38
cmd.CommandText = sqlstr
39
sqlda = New SqlDataAdapter(cmd)
40
tempclass = New DataTable
41
sqlda.Fill(tempclass)
42
classlegth = tempclass.Rows.Count()
43
'将读取到的栏目数据放入客户端脚本中
44
For j = 0 To classlegth - 1
45
sbscript.Append("group[" & i & "][" & j & "]=new Option(""" & tempclass.Rows(j)(1) & """,""" & tempclass.Rows(j)(0) & """);" & Environment.NewLine)
46
Next
47
Next
48
49
'加入客户端脚本控制代码
50
sbscript.Append(Environment.NewLine & "function redirect(x){" & Environment.NewLine & "for (m=Form1.ddlclasses.options.length-1;m>0;m--){Form1.ddlclasses.options[m]=null}")
51
sbscript.Append(Environment.NewLine & "for (i=0;i<group[x].length;i++){" & Environment.NewLine & "Form1.ddlclasses.options[i]=new Option(group[x][i].text,group[x][i].value)}")
52
sbscript.Append(Environment.NewLine & "Form1.ddlclasses.options[0].selected=true;Form1.classid.value=Form1.ddlclasses.options[0].value;}")
53
54
sbscript.Append(Environment.NewLine & "function choose(x){Form1.classid.value=Form1.ddlclasses.options[x].value;}")
55
sbscript.Append(Environment.NewLine & "--></script>")
56
57
'注册客户端脚本,将脚本内容写入客户端输出流
58
Dim strscript As String = sbscript.ToString()
59
If (Not IsClientScriptBlockRegistered("clientScript")) Then
60
RegisterClientScriptBlock("clientScript", strscript)
61
End If
62
'=====================================================================================
63
64
'初始化ddlclasses中的内容
65
sqlstr = "SELECT classid, classname FROM newsclass WHERE (catalogid = " & CInt(dtnewscatalog.Rows(0)(0)) & ")"
66
cmd.CommandText = sqlstr
67
sqlda = New SqlDataAdapter(cmd)
68
69
Dim dtnewsclass As DataTable = New DataTable
70
sqlda.Fill(dtnewsclass)
71
72
ddlclasses.DataSource = dtnewsclass
73
ddlclasses.DataValueField = "classid"
74
ddlclasses.DataTextField = "classname"
75
If Not IsPostBack Then ddlclasses.DataBind()
76
77
sqlda.Dispose()
78
cmd.Dispose()
79
conn.Close()
80

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

运行一下,在浏览中选择查看源代码,即可看见程序生成的含有数据的script(模拟数据):
1
<script><!--
2
var group=new Array(5);for (i=0; i<5; i++){group[i] = new Array()}
3
group[0][0]=new Option("学院公共信息","23");
4
group[0][1]=new Option("学院公报","24");
5
group[1][0]=new Option("首页新闻","10");
6
group[1][1]=new Option("首页公告","11");
7
group[2][0]=new Option("营销快讯","12");
8
group[2][1]=new Option("营销系-教学论文","13");
9
group[2][2]=new Option("网络营销快讯","17");
10
group[2][3]=new Option("就业信息","20");
11
group[3][0]=new Option("秘书室新闻","21");
12
group[4][0]=new Option("IT技术","18");
13
group[4][1]=new Option(".net技术","19");
14
15
function redirect(x){
16
for (m=Form1.l1.options.length-1;m>0;m--){Form1.l1.options[m]=null}
17
for (i=0;i<group[x].length;i++){
18
Form1.l1.options[i]=new Option(group[x][i].text,group[x][i].value)}
19
Form1.l1.options[0].selected=true;Form1.classid.value=Form1.l1.options[0].value;}
20
function choose(x){Form1.classid.value=Form1.l1.options[x].value;}
21
--></script>

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21
