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

		}

效果图　　

然后可以自己加一起图标，比如二级的