Jquery+ashx动态绑定菜单-优快云博客

本文链接：https://blog.youkuaiyun.com/venustear/article/details/43937175

这篇博客展示了如何结合Jquery和ASHX处理来动态绑定HTML菜单。通过调用ASHX处理程序获取数据库中的MenuItem数据，利用JavaScript实现菜单的显示和隐藏效果，提供了一种动态生成菜单的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<head>

<title>动态绑定menu</title>

</head>

<body >

</ul>

</div>

</body>

</html>

//ashx

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data;

using System.Data.SqlClient;

using Sql;

using System.Text;

namespace Menu

{

/// <summary>

/// MenuItem 的摘要说明

/// </summary>

public class MenuItem : IHttpHandler

{

SqlDataReader dr = null; SqlDataReader subdr=null;

StringBuilder builder = new StringBuilder();

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/plain";

context.Response.Charset = "utf-8";

BindMenu(context);

}

public void BindMenu(HttpContext context)

{

string sql = "select * from MenuItem where ParentId=0";

dr = SqlHelper.GetReader(sql, null, CommandType.Text);

while (dr.Read())

{

builder.Append("<li class='mainlevel' id='" + dr.GetInt32(0).ToString() + "'><a href=#>" + dr.GetString(1) + "</a>");

BindSubMenu(dr.GetInt32(0));

}

string returnMenu = builder.ToString();

context.Response.Write(returnMenu);

dr.Close();

}

public void BindSubMenu(int parentid)

{

string subsql ="select * from MenuItem where ParentId='" + parentid + "'";

builder.Append("<ul>");

subdr=SqlHelper.GetReader(subsql, null, CommandType.Text);

while(subdr.Read())

{

string href = subdr.GetString(4);

builder.Append("<li id='" + subdr.GetInt32(0).ToString() + "'><a href='" + href + "'>" + subdr.GetString(1) + "</a></li>");

}

builder.Append("</ul></li>");

subdr.Close();

}

public bool IsReusable

{

get

{

return false;

}

//css

ul, li{padding:0; margin:0;}

#menu{ margin:1% 10% 0}

#MenuCategory {display:block;text-align:center; color:#fff;font:18px "微软雅黑"; }

#MenuCategory .mainlevel {background:#84bbe9; float:left; border-right:1px solid #fff; width:140px; list-style:none}

#MenuCategory .mainlevel a {color:#000; text-decoration:none; line-height:32px; display:block; width:140px;}

#MenuCategory .mainlevel a:hover {color:#fff; text-decoration:none; background:#062723 url(../images/nav_bg.jpg) 0 0}

#MenuCategory .mainlevel ul {display:none; position:absolute;}

#MenuCategory .mainlevel li {border-top:1px solid #fff; background:#84bbe9; width:140px; list-style:none}

//js

$(function () {

$("#MenuCategory").load("MenuItem.ashx", function (data) {

//the first way

// $('li.mainlevel').mousemove(function () {

// $(this).find('ul').slideDown();

// });

// $('li.mainlevel').mouseleave(function () {

// $(this).find('ul').slideUp();

// });

//the second way

$(".mainlevel").mouseover(function () {

$(this).children("ul").show();

});

$(".mainlevel").mouseleave(function () {

$(this).children("ul").hide();

});