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

本文主要是介绍使用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）框架四步完成树形菜使用及制作增删查改功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---