一、前言
使用动态目录树可以使左边栏中的目录更加灵活，本文介绍如何将目录保存在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(); }
3. 在Controller使用
public class HomeController : Controller { private readonly TreeMenuNode2 _options; public HomeController(IOptionsSnapshot<TreeMenuNode2> optionsAccessor) { _options = optionsAccessor.Value; } }
四、重组格式，生成目录树
在后台生成<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。
在Web使用时，可组件成一个String，存在于ViewBag.TreeMenu中，再传入到页面端的相应位置。