asp.net Core 使用Layui 框架，用 PartialView作为左侧菜单项，进行动态加载

用 PartialView作为左侧菜单项进行动态加载1. 作品展示2. 定义菜单数据模型// Models/MenuItem.cspublicclassMenuItem{publicintId{get;set;}publicstringName{get;set;}// 菜单名称publicstringIcon{get;set;}// 图标例如layui-icon layui-icon-facepublicstringUrl{get;set;}// 点击后打开的页面地址publicintParentId{get;set;}// 父级ID用于构建树形结构publicintSortOrder{get;set;}// 排序publicListMenuItemChildren{get;set;}newListMenuItem();}3. 控制器实现publicclassHomeController:Controller{privatereadonlyILoggerHomeController_logger;publicHomeController(ILoggerHomeControllerlogger){_loggerlogger;}publicIActionResultIndex(){returnView();}// 获取左侧菜单的 PartialViewpublicasyncTaskIActionResultGetLeftMenu(){// 模拟从数据库获取菜单数据实际开发中请从Service获取varmenuListawaitGetMenuDataAsync();// 构建树形结构varmenuTreeBuildTree(menuList,0);returnPartialView(_LeftMenu,menuTree);}// 模拟数据源privateTaskListMenuItemGetMenuDataAsync(){varmenusnewListMenuItem{newMenuItem{Id1,Name仪表盘,Iconlayui-icon-home,Url/Home/Dashboard,ParentId0,SortOrder1},newMenuItem{Id2,Name系统管理,Iconlayui-icon-set,Url#,ParentId0,SortOrder2},newMenuItem{Id3,Name用户管理,Iconlayui-icon-user,Url/User/Index,ParentId2,SortOrder1},newMenuItem{Id4,Name角色管理,Iconlayui-icon-group,Url/Role/Index,ParentId2,SortOrder2},newMenuItem{Id5,Name日志管理,Iconlayui-icon-log,Url/Log/Index,ParentId2,SortOrder3}};returnTask.FromResult(menus);}// 构建树形结构privateListMenuItemBuildTree(ListMenuItemsource,int?parentId){returnsource.Where(xx.ParentIdparentId).OrderBy(xx.SortOrder).Select(xnewMenuItem{Idx.Id,Namex.Name,Iconx.Icon,Urlx.Url,ParentIdx.ParentId,SortOrderx.SortOrder,ChildrenBuildTree(source,x.Id)}).ToList();}}4. 主视图 (Views/Home/Index.cshtml){ Layout null; }!DOCTYPEhtmlhtmlheadmetacharsetutf-8metanameviewportcontentwidthdevice-width, initial-scale1titleASP.NET Core Layui 后台管理/titlelinkrelstylesheethref~/lib/layui/css/layui.css/style/* 自定义样式 */.layui-layout-admin .layui-body{bottom:0;overflow:hidden;}.layui-tab-content{height:calc(100vh - 110px);padding:0;}.layui-tab-item{height:100%;}iframe{width:100%;height:100%;border:none;}/style/headbodyclasslayui-layout-bodydivclasslayui-layout layui-layout-admin!-- 顶部导航栏 --divclasslayui-headerdivclasslayui-logo后台管理系统/divulclasslayui-nav layui-layout-rightliclasslayui-nav-itemahrefjavascript:;imgsrc~/images/default-avatar.pngclasslayui-nav-img管理员/adlclasslayui-nav-childddahref基本资料/a/ddddahref修改密码/a/ddddaasp-actionLogoutasp-controllerAccount退出/a/dd/dl/li/ul/div!-- 左侧菜单容器 --divclasslayui-side layui-bg-blackidleftMenuContainerdivclasslayui-side-scroll!-- 这里将通过 Ajax 加载 PartialView --dividmenuLoadingstyletext-align:center;padding:20px;color:#ccc;iclasslayui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop/i加载菜单中.../div/div/div!-- 右侧主体内容Layui 选项卡容器 --divclasslayui-bodydivclasslayui-tablay-filtertablay-allowClosetrueulclasslayui-tab-titleliclasslayui-thislay-idhome首页/li/uldivclasslayui-tab-contentdivclasslayui-tab-item layui-showiframesrcUrl.Action(Welcome,Home)/iframe/div/div/div/div/divscriptsrc~/lib/jquery/dist/jquery.min.js/scriptscriptsrc~/lib/layui/layui.js/scriptscriptlayui.use([element,layer],function(){varelementlayui.element;varlayerlayui.layer;var$layui.$;// 加载左侧菜单loadLeftMenu();functionloadLeftMenu(){$.ajax({url:Url.Action(GetLeftMenu, Home),type:GET,success:function(html){$(#leftMenuContainer .layui-side-scroll).html(html);// 重新渲染导航菜单element.render(nav);},error:function(){$(#menuLoading).html(span stylecolor: #FF5722;菜单加载失败/span);}});}// 监听菜单点击事件通过事件委托$(document).on(click,.menu-item,function(e){e.preventDefault();varurl$(this).data(url);varname$(this).data(name);varid$(this).data(id)||tab_newDate().getTime();// 判断是否已存在选项卡if($(.layui-tab-title li[lay-idid]).length0){element.tabChange(tab,id);}else{// 新增选项卡element.tabAdd(tab,{title:name,content:iframe srcurl/iframe,id:id});element.tabChange(tab,id);}});// 选项卡切换时可以触发 iframe 的刷新可选element.on(tab(tab),function(data){console.log(切换到选项卡data.index);});});/script/body/html5. 左侧菜单 PartialView (Views/Home/_LeftMenu.cshtml)model IEnumerableMenuItemfunctions { // 递归渲染菜单的辅助方法 void RenderMenuItem(MenuItem item) { if (item.Children ! null item.Children.Any()) {liclasslayui-nav-itemahrefjavascript:;iclasslayui-icon item.Icon/ispanitem.Name/span/adlclasslayui-nav-childforeach (var child in item.Children) {ddahrefjavascript:;classmenu-itemdata-urlchild.Urldata-idchild.Iddata-namechild.Nameiclasslayui-icon child.Icon/ichild.Name/a/dd}/dl/li} else {liclasslayui-nav-itemahrefjavascript:;classmenu-itemdata-urlitem.Urldata-iditem.Iddata-nameitem.Nameiclasslayui-icon item.Icon/ispanitem.Name/span/a/li} } }ulclasslayui-nav layui-nav-treelay-filterleftMenuforeach (var menu in Model) { RenderMenuItem(menu) }/ulstyle/* 菜单图标样式 */.layui-nav-item .layui-icon{margin-right:8px;font-size:16px;}/* 子菜单缩进 */.layui-nav-child dd{padding-left:10px;}/style