利用ASP.Net?Core中的Razor實現(xiàn)動態(tài)菜單

更新時間：2022年04月28日 15:45:37 作者：微風(fēng)吹過~

這篇文章主要介紹了如何利用ASP.Net?Core中的Razor實現(xiàn)動態(tài)菜單功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下

準(zhǔn)備

1.框架

.netcore 版本 yishaadmin開源框架

2.模板

本文模板使用adminlte3.0，文檔地址

3.菜單表關(guān)鍵字段

id 表主鍵(當(dāng)前菜單)

ParentId 父級ID（父級菜單為0時為頂級菜單，也可能為內(nèi)容）

MenuUrl 菜單地址(只有頁面有地址，本身菜單是空)

MenuType 菜單類型（1是菜單 2是頁面 3是按鈕）

MenuIcon 圖標(biāo)樣式

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

本文是由于框架內(nèi)置菜單不支持頂級菜單顯示為內(nèi)容，以及菜單最多只支持三級菜單的問題，故進行了調(diào)整。

1.實現(xiàn)思路

下圖1區(qū)域渲染為菜單，菜單通過點擊URL將內(nèi)容填充到2區(qū)域。

2.編碼

2.1 建立渲染內(nèi)容填充方法

將傳進來的url通過ajax調(diào)用最終渲染到內(nèi)容區(qū)域（id為#Content的Div中），其中beforeSend方法顯示Loadding 可根據(jù)需要自行調(diào)整。url為{area:exists}/{controller=Home}/{action=Index}以及{controller=Home}/{action=Index}根據(jù)框架配置填寫至菜單

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，循環(huán)傳入的菜單，初始化時先獲取父級ID（ParentId）為0并且類別（MenuType）不為按鈕的菜單集合進行循環(huán)，根據(jù)menuEntity.MenuUrl判斷是否為頁面，如果依然為菜單則使用Html.PartialAsync("MenuTree"）調(diào)用自身來實現(xiàn)遞歸，第二次則根據(jù)ViewData["Menu"]傳入的當(dāng)前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 調(diào)用分布視圖

<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; " />
                            任務(wù)管理系統(tǒng)
                        </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>

到此這篇關(guān)于利用ASP.Net Core中的Razor實現(xiàn)動態(tài)菜單的文章就介紹到這了,更多相關(guān)ASP.Net Core Razor動態(tài)菜單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: