准备

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

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>

.Net Core Razor动态菜单实现的更多相关文章

  1. ASP。使用依赖注入的asp.net Core 2.0用户角色库动态菜单管理

    下载source code - 2.2 MB 介绍 在开始这篇文章之前,请阅读我的前一篇文章: 开始使用ASP.NET Core 2.0身份和角色管理 在上一篇文章中,我们详细讨论了如何使用ASP.N ...

  2. SAAS云平台搭建札记: (三) AntDesign + .Net Core WebAPI权限控制、动态菜单的生成

    我们知道,当下最火的前端框架,非蚂蚁金服的AntDesign莫属,这个框架不仅在国内非常有名,在国外GitHub上React前端框架也排名第一.而且这个框架涵盖了React.Vue.Angular等多 ...

  3. 学习ASP.NET Core Razor 编程系列七——修改列表页面

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  4. C# -- HttpWebRequest 和 HttpWebResponse 的使用 C#编写扫雷游戏 使用IIS调试ASP.NET网站程序 WCF入门教程 ASP.Net Core开发(踩坑)指南 ASP.Net Core Razor+AdminLTE 小试牛刀 webservice创建、部署和调用 .net接收post请求并把数据转为字典格式

    C# -- HttpWebRequest 和 HttpWebResponse 的使用 C# -- HttpWebRequest 和 HttpWebResponse 的使用 结合使用HttpWebReq ...

  5. ASP.NET Core Razor页面禁用防伪令牌验证

    在这篇短文中,我将向您介绍如何ASP.NET Core Razor页面中禁用防伪令牌验证. Razor页面是ASP.NET Core 2.0中增加的一个页面控制器框架,用于构建动态的.数据驱动的网站: ...

  6. 学习ASP.NET Core Razor 编程系列一

    一. 概述 .NET Core 1.0发布的时候就想进行学习的,不过根据微软的以往的发布规律1.0版可以认为是大众测试版,2.0才算稳定.现在2.1都已经发布了预览版,之前对其"不稳定&qu ...

  7. 学习ASP.NET Core Razor 编程系列二——添加一个实体

    在Razor页面应用程序中添加一个实体 在本篇文章中,学习添加用于管理数据库中的书籍的实体类.通过实体框架(EF Core)使用这些类来处理数据库.EF Core是一个对象关系映射(ORM)框架,它简 ...

  8. 学习ASP.NET Core Razor 编程系列六——数据库初始化

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

  9. 学习ASP.NET Core Razor 编程系列九——增加查询功能

    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...

随机推荐

  1. 对原型链的理解?prototype上都有哪些属性?

    在js里,继承机制是原型继承.继承的起点是 对象的原型(Object prototype). 一切皆为对象,只要是对象,就会有 proto 属性,该属性存储了指向其构造的指针. Object prot ...

  2. JSBridge通信原理, 有哪几种实现的方式?

    JsBridge给JavaScript提供了调用Native功能,Native也能够操控JavaScript.这样前端部分就可以方便使用地理位置.摄像头以及登录支付等Native能力啦.JSBridg ...

  3. Java中8种基本数据类型是哪些

    1 public class Ceshi { 2 int a; 3 double b; 4 boolean c; 5 char d; 6 float f; 7 byte e; 8 long h; 9 ...

  4. 什么是通用 SQL 函数?

    1.CONCAT(A, B) – 连接两个字符串值以创建单个字符串输出.通常用于将两个 或多个字段合并为一个字段. 2.FORMAT(X, D)- 格式化数字 X 到 D 有效数字. 3.CURRDA ...

  5. 遇到的问题之“解决tomcat中文乱码问题”

    方案1:在server.xml中添加了 URIEncoding="UTF-8" 属性 路径:C:\stop\apache-tomcat-8.5.69\conf 修改内容 如若方案1 ...

  6. HTML5摇一摇(上)—如何判断设备摇动

    刚刚过去的一年里基于微信的H5营销可谓是十分火爆,通过转发朋友圈带来的病毒式传播效果相信大家都不太陌生吧,刚好最近农历新年将至,我就拿一个"摇签"的小例子来谈一谈HTML5中如何调 ...

  7. python-验证6174猜想

    [题目描述]1955年,卡普耶卡(D.R.Kaprekar)对4位数字进行了研究,发现一个规律:对任意各位数字不相同的4位数,使用各位数字能组成的最大数减去能组成的最小数,对得到的差重复这个操作,最终 ...

  8. uniapp最简单的上拉加载更多demo

    data() { return { list:[],//数据列表 page: 1,//页数 } }, //请求一下数据(进入页面请求一次) onLoad() { this.getnewsList(th ...

  9. Blazor组件自做三 : 使用JS隔离封装ZXing扫码

    Blazor组件自做三 : 使用JS隔离封装ZXing扫码 本文基础步骤参考前两篇文章 Blazor组件自做一 : 使用JS隔离封装viewerjs库 Blazor组件自做二 : 使用JS隔离制作手写 ...

  10. PostgreSQL执行计划:Bitmap scan VS index only scan

    之前了解过postgresql的Bitmap scan,只是粗略地了解到是通过标记数据页面来实现数据检索的,执行计划中的的Bitmap scan一些细节并不十分清楚.这里借助一个执行计划来分析bitm ...