در این مقاله قصد داریم یک منوی داینامیک که اطلاعات خود را از دیتابیس می خواند و همچنین زیر منوهای هر کدام را در یک برنامه ی وب فرم ایجاد کنیم .

در این مقاله قصد داریم یک منوی داینامیک که اطلاعات خود را از دیتابیس می خواند و همچنین زیر منوهای هر کدام را در یک برنامه ی وب فرم ایجاد کنیم .

برای انجام این کار ابتدا نیاز به دیتابیس دارید .اسکریپت هایی که برای این کار نیاز دارید در زیر آورده شده است

    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  

در مرحله دوم در داخل Visual Studio  یک برنامه ASP.NET Web application و از نوع Empty ایجاد می کنیم .سپس مراحل زیر را دنبال می کنیم

افزودن کلاس

افزودن webForm

افزودن Handler

با کلیک راست بر روی پروژه و Add=>newItem=>Handler یک handler برای پروژه خود ایجاد می کنیم .

برای اتصال برنامه به دیتابیس باید یک رشته اتصال در داخل Web.Config بنویسیم .البته این رشته اتصال در داخل هر فایل یا کلاسی می تواند باشد ولی استفاده از Web.Config برای امنیت بیشتر می باشد .

<configuration>
  <connectionStrings>
    <add name="DBCS" connectionString="server=.;database=dinamicMenu;integrated security =true" providerName="System.Data.SqlClient"/>
  </connectionStrings>

برای مرحله دوم که شکل آن در بالا آورده شد  یک کلاسی باید ایجاد کنیم .

 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; } 
    }

کدهای زیر را به داخل Handler اضافه می کنیم

 public class Handler1 : 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
        {
            get
            {
                return false;
            }
        }
        //public bool IsReusable = false;
    }

کد های زیر را در داخل WebForm1.aspx اضافه می کنیم

<body style="background-color:lightpink;direction:rtl;">
     <form id="form1" runat="server">
         <a href="http://barnamenevisan.org"><h3>ّبرنامه نویسان :مرجع تخصصی برنامه نویسان</h3>  </a>
         <br />
        <div style="width: 150px">  
            <ul id="menu"></ul>  
        </div>  
    </form>
</body>

در ادامه فایل های jQuery UI را به صفحه رفرنس می دهیم .

<script src="Scripts/jquery-1.6.4-vsdoc.js"></script>  
        <script src="Scripts/jquery-1.6.4.js"></script>  
        <script src="Scripts/jquery-ui.js"></script>
        <script src="Scripts/jquery-ui-1.11.4.js"></script>  
        <script type="text/javascript">  

در بالای صفحه وب فرم خود و در قسمت اسکریپت کدهای زیر را وارد می کنیم

 <script type="text/javascript">  
            //debugger 
            $(document).ready(function () {  
                $.ajax({
                  //  MenuHandler.ashx
                    url: 'Handler1.ashx',
                    method: 'get',  
                    dataType: 'json',  
                    success: function (data) {  
                        buildMenu($('#menu'), data);  
                        $('#menu').menu();  
                    }  
                });  
                //debugger
                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>  

نهایتا اگر برنامه را اجرا کنید شکل زیر را خواهید دید .می توانید با دادن استایل های به صفحه شکل منوها را زیباتر کنید