您的位置：首页 > 其它

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

2005-05-11 10:27 513 查看

/article/5182522.html
今天制作了一个客户端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事件中输入以下代码：

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></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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航