入门实战-权限管理之整理菜单导航控制显示

这系列的教程最开始就是从一个菜单功能讲起的，最后也在此功能上结束。导航菜单现在都是静态的，在默认的_Layout.cshtml文件中，它的静态代码结构是这样的：

<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Manager" asp-action="Index">用户管理</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="ManagerRole" asp-action="Index">角色管理</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Menu" asp-action="Index">菜单管理</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Article" asp-action="Index">文章管理</a>
</li>

 

现在，我通过程序的方式控制代码输出显示，变成动态的结构形式，我采用2种方式实现动态菜单，一个是采用Html.Partial的形式来实现局部视图代码，一个是采用ViewCommpent的形式来实现。

（1）.现在导航_Layout.cshtml文件中，导航代码部分做个修改：

Html.PartialAsync()此处调用需要2个参数，一个是局部视图的名称，一个是数据对象；

（2）.我们还在Shared文件夹下新建一个视图

_Nav.cshtml代码改为：

@using RjWebCms.Models.Roles;
@model RoleMenuView[]

@if(Model !=null)
{ 
    foreach (var item in Model)
    {
        <li class="nav-item">
            <a class="nav-link text-dark" href="@item.MenuUrl">@item.MenuName</a>
        </li>
        }
}
@*<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="ManagerRole" asp-action="Index">角色管理1</a>
</li>
<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="Menu" asp-action="Index">菜单管理1</a>
</li>
<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="Article" asp-action="Index">文章管理1</a>
</li>*@

 

 

其实这段代码就是从原来的_Layout.cshtml中拷贝过来的，然后在_Nav.cshtml中需要改成动态输出。

（3）. Html.PartialAsync()的第二个参数数据模型是这样生成的

（3.1）在HomeController.cs中的Index的Action中，定义了一个ViewBag数据，当然你改成ViewData也行的通。

（3.2）补充好_rolePermissionService.GetRoleMenus(int.Parse(RoleId));对应的函数，注意，在HomeController中注入RolePermissionService

（3.3）.在RolePermissionService.cs中添加一个GetRoleMenus(int roleid)函数，目的就是找出该角色的菜单列表来。

注意，这里为菜单的需要，建了一个RoleMenuView的ModelView对象，物理表RolePermission只是存储2个关键字段，RoleId和MenuId，无法满足我们同时还需要名称，Url等信息。

    public class RoleMenuView 
    {
        public int RoleId { get; set; }
        public string RoleName { get; set; }
        public int MenuId { get; set; }
        public string MenuName { get; set; }
        public string MenuUrl { get; set; }
    }

 

可以把第三步的过程反过来看，就也能进一步了解导航动态实现的效果。

（4）. Component.InvokeAsync()方式，实现动态菜单。

（4.1）.第三步中的RoleMenuView类，还有RolePermissionService中的GetRoleMenus()保持不变。

（4.2）在项目根目录中新加一个文件夹：Components，里面新建一个类文件：NavViewCompoent.cs.

代码为(注意：ViewComponent(Name = "Navigation")的声明，Name值就是_Layout中引用的名称)：

    [ViewComponent(Name = "Navigation")]
    public class NavViewCompoent : ViewComponent
    {
        private readonly IRolePermissionService _rolePermissionService;
        public NavViewCompoent(IRolePermissionService rolePermissionService)
        {
            _rolePermissionService = rolePermissionService;
        }

        public IViewComponentResult Invoke()
        {
            if (User.Identity.IsAuthenticated)
            {
                string RoleId = HttpContext.User.FindFirst(ClaimTypes.Role).Value;//读取用户的Claims信息
                var menus = _rolePermissionService.GetRoleMenus(int.Parse(RoleId));
                //手动指定了路径的方式，如果是默认：return View(menus);则回自动寻找路径
                return View($"~/Views/Shared/Components/Navigation.cshtml", menus);
            }
            else
                return View($"~/Views/Shared/Components/Navigation.cshtml");
        }
    }

 

（4.3）.在Views/Shared/文件夹下（注意，如果采用默认路径，需要这样）再建文件夹Navigation，然后在其内建个default.cshtml的视图文件（代码与上面第三步的_Nav.cshtml的代码一样），用来编写像上面第3步中的_Nav.cshtml的导航文件。我是采用手动指定路径的方式，见上面NavViewCompoent的代码中的return view(),我手动指定了返回路径。

否则，就是报错：默认路径不对的错误！

（4.4）.在_Layout.cshtml中的代码为：

InvokeAsync()的参数就是[ViewComponent(Name = "Navigation")]的name值。

效果如下：

实现过程的注意事项：

1. 新建了一个专门的ViewModel用来展示导航菜单：RoleMenuView
2. Controller与_Layout.cshtml之间的传值，用了ViewBag,要注意类型的一致性;
3. 如果是列出二级菜单，注意将RoleMenuView中添加一个子菜单集合，参考将下拉框的递归功能代码。
4. 列出的菜单，将系统管理这样的没有Url的都列出了，可以通过linq条件再做次筛选。

关于Partial View(局部视图)和Compoent View(视图组件)的区别，网上有很多信息，百度，bing一下就有很多网友的讲解。