利用ASP.Net Core中的Razor实现动态菜单

 更新时间:2022年04月28日 15:45:37   作者:微风吹过~  
这篇文章主要介绍了如何利用ASP.Net Core中的Razor实现动态菜单功能,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下

准备

1.框架

.netcore  版本 yishaadmin开源框架

2.模板 

本文模板使用adminlte3.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="#" rel="external nofollow"  rel="external nofollow"  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="#" rel="external nofollow"  rel="external nofollow"  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>

到此这篇关于利用ASP.Net Core中的Razor实现动态菜单的文章就介绍到这了,更多相关ASP.Net Core Razor动态菜单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • ASP.NET实现的生成验证码功能示例【附demo源码】

    ASP.NET实现的生成验证码功能示例【附demo源码】

    这篇文章主要介绍了ASP.NET实现的生成验证码功能,结合实例形式较为详细的分析了asp.net生成验证码的原理、步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2017-07-07
  • ASP.NET Core处理错误环境

    ASP.NET Core处理错误环境

    这篇文章介绍了ASP.NET Core处理错误环境的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-04-04
  • .Net Core日志记录之日志配置

    .Net Core日志记录之日志配置

    这篇文章介绍了.Net Core日志记录之日志配置,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • ASP.NET MVC生成静态页面的方法

    ASP.NET MVC生成静态页面的方法

    对于网站来说,生成纯html静态页面除了有利于seo外,还可以减轻网站的负载能力和提高网站性能。本篇文章主要介绍了ASP.NET MVC生成静态页面的方法,有兴趣的可以了解一下。
    2017-03-03
  • asp.net中WebResponse 跨域访问实例代码

    asp.net中WebResponse 跨域访问实例代码

    一篇朋友很久前写的asp.net中WebResponse 跨域访问示例,下面我转过来与大家一起学习学习,希望文章对大家会有帮助
    2014-01-01
  • 一个简单的ASP.NET验证码

    一个简单的ASP.NET验证码

    这篇文章主要为大家详细介绍了一个简单的ASP.NET验证码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • .NET Core中使用gRPC的方法

    .NET Core中使用gRPC的方法

    gRPC 一开始由 google 开发,是一款语言中立、平台中立、开源的远程过程调用(RPC)系统,所以叫g(google)RPC,这篇文章主要介绍了.NET Core中使用gRPC,需要的朋友可以参考下
    2022-09-09
  • asp.net汉字转拼音和获取汉字首字母的代码

    asp.net汉字转拼音和获取汉字首字母的代码

    在网上找到的好东西。以后asp.net下汉字转成拼音就方便多了
    2008-07-07
  • 一次.net core异步线程设置超时时间的实战记录

    一次.net core异步线程设置超时时间的实战记录

    这篇文章主要给大家介绍了关于.net core异步线程设置超时时间的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-02-02
  • 读取XML并绑定至RadioButtonList实现思路及演示动画

    读取XML并绑定至RadioButtonList实现思路及演示动画

    读取XML的文档,可以使用System.Data.DataSet类别中的ReadXml()方法,在aspx网页上拉一个RadioButtonList控件,用来显示XML的数据,接下来,用DataSet去读取刚才写好的获取XML文件的属性,即可完成
    2013-01-01

最新评论