准备

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. Oracle入门基础(十)一一数据库其他对象-视图/序列/索引/同义词

    SQL> --视图 SQL> create view empinfoview as select e.empno,e.ename,e.sal,e.sal*12 annsal,d.dname ...

  2. Mybaits 的优点?

    1.基于 SQL 语句编程,相当灵活,不会对应用程序或者数据库的现有设计造成任 何影响,SQL 写在 XML 里,解除 sql 与程序代码的耦合,便于统一管理:提供 XML 标签,支持编写动态 SQL ...

  3. 一、mycat介绍

    一.背景 随着时间和业务的发展,数据库中的数据量增长是不可控的,库和表中的数据会越来越大,随之带来的是更高的磁盘.IO.系统开销,甚至性能上的瓶颈,而一台服务的资源终究是有限的,因此需要对数据库和表进 ...

  4. spring-boot-learning-MongoDB

    NoSQL可以极大提高互联网系统的性能,但是它有一些致命的缺陷,其中最为严重的就是计算功能卡分有限,例如,在一个10 万数据量的List 中,我只需要满足特定条件的元素在Red is 中,使用集合或者 ...

  5. final、finalize 和 finally 的不同之处?

    final 是一个修饰符,可以修饰变量.方法和类.如果 final 修饰变量,意味着该 变量的值在初始化后不能被改变.finalize 方法是在对象被回收之前调用的方法, 给对象自己最后一个复活的机会 ...

  6. 抽象的(abstract)方法是否可同时是静态的(static), 是否可同时是本地方法(native),是否可同时被 synchronized 修饰?

    都不能.抽象方法需要子类重写,而静态的方法是无法被重写的,因此二者是矛 盾的.本地方法是由本地代码(如 C 代码)实现的方法,而抽象方法是没有实现 的,也是矛盾的.synchronized 和方法的实 ...

  7. spring重点知识分享

    前言: spring是一个轻量级的开源的控制反转(Inversion of Control,IOC)和面向切面(AOP)的容器框架,它的主要目的是简化企业开发.这两个模块使得java开发更加简单.IO ...

  8. Netty学习摘记 —— 初步认识Netty核心组件

    本文参考 我在博客内关于"Netty学习摘记"的系列文章主要是对<Netty in action>一书的学习摘记,文章中的代码也大多来自此书的github仓库,加上了一 ...

  9. simulink中scope图像显示添加图例

    1. 在scope中添加图例 (1)首先打开配置属性(configuration properties),在display下面的show legend前面打钩 这样就允许图例显示出来 (2)对scop ...

  10. 微信小程序开发:python+sanic 实现小程序登录注册

    开发微信小程序时,接入小程序的授权登录可以快速实现用户注册登录的步骤,是快速建立用户体系的重要一步.这篇文章将介绍 python + sanic + 微信小程序实现用户快速注册登录全栈方案. 微信小程 ...