今天制作了一个客户端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><!--
2var group=new Array(5);for (i=0; i<5; i++){group[i] = new Array()}
3group[0][0]=new Option("学院公共信息","23");
4group[0][1]=new Option("学院公报","24");
5group[1][0]=new Option("首页新闻","10");
6group[1][1]=new Option("首页公告","11");
7group[2][0]=new Option("营销快讯","12");
8group[2][1]=new Option("营销系-教学论文","13");
9group[2][2]=new Option("网络营销快讯","17");
10group[2][3]=new Option("就业信息","20");
11group[3][0]=new Option("秘书室新闻","21");
12group[4][0]=new Option("IT技术","18");
13group[4][1]=new Option(".net技术","19");
14
15function redirect(x){
16for (m=Form1.l1.options.length-1;m>0;m--){Form1.l1.options[m]=null}
17for (i=0;i<group[x].length;i++){
18Form1.l1.options[i]=new Option(group[x][i].text,group[x][i].value)}
19Form1.l1.options[0].selected=true;Form1.classid.value=Form1.l1.options[0].value;}
20function 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