2015年7月27日 星期一

ASP.NET jQuery and Database Driven Accordion

參考引用來源:ASP.NET jQuery and Database Driven Accordion
請參考來源:Building a Database Driven Hierarchical Menu using ASP.NET and SooperFish Jquery Plugin

-- 
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head runat="server">
  4.     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
  6.     <style type="text/css">
  7.         .Menu
  8.         {
  9.             width: 200px;
  10.             text-align: center;
  11.             border: solid 2px gray;
  12.             padding: 0px;
  13.             background-color: Silver;
  14.             cursor: hand;
  15.             font-weight: bold;
  16.         }
  17.         .MenuItem
  18.         {
  19.             width: 192px;
  20.             text-align: center;
  21.             border: solid 1px silver;
  22.             padding: 2px;
  23.             background-color: whitesmoke;
  24.         }
  25.     </style>
  27.     <script type="text/javascript">
  28.         $(document).ready(function() {
  29.             $.ajax(
  30.             {
  31.                 type: "POST",
  32.                 url: "ASPNET jQuery and Database Driven Accordion.aspx/GetMenus",
  33.                 contentType: "application/json; charset=utf-8",
  34.                 dataType: "json",
  35.                 success: CreateMenus,
  36.                 error: function(err) {
  37.                     alert(err.status + " - " + err.statusText);
  38.                 }
  39.             });
  40.         });
  41.         function CreateMenus(results) {
  42.             results = results.d;
  43.             for (var i = 0; i < results.length; i++) {
  44.                 $("<div class='Menu'>" + results[i].Text + "</div>")
  45.                  .click({ MenuId: results[i].MenuId }, OnMenuClick)
  46.                  .appendTo("#accordionContainer");
  47.             }
  48.         }
  49.         function OnMenuClick(event) {
  50.             $("div[id ^= 'menuItemGroup']").slideUp(500);
  51.             $.ajax(
  52.                 {
  53.                     type: "POST",
  54.                     url: "ASPNET jQuery and Database Driven Accordion.aspx/GetMenuItems",
  55.                     data: '{"menuId":"' + event.data.MenuId + '"}',
  56.                     contentType: "application/json; charset=utf-8",
  57.                     dataType: "json",
  58.                     success: function(items) {
  59.                         items = items.d;
  60.                         $(event.target).children().remove();
  61.                         var html = "<div id='menuItemGroup" + event.data.MenuId + "' style='display:none'>";
  62.                         for (var j = 0; j < items.length; j++) {
  63.                             html += "<div class='MenuItem'><a href='" + items[j].NavigateUrl + "'>" +
  64.                             items[j].Text + "</a></div>";
  65.                         }
  66.                         html += "</div>";
  67.                         $(event.target).append(html);
  68.                         $("#menuItemGroup" + event.data.MenuId).slideDown(500);
  69.                     },
  70.                     error: function(err, r, c) {
  71.                         alert(err.status + " - " + err.statusText);
  72.                     }
  73.                 }
  74.                 )
  75.         }
  76.     </script>
  78. </head>
  79. <body>
  80.     <form id="form1" runat="server">
  81.     <div id="accordionContainer">
  82.     </div>
  83.     </form>
  84. </body>
  85. </html>
--- 
  1. public class Menu
  2. {
  3.     public int MenuId { get; set; }
  4.     public string Text { get; set; }
  5. }
  7. public class MenuItem
  8. {
  9.     public int MenuId { get; set; }
  10.     public int MenuItemId { get; set; }
  11.     public string Text { get; set; }
  12.     public string NavigateUrl { get; set; }
  13. }
  15. public partial class ASPNET_jQuery_and_Database_Driven_Accordion : System.Web.UI.Page
  16. {
  17.     protected void Page_Load(object sender, EventArgs e)
  18.     {
  20.     }
  21.     [System.Web.Services.WebMethod]
  22.     public static System.Collections.Generic.List<Menu> GetMenus()
  23.     {
  24.         System.Collections.Generic.List<Menu> list = new System.Collections.Generic.List<Menu>();
  25.         for (int i = 0; i < 6; i++)
  26.         {
  27.             list.Add(new Menu() { 
  28.                 MenuId= i,
  29.                 Text = "Menu text "+i.ToString()
  30.             });
  31.         }
  32.         return list;
  33.     }
  34.     [System.Web.Services.WebMethod]
  35.     public static System.Collections.Generic.List<MenuItem> GetMenuItems(int menuId)
  36.     {
  37.         Random r = new Random();
  38.         System.Collections.Generic.List<MenuItem> list = new System.Collections.Generic.List<MenuItem>();
  39.         for (int i = 0; i < r.Next(10); i++)
  40.         {
  41.             MenuItem mi = new MenuItem();
  42.             mi.MenuId = menuId;
  43.             mi.MenuItemId = i;
  44.             mi.Text = "Menu "+ menuId.ToString()+" --- Menu item "+ i.ToString();
  45.             mi.NavigateUrl ="http://www.testmenu.com?menuID="+menuId.ToString()+"&MenuItemID="+i.ToString() ;
  46.             list.Add(mi);
  47.         }
  48.         return list;
  49.     }
  50. }
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)