در اینجا مراحل است،
- CREATE TABLE [dbo].[jquerymenu] (
- [ID] INT IDENTITY (1, 1) NOT NULL,
- [Text] NVARCHAR (50) NULL,
- [parentId] INT NULL,
- [isActive] BIT NULL
- );
- SET IDENTITY_INSERT [dbo].[jquerymenu] ON
- INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (1, N'USA', NULL, 1)
- INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (2, N'India', NULL, 1)
- INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (3, N'UK', NULL, 1)
- INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (4, N'Australia', NULL, 1)
- INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (5, N'Virginia', 1, 1)
- INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (6, N'Maryland', 1, 1)
- INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (7, N'AP', 2, 1)
- INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (8, N'MP', 2, 1)
- INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (9, N'Karnataka', 2, 1)
- INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (10, N'Bangalore', 9, 1)
- INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (11, N'Mangalore', 9, 1)
- INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (12, N'Mysore', 9, 0)
- SET IDENTITY_INSERT [dbo].[jquerymenu] OFF
- Create Proc spGetMenuData
- as
- Begin
- Select * from jquerymenu
- End
مرحله 2: ویژوال استودیو را باز کنید و یک برنامه وب خالی ASP.NET ایجاد کنید. سپس مراحل ذکر شده در زیر را دنبال کنید.
افزودن فایل کلاس
![](https://n7b3p4s2.stackpathcdn.com/UploadFile/da55bf/jqueryui-dynamic-menu/Images/Add Class File.gif)
فرم وب را اضافه کنید
![](https://n7b3p4s2.stackpathcdn.com/UploadFile/da55bf/jqueryui-dynamic-menu/Images/Add Webform.gif)
Handler را اضافه کنید
![](https://n7b3p4s2.stackpathcdn.com/UploadFile/da55bf/jqueryui-dynamic-menu/Images/Add Handler.gif)
- <connectionStrings>
- <add name="DBCS" connectionString="server=.;database=DemoDB;integrated security=SSPI" providerName="System.Data.SqlClient"/>
- </connectionStrings>
مرحله 4: در فایل کلاسی که در مرحله 2 ایجاد شده است، ویژگی های تکمیل شده خودکار ایجاد کنید.
- using System.Collections.Generic;
- namespace jQueryUIMenu
- {
- public class Menu
- {
- public int ID { get; set; }
- public string Text { get; set; }
- public int? parentId { get; set; }
- public bool isActive { get; set; }
- public List<Menu> List { get; set; }
- }
- }
مرحله 5: کد زیر را به Generic Handler اضافه کنید که داده ها را از پایگاه داده بازیابی می کند.
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Data;
- using System.Data.SqlClient;
- using System.Web.Script.Serialization;
- using System.Configuration;
- namespace jQueryUIMenu
- {
- public class MenuHandler : IHttpHandler
- {
- public void ProcessRequest(HttpContext context)
- {
- var cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
- var list = new List<Menu>();
- using (var con = new SqlConnection(cs))
- {
- var cmd = new SqlCommand("spGetMenuData", con) { CommandType = CommandType.StoredProcedure };
- con.Open();
- var dr = cmd.ExecuteReader();
- while (dr.Read())
- {
- var menu = new Menu
- {
- ID = Convert.ToInt32(dr["ID"]),
- Text = dr["Text"].ToString(),
- parentId = dr["parentId"] != DBNull.Value ? Convert.ToInt32(dr["parentId"]) : (int?)null,
- isActive = Convert.ToBoolean(dr["isActive"])
- };
- list.Add(menu);
- }
- }
- var mainList = GetMenuTree(list, null);
- var js = new JavaScriptSerializer();
- context.Response.Write(js.Serialize(mainList));
- }
- private List<Menu> GetMenuTree(List<Menu> list, int? parent)
- {
- return list.Where(x => x.parentId == parent).Select(x => new Menu
- {
- ID = x.ID,
- Text = x.Text,
- parentId = x.parentId,
- isActive = x.isActive,
- List = GetMenuTree(list, x.ID)
- }).ToList();
- }
- public bool IsReusable => false;
- }
- }
مرحله 6: کد زیر را به Body Tag Webform1.aspx اضافه کنید.
- <body>
- <form id="form1" runat="server">
- <div style="width: 150px">
- <ul id="menu"></ul>
- </div>
- </form>
- </body>
مرحله 7: فایل های هسته jQuery UI را مطابق شکل زیر اضافه کنید.
- <head runat="server">
- <title>Dynamic Menu</title>
- <script src="Scripts/jquery-1.6.4-vsdoc.js"></script>
- <script src="Scripts/jquery-1.6.4.js"></script>
- <script src="Scripts/jquery-ui-1.11.4.js"></script>
- <link href="Content/themes/base/all.css" rel="stylesheet" />
- <script type="text/javascript">
- $(document).ready(function () {
- $.ajax({
- url: 'MenuHandler.ashx',
- method: 'get',
- dataType: 'json',
- success: function (data) {
- buildMenu($('#menu'), data);
- $('#menu').menu();
- }
- });
- function buildMenu(parent, items) {
- $.each(items, function () {
- var li = $('<li>' + this.Text + '</li>');
- if (!this.isActive) {
- li.addClass("ui-state-disabled");
- }
- li.appendTo(parent);
- if (this.List && this.List.length > 0) {
- var ul = $('<ul></ul>');
- ul.appendTo(li);
- buildMenu(ul, this.List);
- }
- });
- }
- });
- </script>
- </head>
مرحله 9: Ctrl + F5 را با هم فشار دهید تا نتیجه را در مرورگر مشاهده کنید. منویی را خواهید دید که مقادیر آن از پایگاه داده پر شده است.
امیدوارم از مثال لذت برده باشید. لطفا اگر فکر می کنید می تواند برای دیگران مفید باشد به اشتراک بگذارید. همچنین در صورت هرگونه سوال نظر دهید.