实现带有数据绑定的客户端脚本控制的二级联动菜单

今天制作了一个客户端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代码如下：

<p>请选择类别：<asp:DropDownList cssclass="tds" id="ddlcatalogs" onchange="redirect(this.options.selectedIndex)" runat="server" Width="144"></asp:DropDownList></P>
<p>请选择栏目：<asp:DropDownList cssclass="tds" id="ddlclasses" runat="server" Width="144" Height="160" onchange="choose(this.options.selectedIndex)"></asp:DropDownList></P>
<P><INPUT id="classid" type="text" runat="server"></P>

在页面的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

运行一下，在浏览中选择查看源代码，即可看见程序生成的含有数据的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>