使用WTM（ASP.NET Core）框架四步完成树形菜使用及制作增删查改功能

2024-03-04 07:18
文章标签 使用 功能 core 完成 框架 制作 asp net 四步 增删 树形 查改 wtm

本文主要是介绍使用WTM（ASP.NET Core）框架四步完成树形菜使用及制作增删查改功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、创建模型

1、在XXX.Model 项目中创建树形菜单类，继承BasePoco类和ITreeData接口。官方文档地址：点击进入

 2、在XXX.DataAccess项目中注册表。EF基本操作，这里就不多说了。

/// <summary>/// 单位表/// </summary>public class UnitWork: BasePoco,ITreeData<UnitWork>{/// <summary>/// 单位名称/// </summary>[Display(Name = "部门名称")]public string UnitWorkName { get; set; }/// <summary>/// 子菜单/// </summary>public List<UnitWork> Children { get; set; }/// <summary>/// 子项/// </summary>[Display(Name = "上级部门")]public UnitWork Parent { get; set; }/// <summary>/// 子项ID/// </summary>[Display(Name = "上级部门")]public Guid? ParentId { get; set ; }}

二、 新建视图模型，为控制器提供数据源。

在XXX.ViewModel项目中新建视图类，继承自BaseCRUDVM类。官方文档地址：点击进入

可以把CURD逻辑封装在此类中，也可以直接写到控制器中。（建议封装到视图类中。）这里为了方便，和更灵活的使用WTM数据库上下文，我写到控制器中。

  • Tree可以根据绑定Field字段的类型判断是单选模式还是多选模式，通过 Items 属性设置数据源，Items需要绑定一个List
  • TreeSelectListItem 是框架提供的辅助类，有 Id，Text，Url，Children等属性
  • 继承了ITreeData接口的模型，可以方便的调用框架提供的函数生成Tree控件需要的数据格式,
  • 比如 DC.Set<T>().GetTreeSelectListItems( LoginUserInfo.DataPrivileges, null, x=>x.DepName) 直接读库并生成一个List
public class TestTreeVM : BaseCRUDVM<UnitWork>{     public List<TreeSelectListItem> AllParents { get; set; }/// <summary>/// 生成树形菜单数据/// </summary>protected override void InitVM(){AllParents = DC.Set<UnitWork>().GetTreeSelectListItems(LoginUserInfo?.DataPrivileges, null, y => y.UnitWorkName);}      }

三、新建树形菜单CURD控制器

1、将控制器的继承修改为BaseController 

2、注意控制器中返回的视图，如果想完美继续使用WTM框架自带的layui后台菜单，建议使用 return PartialView();

public class TestVMController : BaseController{/// <summary>/// 首页/// </summary>/// <returns></returns>public IActionResult Index(){var vm = CreateVM<TestTreeVM>();return PartialView(vm);}/// <summary>/// 新增子菜单/// </summary>/// <param name="name">子菜单名</param>/// <param name="id">上级菜单主键</param>/// <returns></returns>[HttpPost]public IActionResult Add(string name, string id){UnitWork unit = new UnitWork{ParentId = new Guid(id),ID = new Guid(),UnitWorkName = name};DC.AddEntity(unit);int x = DC.SaveChanges();if (x > 0){return Content("添加成功");}return Content("添加失败");}/// <summary>/// 新增顶级菜单/// </summary>/// <param name="name">顶级菜单名称</param>/// <returns></returns>[HttpPost]public IActionResult AddTop(string name){UnitWork unit = new UnitWork{ID = new Guid(),UnitWorkName = name};DC.AddEntity(unit);int x = DC.SaveChanges();if (x > 0){return Content("添加成功");}return Content("添加失败");}/// <summary>/// 修改菜单/// </summary>/// <param name="name">修改名称</param>/// <param name="id">菜单主键</param>/// <returns></returns>[HttpPost]public IActionResult Edit(string name, string id){UnitWork unit = DC.Set<UnitWork>().FirstOrDefault(x => x.ID.ToString() == id);unit.UnitWorkName = name;DC.UpdateEntity(unit);int x = DC.SaveChanges();if (x > 0){return Content("修改成功");}return Content("修改失败");}/// <summary>/// 单独删除菜单（若菜单下有分支，无法删除）/// </summary>/// <param name="id">菜单主键</param>/// <returns></returns>[HttpPost]public IActionResult Del(string id){UnitWork unit = DC.Set<UnitWork>().FirstOrDefault(x => x.ID.ToString() == id);DC.DeleteEntity(unit);DC.CascadeDelete(unit);int x = DC.SaveChanges();if (x > 0){return Content("删除成功");}return Content("删除失败");}/// <summary>/// 删除菜单，（若菜单下有分支，连分支一起删除）/// </summary>/// <param name="id"></param>/// <returns></returns>[HttpPost]public IActionResult DelAll(string id){UnitWork unit = DC.Set<UnitWork>().FirstOrDefault(x => x.ID.ToString() == id);DC.CascadeDelete(unit);int x = DC.SaveChanges();if (x > 0){return Content("删除成功");}return Content("删除失败");}}

四、添加视图，完成树形菜单操作。

和平时使用cshtml页面一样，使用强类型视图，值得注意是WTM框架独有的TagHelper封装。 

如果是采用BaseCRUDVM<T>的视图类，那么使用T类中的字段只需要使用Entity.字段名就可以了。无需二次编写代码。

@model HiddenPerils.ViewModel.HomeVMs.TestTreeVM
@{ViewData["Title"] = "Index";
}<h1>树形菜单管理</h1><wt:treecontainer items="AllParents" click-func="SetText"><wt:textbox field="Entity.UnitWorkName" /><wt:hidden field="Entity.ID" /><wt:row items-per-row="ItemsPerRowEnum.Six"><wt:SubmitButton Text="添加顶级菜单" IsLink="false" Click="AddTop()" /><wt:SubmitButton Text="删除" IsLink="false" Click="Del()" /><wt:SubmitButton Text="添加字节点" IsLink="false" Click="Add()" /><wt:SubmitButton Text="修改名称" IsLink="false" Click="Edit()" /><wt:SubmitButton Text="删除全部（含子节点）" IsLink="false" Click="DelAll()" /></wt:row></wt:treecontainer><script>function SetText(data) {$('#TestTreeVM_Entity_UnitWorkName').val(data.data.title);$('#TestTreeVM_Entity_ID').val(data.data.id);}function AddTop() {var name = $('#TestTreeVM_Entity_UnitWorkName').val();$.ajax({url: '/TestVM/AddTop',type: 'POST',// 设置的是请求参数data: { name: name },// 用于设置响应体的类型 注意 跟 data 参数没关系！！！dataType: 'text',success: function (res) {if (res == '添加成功') {openWindow(res);}}})}function Del() {var id = $('#TestTreeVM_Entity_ID').val();$.ajax({url: '/TestVM/Del',type: 'POST',// 设置的是请求参数data: { id: id },// 用于设置响应体的类型 注意 跟 data 参数没关系！！！dataType: 'text',success: function (res) {console.log(res);if (res == '删除成功') {window.location.reload()}}})}function Add() {var id = $('#TestTreeVM_Entity_ID').val();var name = $('#TestTreeVM_Entity_UnitWorkName').val();$.ajax({url: '/TestVM/Add',type: 'POST',// 设置的是请求参数data: { id: id, name: name },// 用于设置响应体的类型 注意 跟 data 参数没关系！！！dataType: 'text',success: function (res) {console.log(res);if (res == '添加成功') {window.location.reload()} else {alert(res)}}})}function Edit() {var id = $('#TestTreeVM_Entity_ID').val();var name = $('#TestTreeVM_Entity_UnitWorkName').val();$.ajax({url: '/TestVM/Edit',type: 'POST',// 设置的是请求参数data: { id: id, name: name },// 用于设置响应体的类型 注意 跟 data 参数没关系！！！dataType: 'text',success: function (res) {console.log(res);if (res == '修改成功') {window.location.reload()} else {alert(res)}}});}function DelAll() {var id = $('#TestTreeVM_Entity_ID').val();var name = $('#TestTreeVM_Entity_UnitWorkName').val();$.ajax({url: '/TestVM/DelAll',type: 'POST',// 设置的是请求参数data: { id: id, name: name },// 用于设置响应体的类型 注意 跟 data 参数没关系！！！dataType: 'text',success: function (res) {console.log(res);if (res == '删除成功') {window.location.reload()} else {alert(res)}}});}function openWindow(title) {layui.use('layer', function () {layer.open({type: 1, offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset, id: 'layerDemo' + title //防止重复弹出, content: '<div style="padding: 20px 100px;">' + title + '</div>', btn: '关闭全部', btnAlign: 'c' //按钮居中, shade: 0 //不显示遮罩, yes: function () {window.location.reload()}});});}
</script>

 最终效果

结尾：

1、树形菜单官方文档地址：点击进入

2、树形导航官当文档地址：点击进入

这篇关于使用WTM（ASP.NET Core）框架四步完成树形菜使用及制作增删查改功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/772394。

相关文章

中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
hdu1011（背包树形DP）

hdu1011（背包树形DP）

没有完全理解这题， m个人，攻打一个map，map的入口是1，在攻打某个结点之前要先攻打其他一个结点 dp[i][j]表示m个人攻打以第i个结点为根节点的子树得到的最优解 状态转移dp[i][ j ] = max(dp[i][j], dp[i][k]+dp[t][j-k]),其中t是i结点的子节点 代码如下： #include<iostream>#include<algorithm
阅读更多...
C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页： 南桥几晴秋 🌈C++专栏： 南桥谈C++ 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据库学习专栏： 南桥谈MySQL 🌈Qt学习专栏： 南桥谈Qt 🌈菜鸡代码练习： 练习随想记录 🌈git学习： 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
pdfmake生成pdf的使用

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据，将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma
阅读更多...
零基础学习Redis(10) -- zset类型命令使用

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合，内部除了存储元素外，还会存储一个score，存储在zset中的元素会按照score的大小升序排列，不同元素的score可以重复，score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2