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

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

news 来源：原创 2025/6/2 10:53:55

栏目管理页面用于新建、维护及删除系统CMS管理模块的栏目信息，栏目信息用于分类管理文章，其后台控制器类ColumnController位于ShenNius.Admin.Mvc项目的Areas\Cms\Controllers内，页面文件位于同项目的Areas\Cms\Views\Column内，其中Index.cshtml页面为主页面，Modify.cshtml页面用于新建或编辑栏目信息，两个页面中调用的后台WebApi接口位于ShenNius.Admin.API项目的ColumnController，主要用到GetListPages（分页获取栏目列表）、Add、Deletes、Modify、SoftDelete、GetAllParentColumn等函数。
在这里插入图片描述

栏目管理主页面的布局如下所示，上方为工具栏，下方显示栏目数据表格。页面加载后，通过apiUtil.render函数调用WebApi函数GetListPages分页获取栏目信息，并且专门设置栏目名称列，点击该列可以触发编辑事件。页面中显示栏目层级并没有使用树形控件，而是采用空格+"|–“的形式从视觉上呈现栏目层级，该实现是在GetListPages函数内部调用ShenNius. Infrastructure项目的EntityExpand.ChildNode函数递归获取下级栏目，并调用EntityExpand. LevelName函数设置栏目名称。
在这里插入图片描述

分别定义事件处理函数处理工具栏按钮点击事件及数据行中的按钮点击事件，新建和编辑按钮调用的都是Modify.cshtml页面，而删除按钮的话，点击工具栏中的删除按钮，处理逻辑是将选中的记录软删除，后续还能在回收站中恢复，而点击数据行中的删除按钮，则是直接删除数据库中的数据，无法恢复。
在这里插入图片描述
添加按钮和编辑按钮都是用的Modify.cshtml页面，该页面加载时调用common.js内的BindParentColumn函数，通过WebApi接口GetAllParentColumn获取栏目层级列表填充下拉列表，同样和主页面中的栏目名称一样，通过在名称前加空格+”|–"表达栏目层级。点击确认保存按钮，根据编辑页面中是否存在Id字段判断是添加操作还是编辑操作，前者的话调用WebApi接口Add新建栏目，后者则调用Modify函数更新栏目信息。
在这里插入图片描述