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

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

news 来源：原创 2025/5/23 5:45:02

商品分类页面用于新建、维护及删除商城系统模块的商品所属分类，支持创建多级分类。商品分类页面的后台控制器类CategoryController位于ShenNius.Admin.Mvc项目的Areas\Shop\Controllers内，页面文件位于同项目的Areas\Shop\Views\Category内，其中Index.cshtml页面为主页面，Modify.cshtml页面用于新建或编辑商品分类信息，两个页面中调用的后台WebApi接口位于ShenNius.Admin.API项目的CategoryController，主要用到GetListPages（分页获取商品分类列表）、Add、Deletes、Modify、SoftDelete、GetAllParentCategory等函数。
在这里插入图片描述

商品分类主页面的布局如下所示，上方为工具栏，下方显示商品分类表格。
在这里插入图片描述

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

分别定义事件处理函数处理工具栏按钮点击事件及数据行中的按钮点击事件，添加和编辑按钮调用的都是Modify.cshtml页面，而删除按钮的话，点击工具栏中的删除按钮，处理逻辑是将选中的记录软删除，后续还能在回收站中恢复，而点击数据行中的删除按钮，则是直接删除数据库中的数据，无法恢复。
在这里插入图片描述

添加按钮和编辑按钮都是用的Modify.cshtml页面，该页面中有两个特殊的操作。首先是选择所属父级，页面加载时调用common.js内的BindParentCategory函数，调用WebApi接口GetAllParentCategory获取多级商品分类列表填充下拉列表，同样和主页面中的分类名称一样，通过在名称前加空格+"|–"表达菜单层级；第二个是上传图片，点击上传图片按钮调用ShenNius.Admin.API项目的UploadController.File函数上传分类关联的图片文件，同时基于layui的上传组件进行图片预览。
点击确认保存按钮，根据编辑页面中是否存在Id字段判断是添加操作还是编辑操作，前者的话调用WebApi接口Add新建分类，后者则调用Modify函数更新分类信息。
在这里插入图片描述