稍微有一定復(fù)雜性的系統(tǒng)，多級(jí)菜單都是一個(gè)必備組件。

本篇專題講述如何生成動(dòng)態(tài)多級(jí)菜單的通用做法。

我們不用任何第三方的組件，完全自己構(gòu)建靈活通用的多級(jí)菜單。

需要達(dá)成的效果：容易復(fù)用，可以根據(jù)model動(dòng)態(tài)產(chǎn)生。

文章提綱

概述要點(diǎn) && 理論基礎(chǔ)

詳細(xì)步驟

一、分析多級(jí)目錄的html結(jié)構(gòu)

二、根據(jù)html結(jié)構(gòu)構(gòu)建data model

三、根據(jù)data model動(dòng)態(tài)生成樹形結(jié)構(gòu)

四、解析樹形結(jié)構(gòu)成html

總結(jié)

概述要點(diǎn) && 理論基礎(chǔ)

要實(shí)現(xiàn)動(dòng)態(tài)菜單，只要解決兩個(gè)問題：

1. 前端調(diào)用

2. 后端可根據(jù)model生成菜單

前端調(diào)用我們通過自定義html helper的方法；

后端生成菜單我們通過Mvc的TagBuilder來實(shí)現(xiàn)。

一、如何自定義html helper？

前面系列文章我們專門介紹過html helpers，例如:@Html.ActionLink("linkText","someaction","somecontroller",new{ id ="123"},null)生成結(jié)果：

linkText

本次專題我們需要自定義一個(gè)html helper用來生成菜單, 命名為GetMenuHtml

View中可以通過 @Html.GetMenuHtml() 實(shí)現(xiàn)輸出菜單的html

先簡單介紹下如何實(shí)現(xiàn)自定義的helper, 具體過程在詳細(xì)步驟中再說。

一、定義一個(gè)public static的類，在此類中再添加一個(gè)public static的方法, 首個(gè)參數(shù)為 this HtmlHelper helper，該方法就可以像普通的html helper來使用。

二、前端引入類的命名空間：

@using XEngine.Web.Utility.MenuHelper

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

@Html.SayHi()

二、MVC生成html標(biāo)簽

我們使用TagBuilder

System.Web.Mvc命名空間下TagBuilder的使用詳細(xì)介紹：

大家重點(diǎn)關(guān)注下方框部分，詳細(xì)步驟中可以看到如何使用。

詳細(xì)步驟

分成四大步驟

一、分析多級(jí)目錄的html結(jié)構(gòu)

首先打開一個(gè)樣例，如下圖

對(duì)應(yīng)的html為

大家可以看到，菜單最外面的根節(jié)點(diǎn)是一個(gè)

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

具體菜單里面是

, 如果有子菜單通過

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。