一、前言
使用动态目录树可以使左边栏中的目录更加灵活，本文介绍如何将目录保存在json配置文件中，再读取出来经过处理后生成目录树。
二、数据结构
1. TreeMenuNode类名
将TreeMenuNode类设置成与json格式相对应，注意Children应为List类型。目录的内容包括MenuName,Action,Controller,Icon
public class TreeMenuNode2
{
public int MenuNumber { get; set; }
public string MenuName { get; set; }
public string ActionName { get; set; }
public string ControllerName { get; set; }
public string Icon { get; set; }
public List<TreeMenuNode2> Children { get; set; }
}
2. Json格式
作为父级目录的名称，ActionName及ControllerName设为空，方便后期处理。如无Children,需将Children设为空数据
{
"treemenu3": {
"MenuNumber": 0,
"MenuName": "左侧目录",
"ActionName": "",
"ControllerName": "",
"Icon": "fa fa-link",
"Children": [
{
"MenuNumber": 1,
"MenuName": "设备信息",
"ActionName": "",
"ControllerName": "",
"Icon": "fa fa-link",
"Children": [
{
"MenuNumber": 1000,
"MenuName": "附属设备",
"ActionName": "",
"ControllerName": "",
"Icon": "fa fa-link",
"Children": [
{
"MenuNumber": 1010,
"MenuName": "新建附属设备",
"ActionName": "Create",
"ControllerName": "Accessory",
"Icon": "fa fa-link",
"Children": []
},
{
"MenuNumber": 1020,
"MenuName": "附属设备列表",
"ActionName": "Index",
"ControllerName": "Accessory",
"Icon": "fa fa-link",
"Children": []
}
]
}
]
},
{
"MenuNumber": 2,
"MenuName": "事件管理",
"ActionName": "",
"ControllerName": "",
"Icon": "fa fa-link",
"Children": [
{
"MenuNumber": 2000,
"MenuName": "设备维护",
"ActionName": "",
"ControllerName": "",
"Icon": "fa fa-link",
"Children": [
{
"MenuNumber": 2010,
"MenuName": "新建维护信息",
"ActionName": "Create",
"ControllerName": "DeviceRepairs",
"Icon": "fa fa-link",
"Children": []
},
{
"MenuNumber": 2020,
"MenuName": "维护记录列表",
"ActionName": "Index",
"ControllerName": "DeviceRepairs",
"Icon": "fa fa-link",
"Children": []
}
]
},
{
"MenuNumber": 2100,
"MenuName": "保养维护",
"ActionName": "",
"ControllerName": "",
"Icon": "fa fa-link",
"Children": [
{
"MenuNumber": 2010,
"MenuName": "新建保养信息",
"ActionName": "Create",
"ControllerName": "Devices",
"Icon": "fa fa-link",
"Children": []
},
{
"MenuNumber": 2020,
"MenuName": "保养记录列表",
"ActionName": "Index",
"ControllerName": "DeviceRepairs",
"Icon": "fa fa-link",
"Children": []
}
]
}
]
}
]
}
}
三、配置Configuration
关于如何使用类映射配置文件的方法，请参照：https://docs.microsoft.com/en-us/aspnet/core/fundamentals/configuration#custom-config-providers
需安装的Nuget包
Microsoft.Extensions.Configuration
Microsoft.Extensions.Configuration.Json
Microsoft.Extensions.Options.ConfigurationExtensions
1.treemenu.json添加到配置
将treemenu.json保存添加到配置文件中，reloadOnChange表式在Json内容发生变化时，可使用IOptionsSnapshot。
static void Main(string[] args)
{
var builder = new ConfigurationBuilder().SetBasePath(Directory.GetCurrentDirectory()).AddJsonFile("treemenu.json");
Configuration = builder.Build();
}
在startup.cs中的配置：
public Startup(IHostingEnvironment env)
{
var builder = new ConfigurationBuilder()
.SetBasePath(env.ContentRootPath)
.AddJsonFile("treemenu.json", optional:false, reloadOnChange: true)
.AddJsonFile("appsettings.json", optional: false, reloadOnChange: true)
.AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
.AddEnvironmentVariables();
Configuration = builder.Build();
}
2.映射Json
var treeMenu3 = Configuration.GetSection("treemenu3").Get<TreeMenuNode2>();
2.1在Startup.cs
public void ConfigureServices(IServiceCollection services)
{
// Adds services required for using options.
services.AddOptions();
// Register the IConfiguration instance which MyOptions binds against.
services.Configure<TreeMenuNode2>(Configuration.GetSection("treemenu"));
// Add framework services.
services.AddMvc();
}
四、重组格式，生成目录树
在后台生成<ul></ul>格式的目录树，此处是在控制台生成相应的格式，可将输出格式复制到网页端进行测试。此处只演示了
var treeMenu2 = Configuration.GetSection("treemenu3").Get<TreeMenuNode2>();
Console.WriteLine(" <ul class=\"sidebar-menu\">");
PrintTreeMenu2(treeMenu2.Children.Find(a => a.MenuNumber == 2));
Console.WriteLine("</ul>");
private static void PrintTreeMenu2(TreeMenuNode2 treeMenu)
{
if (treeMenu != null)
{
if (!String.IsNullOrWhiteSpace(treeMenu.ActionName) && !String.IsNullOrWhiteSpace(treeMenu.ControllerName))
Console.WriteLine($"<li><a asp-action=\"{treeMenu.ActionName}\" asp-controller=\"{treeMenu.ControllerName}\"><i class=\"{treeMenu.Icon}\"></i><span>{treeMenu.MenuName}</span></a></li>");
if (treeMenu.Children != null)
{
Console.WriteLine("<li class=\"treeview\">");
if (String.IsNullOrWhiteSpace(treeMenu.ActionName) || String.IsNullOrWhiteSpace(treeMenu.ControllerName))
{
Console.WriteLine($"<a href=\"#\"><i class=\"{treeMenu.Icon}\"></i> <span>{treeMenu.MenuName}</span><span class=\"pull-right-container\"><i class=\"fa fa-angle-left pull-right\"></i></span></a>");
}
Console.WriteLine("<ul class=\"treeview-menu\">");
foreach (var item in treeMenu.Children)
PrintTreeMenu2(item);
Console.WriteLine("</ul></li>");
}
}
}
五、网页端的结果
六、结束语
该篇文章未完善，使用Web时，需在控制器的构造函数中传入（IOptions<TreeMenuNode2> optionsAccessor），还未使用IOptionsSnapshot。
在Web使用时，可组件成一个String，存在于ViewBag.TreeMenu中，再传入到页面端的相应位置。
时间： 2024-09-29 22:07:37