今天做一个管理后台菜单,想着要用无限极分类,记得园子里还是什么地方见过这种写法,可今天找了半天也没找到,没办法静下心来自己写了:
首先创建节点类(我给它取名:AdminUserTree):
/// <summary>
/// 无限极节点类
/// </summary>
public class AdminUserTree
{
/// <summary>
/// 节点信息
/// </summary>
public int NodeID { get; set; }
/// <summary>
/// 节点名称
/// </summary>
public string NodeName { get; set; }
/// <summary>
/// 父节点ID
/// </summary>
public int ParentID { get; set; }
/// <summary>
/// 对应的链接地址
/// </summary>
public string Url { get; set; }
public int? PermissionID { get; set; }
public int? OrderID { get; set; }
public string Location { get; set; }
public string comment { get; set; }
public string ImageUrl { get; set; }
/// <summary>
/// 层级
/// </summary>
public int level { get; set; }
/// <summary>
/// 子节点数目(很重要)
/// </summary>
public int childNumberl { get; set; } /// <summary>
/// 子节点 (子节点是一个List)这种用法叫什么?
/// </summary>
public List<AdminUserTree> childNode { get; set; }
}
为无限极分类填充数据,由于考虑到示来管理后台每个页面都会调用到,这里我为控制器创建了一个基类方法
/// <summary>
/// 管理页面基类(MVC Controller)
/// </summary>
public class AdminBase: Controller
{
/// <summary>
/// EF数据访问配置
/// </summary>
private readonly ApplicationDbContext _basecontext; /// <summary>
/// 管理菜单 这里是基数,声明为属性以便控制器里面可以用到
/// </summary>
public AdminUserTree leftMenu { get; set; } public AdminBase(ApplicationDbContext context)
{
_basecontext = context;
//初始化无限极分类管理菜单
buildtree();
} /// <summary>
/// 建立无限极节点树-管理菜单
/// </summary>
public void buildtree()
{
AdminUserTree result = new AdminUserTree();
//初始化一个节点做为根节点
result.NodeID = ;
result.NodeName= "管理员菜单";
result.Url = "";
result.ParentID = -;
result.Location = "";
result.OrderID = ;
result.comment = "";
result.ImageUrl = "";
result.PermissionID = ;
result.level = ;
result.childNumberl = ;
//把根节点传递给递归方法去创建子节点
result.childNode=BuildMenuTree(result, -);
leftMenu = result;
} /// <summary>
/// 递归创建子节点方法
/// </summary>
/// <param name="node">要为其分配子节点的父级节点</param>
/// <param name="levelID">层级关系</param>
/// <returns></returns>
protected List<AdminUserTree> BuildMenuTree(AdminUserTree node, int levelID)
{
var listtree = _basecontext.Admintree; //从数据库中取出node节点的全部子节点 条件:m.ParentID==node.NodeID
List<AdminUserTree> lt = listtree.Where(m => m.ParentID==node.NodeID )
.Select(m=>new AdminUserTree() {
NodeID =m.NodeID
,NodeName=m.NodeName
,Url=m.Url
,ParentID=m.ParentID
,Location=m.Location
,OrderID=m.OrderID
,comment=m.comment
,ImageUrl=m.ImageUrl
,PermissionID=m.PermissionID})
.ToList(); if (lt != null)
{
//节点深度
node.level = levelID + ;
//子节点数量,便于前端递归输出时调用
node.childNumberl = lt.Count;
for (int i = ; i < lt.Count; i++)
{
//递归调用创建子节点
lt[i].childNode = BuildMenuTree(lt[i], node.level);
}
return lt; }
else {
return null;
} } }
控制器(Controller)继承及调用代码:
public class AdminTreeController : AdminBase
{
private readonly ApplicationDbContext _context; public AdminTreeController(ApplicationDbContext context):base(context)
{
_context = context;
} // GET: AdminTree
public async Task<IActionResult> Index(int id=)
{
var treelist = _context.Admintree;
var pageOption = new WeiPagerOption
{
CurrentPage = id,
PageSize = ,
Total = await treelist.CountAsync(),
RouteUrl = "/Admintree/Index",
pageNumStep =
}; //分页参数
ViewBag.PagerOption = pageOption; //无限极分类菜单绑定在这里
ViewBag.mainMenu = leftMenu; //返回主要数据
return View(await treelist.OrderByDescending(b => b.OrderID).Skip((pageOption.CurrentPage - ) * pageOption.PageSize).Take(pageOption.PageSize).ToListAsync());
}
}
View层代码:
@model IEnumerable<Hxwei.WebWQSF.Models.AdminTreeModel>
@using Hxwei.WebWQSF;
@using Hxwei.WebWQSF.Controllers;
@using System.Text;
@{
ViewData["Title"] = "菜单管理";
}
@functions
{
public string getAdminMenu(AdminUserTree node)
{
StringBuilder sb = new StringBuilder(); List<AdminUserTree> ls = node.childNode;
if(ls.Count>)
{
//遍历每个子节点以输出,这里用到了排序ls.OrderBy(m => m.OrderID)
foreach (var r in ls.OrderBy(m => m.OrderID))
{
if (r.childNumberl > )
{
//当存在子菜单时的方法,这里会有递归调用
sb.Append("<div class=\"btn-group\">");
sb.Append("<button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\">");
sb.Append(r.NodeName);
sb.Append("<span class=\"caret\"></span>");
sb.Append("</button>");
sb.Append("<ul class=\"dropdown-menu\" role=\"menu\">");
//递归调用
sb.Append(getAdminMenu(r));
sb.Append("</ul>");
sb.Append("</div>"); }
else
{
//当不存在子菜单时输出
string ntext = string.Format("<li><a href=\"{0}\">{1}</a></li>",r.Url,r.NodeName);
sb.Append(ntext); }
} } return sb.ToString();
}
}
<div class="row">
<div class="col-md-3 navbar-inverse">
<div class="btn-group-vertical col-md-10"> <button type="button" class="btn btn-default">@ViewBag.mainMenu.NodeName</button>
@Html.Raw(getAdminMenu(ViewBag.mainMenu)); </div> </div>
<div class="col-md-9">
<h2>Index</h2> <p>
<a asp-action="Create">Create New</a>
</p>
<table class="table">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.NodeName)
</th>
<th>
@Html.DisplayNameFor(model => model.ParentPath)
</th>
<th>
@Html.DisplayNameFor(model => model.OrderID)
</th>
<th>
@Html.DisplayNameFor(model => model.Url)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.NodeName)
</td>
<td>
@Html.DisplayFor(modelItem => item.ParentPath)
</td>
<td>
@Html.DisplayFor(modelItem => item.OrderID)
</td>
<td>
@Html.DisplayFor(modelItem => item.Url)
</td>
<td>
<a asp-action="Edit" asp-route-id="@item.NodeID">Edit</a> |
<a asp-action="Details" asp-route-id="@item.NodeID">Details</a> |
<a asp-action="Delete" asp-route-id="@item.NodeID">Delete</a>
</td>
</tr>
}
</tbody>
<tr><td colspan="" align="center"><pager pager-option="ViewBag.PagerOption as WeiPagerOption"></pager></td></tr>
</table>
</div>
</div>
最后生成的菜单浏览器展示效果如下:
写了很久简单三层,最近决定用一下ASP.NET MVC,最近刚了解了一下ASP.NET MVC,目前最新的算是ASP.NET Core MVC,这个例子就是刚刚安装了VS2017 RC后用ASP.NET Core MVC来实现的。学习阶段希望与各位大神共勉,有不足的地方请多多指教!谢谢!
在做完这个类子后,我觉得后续还有可以优化的地方,我是从这几个方面考虑的,希望高手给予指点:
1.这里在构建无限极分类树时我是多次调用数据库查询,如果数据量小的话想着是把数据一次取出然后传递后递归方法进行操作;由于用了EF,对于EF我也是个新手,只是刚刚会用,不知道EF本身会不会对这种类型的操作进行优化及数据缓存。
2.第二个方面是在无限极分类树数据真充好后由于每个管理页面都要调用这个树的数据,考虑要对其进行缓存,如何缓存是我下一步要考虑的方法;
3.同时每个节点的权限不同,由于每个用户角色的不同权限所能调用的菜单功能也不一致,这就存在了是为每一个用户都缓存一棵树还是全局共享一棵树的问题,显然前者是不科学的,应该是全员共享一棵树的数据,只需要在View层显示时加以权限判断就可以了。这也是我在下一步要考虑的。
后续会先解决以上提到第2和第3方面的问题,等我写好后再把代码分享出来,大家一起讨论!