c# mvc5 view 多层_MVC5+EF6 入门完整教程13 -- 动态生成多级菜单

稍微有一定复杂性的系统，多级菜单都是一个必备组件。

本篇专题讲述如何生成动态多级菜单的通用做法。

我们不用任何第三方的组件，完全自己构建灵活通用的多级菜单。

需要达成的效果：容易复用，可以根据model动态产生。

文章提纲

概述要点 && 理论基础

详细步骤

一、分析多级目录的html结构

二、根据html结构构建data model

三、根据data model动态生成树形结构

四、解析树形结构成html

总结

概述要点 && 理论基础

要实现动态菜单，只要解决两个问题：

1. 前端调用

2. 后端可根据model生成菜单

前端调用我们通过自定义html helper的方法；

后端生成菜单我们通过Mvc的TagBuilder来实现。

一、如何自定义html helper？

前面系列文章我们专门介绍过html helpers，例如:@Html.ActionLink("linkText","someaction","somecontroller",new{ id ="123"},null)生成结果：

linkText

本次专题我们需要自定义一个html helper用来生成菜单, 命名为GetMenuHtml

View中可以通过 @Html.GetMenuHtml() 实现输出菜单的html

先简单介绍下如何实现自定义的helper, 具体过程在详细步骤中再说。

一、定义一个public static的类，在此类中再添加一个public static的方法, 首个参数为 this HtmlHelper helper，该方法就可以像普通的html helper来使用。

二、前端引入类的命名空间：

@using XEngine.Web.Utility.MenuHelper

三、在要使用的地方添加：

@Html.SayHi()

二、MVC生成html标签

我们使用TagBuilder

System.Web.Mvc命名空间下TagBuilder的使用详细介绍：

大家重点关注下方框部分，详细步骤中可以看到如何使用。

详细步骤

分成四大步骤

一、分析多级目录的html结构

首先打开一个样例，如下图

对应的html为

大家可以看到，菜单最外面的根节点是一个

具体菜单里面是