bootstrap adminlte教程3：實現菜單權限管理菜單樹2-實現Menu菜單分布局

后台的左側的菜單是要根據不同的角色登錄有不同的顯示，怎么實現哩？

1.后台布局頁面的調用

首先在我所有的后台布局頁_AdminLayout 中增加一個分布局的引用

 

其中：

@Html.Action("Menu", "Menus")

　　調用Menus控制器中Menu方法

下面的:

	@RenderBody()    ///布局頁面調用的主體

　　

2.新建一個數據模型。

我是在ViewModel下新建LeftMenus.cs，其中字段為MenuRoles表中的內容,實際 我就圖方便，復制了一個Model中的Menu.cs的內容

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace jsdhh2.ViewModels
{
	public class LeftMenus
	{
		/// <summary>
		/// 菜單ID
		/// </summary>
		[Display(Name = "菜單id")]
		public string Id { get; set; }

		/// <summary>
		/// 上級ID
		/// </summary>
		[Display(Name = "上級菜單Id")]
		public string ParentId { get; set; }



		/// <summary>
		/// 名稱
		/// </summary>
		[Display(Name = "菜單名稱")]
		public string Name { get; set; }

		/// <summary>
		/// URL
		/// </summary>
		[Display(Name = "菜單網址")]

		public string Url { get; set; }

		/// <summary>
		/// 排序越大越靠后
		/// </summary>
		[Display(Name = "排序數字")]
		public int Order { get; set; }

		/// <summary>
		/// 菜單類型
		/// </summary>

		[Display(Name = "類型")]

		public string MenuType { get; set; }

		/// <summary>
		/// 創建日期
		/// </summary>
		/// 
		[Display(Name = "菜單樣式")]
		public string MenuCss { get; set; }


		[Display(Name = "菜單圖標")]
		public string MenuIcon { get; set; }
		/// <summary>
		/// 菜單類型名稱
		/// </summary>

		[Display(Name = "小標樣式")]
		public string MenuSmallCss { get; set; }


		[Display(Name = "小標內容")]
		public string MenuSmallValue { get; set; }

		public string Code { get; set; }




	}
}

　　

3.寫Menus控制器下Menu方法

// GET: Menus-layout
		//public async Task<ActionResult> Permissions(string roleNamel)
		 [ChildActionOnly]                   //局部子視圖調用
		public ActionResult Menu()
		{
			string _rolename = Session["role"].ToString();         //找到在home/index方法中存入的Session[role]值給變量
		 
			if (_rolename == "無")                     //隨便加的一個可能有問題
			{
				return NewMethod();
			}
			var menuroles = (from m in db.Menus                    ///這個地方，我干了三天，原來必須要括進來，改為.TolIST(),因為EF是延遲加載，不執行，要選ToList() 就會轉為SQL執行，也就不會產生Null,到時提示引入模型不正確。
							join mr in db.MenuRoles
							on m.Id equals mr.MenuId
							where mr.RoleName == _rolename
							select new LeftMenus { Id=m.Id, ParentId=m.ParentId, Name=m.Name, Url=m.Url, Order =m.Order, MenuType =m.MenuType, MenuCss =m.MenuCss , MenuIcon =m.MenuIcon , MenuSmallCss =m.MenuSmallCss , MenuSmallValue =m.MenuSmallValue })
							.ToList();

		 

			return View(menuroles);    //返回模型
			//return PartialView("Menu");
			//return View(await db.Menus.ToListAsync());
		}

　　5.Menu分布局的前台

按在頭部進行引用，因為用了ToList(),所以要改為：這里也相當重要呀。

@model IList<jsdhh2.ViewModels.LeftMenus>
 @{
	 Layout = null;
 }

　　為了先達到效果，我在Menu中加入了一個foreach，讀出來再說

 然后前台的遍歷就很重要了，這里再次感覺

 】 芭娜娜 Banana²º¹⁷ 老師的無私教學，呵。 因為adminlte的頭上部有好多LI，我就只復制了顯示菜單的這部份

 

	@foreach (var item in Model.Where(n => n.ParentId == null))
		{

			if (Model.Where(m => m.ParentId == item.Id).Count() == 0)
			{
				<li class="active"><a href=@item.Url><i class="fa fa-link"></i> <span>@Html.DisplayFor(modelItem => item.Name)</span></a></li>

			}
			else
			{
				<li class="treeview">
					<a href="@item.Url">
						<i class="fa fa-link"></i> <span>@Html.DisplayFor(modelItem => item.Name)</span>
						<span class="pull-right-container">
							<i class="fa fa-angle-left pull-right"></i>
						</span>
					</a>
					<ul class="treeview-menu">
				@foreach (var subitem in Model.Where(m => m.ParentId == item.Id))
					{
						<li><a href=@subitem.Url>@Html.DisplayFor(modelItem => subitem.Name)</a></li>
				}
					</ul>
</li>
			}

		}

效果圖　　

然后可以自己加一起圖標，比如二級的