当前位置：首页 > news >正文

ShenNiusModularity项目源码学习（21：ShenNius.Admin.Mvc项目分析-6）

news 2025/6/5 20:01:08

菜单列表页面用于新建、维护及删除系统所有模块所需的菜单信息，包括菜单名称、菜单中的按钮、菜单关联的后台服务地址及请求方式等。菜单列表页面的后台控制器类MenuController位于ShenNius.Admin.Mvc项目的Areas\Sys\Controllers内，页面文件位于同项目的Areas\Sys\Views\Menu内，其中Index.cshtml页面为主页面，Modify.cshtml页面用于新建或编辑菜单信息，两个页面中调用的后台WebApi接口位于ShenNius.Admin.API项目的MenuController，主要用到GetListPages（分页获取菜单列表）、Add、Deletes、Modify、SoftDelete等函数。
在这里插入图片描述

菜单列表主页面的布局如下所示，类似于日志管理页面，最上方为搜索栏，中间为工具栏，下发显示菜单数据表格。
在这里插入图片描述
页面加载后，通过apiUtil.render函数调用WebApi函数GetListPages分页获取菜单数据，并且专门设置菜单名称列，点击该列可以触发编辑事件。页面中显示菜单等级并没有使用树形控件，而是采用空格+"|–"的形式从视觉上呈现菜单层级，该实现是在ShenNius.Infrastructure项目的MenuRepository.GetListPagesAsync函数内，调用ChildModule函数递归获取下级菜单后，再逐一调用EntityExpand.LevelName函数处理每个菜单的菜单名称。
在这里插入图片描述

搜索框的检索事件其实也是触发表格的重载操作（table.reload），并将检索条件传递给后台获取检索结果。
分别定义事件处理函数处理工具栏按钮点击事件及数据行中的按钮点击事件，新建和编辑按钮调用的都是Modify.cshtml页面，而删除按钮的话，点击工具栏中的删除按钮，处理逻辑是将选中的记录软删除，后续还能在回收站中恢复，而点击数据行中的删除按钮，则是直接删除数据库中的数据，无法恢复。
在这里插入图片描述

新建菜单和编辑菜单都是用的Modify.cshtml页面，该页面中有两个特殊的操作时间，首先是选择所属父级，页面加载时调用common.js内的BindParentMenu函数，调用WebApi接口getAllParentMenu获取菜单列表填充下拉列表，同样和主页面中的菜单名称一样，通过在名称前加空格+"|–"表达菜单层级；第二个是选择图标，采用iconPickerFa组件选择font-awesome-4.7.0图标集合。
在这里插入图片描述