稍微有一定復雜性的系統，多級菜單都是一個必備組件。

本篇專題講述如何生成動態多級菜單的通用做法。

我們不用任何第三方的組件，完全自己構建靈活通用的多級菜單。

需要達成的效果：容易復用，可以根據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為

大家可以看到，菜單最外面的根節點是一個

, 后面跟一個和, 里面就是包裹的具體菜單。

具體菜單里面是

, 如果有子菜單通過

總結

以上是生活随笔為你收集整理的c# mvc5 view 多层_MVC5+EF6 入门完整教程13 -- 动态生成多级菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。