請參考來源:Building a Database Driven Hierarchical Menu using ASP.NET and SooperFish Jquery Plugin
--
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
<style type="text/css">
.Menu
{
width: 200px;
text-align: center;
border: solid 2px gray;
padding: 0px;
background-color: Silver;
cursor: hand;
font-weight: bold;
}
.MenuItem
{
width: 192px;
text-align: center;
border: solid 1px silver;
padding: 2px;
background-color: whitesmoke;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$.ajax(
{
type: "POST",
url: "ASPNET jQuery and Database Driven Accordion.aspx/GetMenus",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: CreateMenus,
error: function(err) {
alert(err.status + " - " + err.statusText);
}
});
});
function CreateMenus(results) {
results = results.d;
for (var i = 0; i < results.length; i++) {
$("<div class='Menu'>" + results[i].Text + "</div>")
.click({ MenuId: results[i].MenuId }, OnMenuClick)
.appendTo("#accordionContainer");
}
}
function OnMenuClick(event) {
$("div[id ^= 'menuItemGroup']").slideUp(500);
$.ajax(
{
type: "POST",
url: "ASPNET jQuery and Database Driven Accordion.aspx/GetMenuItems",
data: '{"menuId":"' + event.data.MenuId + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(items) {
items = items.d;
$(event.target).children().remove();
var html = "<div id='menuItemGroup" + event.data.MenuId + "' style='display:none'>";
for (var j = 0; j < items.length; j++) {
html += "<div class='MenuItem'><a href='" + items[j].NavigateUrl + "'>" +
items[j].Text + "</a></div>";
}
html += "</div>";
$(event.target).append(html);
$("#menuItemGroup" + event.data.MenuId).slideDown(500);
},
error: function(err, r, c) {
alert(err.status + " - " + err.statusText);
}
}
)
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="accordionContainer">
</div>
</form>
</body>
</html>
public class Menu
{
public int MenuId { get; set; }
public string Text { get; set; }
}
public class MenuItem
{
public int MenuId { get; set; }
public int MenuItemId { get; set; }
public string Text { get; set; }
public string NavigateUrl { get; set; }
}
public partial class ASPNET_jQuery_and_Database_Driven_Accordion : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Services.WebMethod]
public static System.Collections.Generic.List<Menu> GetMenus()
{
System.Collections.Generic.List<Menu> list = new System.Collections.Generic.List<Menu>();
for (int i = 0; i < 6; i++)
{
list.Add(new Menu() {
MenuId= i,
Text = "Menu text "+i.ToString()
});
}
return list;
}
[System.Web.Services.WebMethod]
public static System.Collections.Generic.List<MenuItem> GetMenuItems(int menuId)
{
Random r = new Random();
System.Collections.Generic.List<MenuItem> list = new System.Collections.Generic.List<MenuItem>();
for (int i = 0; i < r.Next(10); i++)
{
MenuItem mi = new MenuItem();
mi.MenuId = menuId;
mi.MenuItemId = i;
mi.Text = "Menu "+ menuId.ToString()+" --- Menu item "+ i.ToString();
mi.NavigateUrl ="http://www.testmenu.com?menuID="+menuId.ToString()+"&MenuItemID="+i.ToString() ;
list.Add(mi);
}
return list;
}
}
沒有留言:
張貼留言