.Net Core Razor动态菜单实现

准备

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: '
 ' 
                 + "加载中..." + '', 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 + "
" + data.responseText);
                setTimeout(function () { $.unblockUI(); }, 100);
            }
        });
  }

  2.2  建立分部视图

@using System.Collections.Generic
@using YiSha.Entity.SystemManage;
@model List


@{
    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))
            {
               
class="nav-item">
                   "#" class="nav-link" onclick="LoadContent('@menuEntity.MenuUrl')">
                       class="nav-icon @icno">
                       

                           @menuEntity.MenuName
                       
                   
               

            }
            else
            {
                ViewData["Menu"] = menuEntity;
                
class="nav-item">
                    "#" class="nav-link">
                    class="nav-icon @icno">
                    

                        @menuEntity.MenuName
                        class="fas fa-angle-left right">
                    
                    
                    
class="nav nav-treeview">
                         @await Html.PartialAsync("MenuTree",
                         Model,new ViewDataDictionary(ViewData))
                    
               

            }
         }
    }
}

2.3 调用分布视图

     

        
        
class="content-wrapper" id="mainhead">
            
"Content">