ساخت منو داینامیک در ASP.net

دوشنبه 29 تیر 1394

در این مقاله به بررسی نحوه ایجاد منو به صورت پویا و همچنین بدون استفاده از پایگاه داده می پردازیم. این منو شامل سطوح صفر، یک و دو است.

ساخت منو داینامیک در ASP.net

حال به چگونگی ایجاد یک منو پویا بدون استفاده از پایگاه داده در ASP.NET می پردازیم.

مرحله اول:

نرم افزار Visual Studio را اجرا کرده و یک برنامه کاربردی تحت وب ایجاد کنید. و یک نام مناسب برای آن برگزینید.

مرحله دوم:

حال در منوی Solution Explorer برروی نام پروژه کلیک راست کرده و یک وب فرم جدید به پروژه اضافه نمایید و یک نام مناسب هم برای آن انتخاب نمایید.

مرحله سوم:

در بخش Design فرم ایجاد شده باید دستوراتی را درج کنیم.

مرحله 1-3-

دستورات CSS زیر را در بخش Head این فرم درج کنید.

<style type="text/css">  
    body   
    {     
        background-color:mediumaquamarine;  
        font-family: Arial;  
        font-size: 10pt;  
        color: #444;  
    }  
  
    .ParentMenu, .ParentMenu:hover {  
        width: 100px;  
        background-color: #fff;  
        color: #333;  
        text-align: center;  
        height: 30px;  
        line-height: 30px;  
        margin-right: 5px;  
    }  
  
        .ParentMenu:hover {  
            background-color: #ccc;  
        }  
  
    .ChildMenu, .ChildMenu:hover {  
        width: 110px;  
        background-color: #fff;  
        color: #333;  
        text-align: center;  
        height: 30px;  
        line-height: 30px;  
        margin-top: 5px;  
    }  
  
        .ChildMenu:hover {  
            background-color: #ccc;  
        }  
  
    .selected, .selected:hover {  
        background-color: #A6A6A6 !important;  
        color: #fff;  
    }  
  
    .level2 {  
        background-color: #fff;  
    }  
</style> 

 

مرحله 2-3-

از جعبه ابزار یک menu control انتخاب کرده و به فرم مورد نظر بیافزائید. و دستورات زیر را در آن درج کنید.


    <div>  
        <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">  
            <LevelMenuItemStyles>  
                <asp:MenuItemStyle CssClass="ParentMenu" />  
                <asp:MenuItemStyle CssClass="ChildMenu" />  
                <asp:MenuItemStyle CssClass="ChildMenu" />  
            </LevelMenuItemStyles>  
            <StaticSelectedStyle CssClass="selected" />  
        </asp:Menu>  
    </div>  

 

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

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DynamicMenu.aspx.cs" Inherits="DynamicMenu" %>  
  
<!DOCTYPE html>  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title>Dynamic Menu Control Article for C# Corner by Upendra Pratap Shahi</title>  
    <style type="text/css">  
        body {  
            background-color: mediumaquamarine;  
            font-family: Arial;  
            font-size: 10pt;  
            color: #444;  
        }  
  
        .ParentMenu, .ParentMenu:hover {  
            width: 100px;  
            background-color: #fff;  
            color: #333;  
            text-align: center;  
            height: 30px;  
            line-height: 30px;  
            margin-right: 5px;  
        }  
  
            .ParentMenu:hover {  
                background-color: #ccc;  
            }  
  
        .ChildMenu, .ChildMenu:hover {  
            width: 110px;  
            background-color: #fff;  
            color: #333;  
            text-align: center;  
            height: 30px;  
            line-height: 30px;  
            margin-top: 5px;  
        }  
  
            .ChildMenu:hover {  
                background-color: #ccc;  
            }  
  
        .selected, .selected:hover {  
            background-color: #A6A6A6 !important;  
            color: #fff;  
        }  
  
        .level2 {  
            background-color: #fff;  
        }  
    </style>  
</head>  
<body>  
    <form id="form1" runat="server">  
        <div>  
            <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">  
                <LevelMenuItemStyles>  
                    <asp:MenuItemStyle CssClass="ParentMenu" />  
                    <asp:MenuItemStyle CssClass="ChildMenu" />  
                    <asp:MenuItemStyle CssClass="ChildMenu" />  
                </LevelMenuItemStyles>  
                <StaticSelectedStyle CssClass="selected" />  
            </asp:Menu>  
        </div>  
    </form>  
</body>  
</html>

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

مرحله چهارم:

در بخش دستورات باید کدهایی را جهت درست کار کردن برنامه کاربردی وارد کنیم.

فضاهای نام زیر را در بخش دستورات در بخش درج کنید.


    using System.IO;  
    using System.Data;  
    using System.Data.SqlClient;  
    using System.Configuration;  

حال شکل کلی صفحه دستورات به صورت زیر خواهد بود:


    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
    using System.Web.UI;  
    using System.Web.UI.WebControls;  
    using System.IO;  
    using System.Data;  
    using System.Data.SqlClient;  
    using System.Configuration;  
      
    public partial class DynamicMenu : System.Web.UI.Page  
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            if (!IsPostBack)  
            {  
                DataTable dt = this.BindMenuData(0);  
                DynamicMenuControlPopulation(dt, 0, null);  
            }  
        }  
        /// <summary>  
        /// This function retur a datatable according to parent menu id passed by user  
        /// </summary>  
        /// <param name="parentmenuId">parent menu ID</param>  
        /// <returns>data table</returns>  
        protected DataTable BindMenuData(int parentmenuId)  
        {  
            //declaration of variable used  
            DataSet ds = new DataSet();  
            DataTable dt;  
            DataRow dr;  
            DataColumn menu;  
            DataColumn pMenu;  
            DataColumn title;  
            DataColumn description;  
            DataColumn URL;  
      
            //create an object of datatable  
            dt=new DataTable();  
      
            //creating column of datatable with datatype  
            menu= new DataColumn("MenuId",Type.GetType("System.Int32"));  
            pMenu=new DataColumn("ParentId", Type.GetType("System.Int32"));  
            title=new DataColumn("Title",Type.GetType("System.String"));  
            description=new DataColumn("Description",Type.GetType("System.String"));  
            URL=new DataColumn("URL",Type.GetType("System.String"));  
      
            //bind data table columns in datatable  
            dt.Columns.Add(menu);//1st column  
            dt.Columns.Add(pMenu);//2nd column  
            dt.Columns.Add(title);//3rd column  
            dt.Columns.Add(description);//4th column  
            dt.Columns.Add(URL);//5th column  
             
            //creating data row and assiging the value to columns of datatable  
            //1st row of data table  
            dr = dt.NewRow();  
            dr["MenuId"] = 1;  
            dr["ParentId"] = 0;  
            dr["Title"] = "Home";  
            dr["Description"] = "";  
            dr["URL"] = "~/Home.aspx";  
            dt.Rows.Add(dr);  
      
            //2nd row of data table  
            dr = dt.NewRow();  
            dr["MenuId"] = 2;  
            dr["ParentId"] = 0;  
            dr["Title"] = "Customer Service";  
            dr["Description"] = "Customer Service";  
            dr["URL"] = "~/Customer.aspx";  
            dt.Rows.Add(dr);  
      
            //3rd row of data table  
            dr = dt.NewRow();  
            dr["MenuId"] = 3;  
            dr["ParentId"] = 0;  
            dr["Title"] = "About";  
            dr["Description"] = "About us page";  
            dr["URL"] = "~/AboutUs.aspx";  
            dt.Rows.Add(dr);  
      
            //4th row of data table  
            dr = dt.NewRow();  
            dr["MenuId"] = 4;  
            dr["ParentId"] = 0;  
            dr["Title"] = "Contact Us";  
            dr["Description"] = "Contact Us page";  
            dr["URL"] = "~/Contact.aspx";  
            dt.Rows.Add(dr);  
      
            //5th row of data table  
            dr = dt.NewRow();  
            dr["MenuId"] = 5;  
            dr["ParentId"] = 0;  
            dr["Title"] = "Testmonial";  
            dr["Description"] = "Testimonial page";  
            dr["URL"] = "~/Testimonial.aspx";  
            dt.Rows.Add(dr);  
      
            //6th row of data table  
            dr = dt.NewRow();  
            dr["MenuId"] = 6;  
            dr["ParentId"] = 2;  
            dr["Title"] = "Consulting";  
            dr["Description"] = "Consulting page";  
            dr["URL"] = "~/Consult.aspx";  
            dt.Rows.Add(dr);  
      
            //7th row of data table  
            dr = dt.NewRow();  
            dr["MenuId"] = 7;  
            dr["ParentId"] = 2;  
            dr["Title"] = "Outsourcing";  
            dr["Description"] = "Outsourcing page";  
            dr["URL"] = "~/Outsource.aspx";  
            dt.Rows.Add(dr);  
      
            //8th row of data table  
            dr = dt.NewRow();  
            dr["MenuId"] = 8;  
            dr["ParentId"] = 7;  
            dr["Title"] = "Domestic";  
            dr["Description"] = "Domestic outsourcing page";  
            dr["URL"] = "~/Domestic.aspx";  
            dt.Rows.Add(dr);  
      
            //9th row of data table  
            dr = dt.NewRow();  
            dr["MenuId"] = 9;  
            dr["ParentId"] = 7;  
            dr["Title"] = "International";  
            dr["Description"] = "International outsourcing page";  
            dr["URL"] = "~/International.aspx";  
            dt.Rows.Add(dr);  
      
            ds.Tables.Add(dt);  
            var dv = ds.Tables[0].DefaultView;  
            dv.RowFilter = "ParentId='" + parentmenuId + "'";  
            DataSet ds1 = new DataSet();  
            var newdt = dv.ToTable();  
            return newdt;  
        }  
      
        /// <summary>  
        /// This is a recursive function to fetchout the data to create a menu from data table  
        /// </summary>  
        /// <param name="dt">datatable</param>  
        /// <param name="parentMenuId">parent menu Id of integer type</param>  
        /// <param name="parentMenuItem"> Menu Item control</param>  
        protected void DynamicMenuControlPopulation(DataTable dt, int parentMenuId, MenuItem parentMenuItem)  
        {  
            string currentPage = Path.GetFileName(Request.Url.AbsolutePath);  
            foreach (DataRow row in dt.Rows)  
            {  
                MenuItem menuItem = new MenuItem  
                {  
                    Value = row["MenuId"].ToString(),  
                    Text = row["Title"].ToString(),  
                    NavigateUrl = row["URL"].ToString(),  
                    Selected = row["URL"].ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase)  
                };  
                if (parentMenuId == 0)  
                {  
                    Menu1.Items.Add(menuItem);  
                    DataTable dtChild = this.BindMenuData(int.Parse(menuItem.Value));  
                    DynamicMenuControlPopulation(dtChild, int.Parse(menuItem.Value), menuItem);  
                }  
                else  
                {  
                      
                        parentMenuItem.ChildItems.Add(menuItem);  
                        DataTable dtChild = this.BindMenuData(int.Parse(menuItem.Value));  
                        DynamicMenuControlPopulation(dtChild, int.Parse(menuItem.Value), menuItem);  
                      
                }  
            }  
        }  
    }  

 

خروجی حاصل از اجرای برنامه را ببینید:

منو سطح 0:

منو سطح 1:

منو سطح 2:

 

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید