准备
1.框架
.netcore 版本 yishaadmin开源框架
2.模板
本文模板使用adminlte3.0,文档地址https://adminlte.io/docs/3.0/
3.菜单表关键字段
id 表主键(当前菜单)
ParentId 父级ID(父级菜单 为0时为顶级菜单,也可能为内容)
MenuUrl 菜单地址(只有页面有地址,本身菜单是空)
MenuType 菜单类型(1是菜单 2是页面 3是按钮)
MenuIcon 图标样式
4.菜单表实体
using Newtonsoft.Json; using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations.Schema; using System.Linq; using System.Text; using System.Threading.Tasks; using YiSha.Util; namespace YiSha.Entity.SystemManage { [Table("SysMenu")] public class MenuEntity : BaseExtensionEntity { [JsonConverter(typeof(StringJsonConverter))] public long? ParentId { get; set; } public string MenuName { get; set; } public string MenuIcon { get; set; } public string MenuUrl { get; set; } public string MenuTarget { get; set; } public int? MenuSort { get; set; } public int? MenuType { get; set; } public int? MenuStatus { get; set; } public string Authorize { get; set; } public string Remark { get; set; } [NotMapped] public string ParentName { get; set; } } }
开始开发
本文是由于框架内置菜单不支持顶级菜单显示为内容,以及菜单最多只支持三级菜单的问题,故进行了调整。
1.实现思路
下图1区域渲染为菜单,菜单通过点击URL将内容填充到2区域。
2.编码
2.1 建立渲染内容填充方法
将传进来的url通过ajax调用最终渲染到内容区域(id为#Content的Div中),其中beforeSend方法显示Loadding 可根据需要自行调整。url为{area:exists}/{controller=Home}/{action=Index}以及{controller=Home}/{action=Index}根据框架配置填写至菜单
function LoadContent(url) { if (url == null || url == "") return; $.ajax({ url: url, beforeSend: function (XHR) { $.blockUI({ message: '<div class="loaderbox"><div class="loading-activity"></div> '
+ "加载中..." + '</div>', css: { border: "none", backgroundColor: 'transparent' } }); }, success: function (data) { $("#Content").html(data); setTimeout(function () { $.unblockUI(); }, 100); }, error: function (data, status, e) { $("#Content").html("页面加载失败," + data.status + "," + url + "<br />" + data.responseText); setTimeout(function () { $.unblockUI(); }, 100); } }); }
2.2 建立分部视图
通过建立分部视图MenuTree,循环传入的菜单,初始化时先获取父级ID(ParentId)为0并且类别(MenuType)不为按钮的菜单集合进行循环,根据menuEntity.MenuUrl判断是否为页面,如果依然为菜单则使用Html.PartialAsync(“MenuTree”)调用自身来实现递归,第二次则根据ViewData[“Menu”]传入的当前id作为父级id来寻找子集,直到寻找到最后的层级。
@using System.Collections.Generic @using YiSha.Entity.SystemManage; @model List<MenuEntity> @{ if (Model.Any()) { long id = 0L; var menu = ViewData["Menu"] as MenuEntity; if (menu != null) id = menu.Id.Value; @foreach (var menuEntity in Model.Where(o => o.ParentId == id && o.MenuType != (int)MenuTypeEnum.Button)) { var icno = string.IsNullOrEmpty(menuEntity.MenuIcon) ? "fa fa-comment" : menuEntity.MenuIcon; @if (!string.IsNullOrEmpty(menuEntity.MenuUrl)) { <li class="nav-item"> <a href="#" class="nav-link" onclick="LoadContent('@menuEntity.MenuUrl')"> <i class="nav-icon @icno"></i> <p> @menuEntity.MenuName </p> </a> </li> } else { ViewData["Menu"] = menuEntity; <li class="nav-item"> <a href="#" class="nav-link"> <i class="nav-icon @icno"></i> <p> @menuEntity.MenuName <i class="fas fa-angle-left right"></i> </p> </a> <ul class="nav nav-treeview"> @await Html.PartialAsync("MenuTree", Model,new ViewDataDictionary(ViewData)) </ul> </li> } } } }
2.3 调用分布视图
<aside class="main-sidebar sidebar-dark-primary elevation-4" style="width:200px;position:fixed"> <!-- Brand Logo --> <!-- Sidebar --> <div class="sidebar"> <!-- Sidebar Menu --> <nav class="mt-2"> <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"> <!-- Add icons to the links using the .nav-icon class with font-awesome or any other icon font library --> <li class="nav-header" style="font-size:1.0rem"> <img src="~/yisha/img/logo1.png" style="width: 30px; height: 30px; " /> 任务管理系统 </li> @await Html.PartialAsync("MenuTree", Model) </ul> </nav> <!-- /.sidebar-menu --> </div> <!-- /.sidebar --> </aside> <!-- Content Wrapper. Contains page content --> <div class="content-wrapper" id="mainhead"> <div id="Content"> </div> </div>