ساخت منو داینامیک در ASP.net
دوشنبه 29 تیر 1394در این مقاله به بررسی نحوه ایجاد منو به صورت پویا و همچنین بدون استفاده از پایگاه داده می پردازیم. این منو شامل سطوح صفر، یک و دو است.
حال به چگونگی ایجاد یک منو پویا بدون استفاده از پایگاه داده در 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:
- ASP.net
- 5k بازدید
- 2 تشکر