Question

asp.net mvc3 动态菜单怎么实现

/**
* 我要实现的效果是菜单栏里面只显示作为父项的菜单项
* 点击一个菜单项时，下拉菜单里面显示以这个项作为父项的所有子项
* 父项和子项的文本和链接都可以在后台更改
*/





Answer 1

asp.net mvc3 动态菜单实现方法如下：
1、查看代码
@{
ViewBag.Title = "Elixir ERP V1.0 Beta";
Layout = "~/Views/Shared/_LayoutUser.cshtml";
}
<div class="main-container">
<div class="main-wrapper">
<div class="scroll-top">
<a href="#" class="tip-top" title="Go Top"><i

class="icon-arrow-up"></i></a>
</div>
<div class="left-bar merge-left">
<!-- SEARCH BAR -->
<!-- LEFT NAV -->
@section leftnav{
}
</div>
</div>
<div class="container">
</div>
</div>

2、菜单模型
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Elixir.Models
{
public class Menu
{
public Menu()
{
MenuItems = new List<MenuItem>();
}

public int Id { get; set; }
public string Name { get; set; }
public List<MenuItem> MenuItems { get; set; }
}
}

3、菜单项
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Elixir.Models
{
public class MenuItem
{
public int Id { get; set; }
public int UserName { get; set; }
public string Name { get; set; }
public string ActionName { get; set; }
public string ControllerName { get; set; }
public string Url { get; set; }
public Menu ParentMenu { get; set; }
}
}

4、导航模型结构
<div class="left-nav">
<ul class="side-navigation accordion"
id="nav-accordion">
<li><a href="#"><i
class="icon-home"></i>Home</a></li>
<li><a href="#"><i class="icon-list-alt"></i>User
Management</a>
<ul><li><a href="#"><i
class="icon-double-angle-right"></i>Create New User</a></li>
<li><a href="#"><i
class="icon-double-angle-right"></i>Manage Users</a></li>
<li><a href="#"><i

class="icon-double-angle-right"></i>View Users</a></li>
</ul>
</li>
<li><a href="#"><i

class="icon-table-2"></i>Employee Management</a>
<ul>
<li><a href="#"><i

class="icon-double-angle-right"></i>Employee Registration</a></li>
<li><a href="#"><i

class="icon-double-angle-right"></i>Manage Employees</a></li>
<li><a href="#"><i

class="icon-double-angle-right"></i>View Employees</a></li>
</ul>
</li>
<li><a href="#"><i class="icon-columns"></i>DMIT

Management</a>
<ul>
<li><a href="#"><i

class="icon-double-angle-right"></i>Scan Management</a></li>
<li><a href="#"><i

class="icon-double-angle-right"></i>Report Generation</a></li>
</ul>
</li>
<li><a href="#"><i

class="icon-laptop"></i>Franchise Management </a>
<ul>
<li><a href="#"><i

class="icon-double-angle-right"></i>Franchise Registration</a></li>
<li><a href="#"><i

class="icon-double-angle-right"></i>Franchise Fee Management</a></li>
<li><a href="#"><i

class="icon-double-angle-right"></i>Franchise Account

Management</a></li>
</ul>
</li>
<li><a href="#"><i class="icon-font"></i>Customer

Management </a>
<ul>
<li><a href="#"><i

class="icon-double-angle-right"></i>Customer Registration</a></li>
<li><a href="#"><i

class="icon-double-angle-right"></i>Manage Customer</a></li>
</ul>
</li>
<li><a href="#"><i

class="icon-cord"></i>Counseling Management</a>
<ul>
<li><a href="#"><i

class="icon-double-angle-right"></i>Add Counseling Session</a></li>
<li><a href="#"><i

class="icon-double-angle-right"></i>Manage Counseling

Sessions</a></li>
</ul>
</li>
<li><a href="#"><i

class="icon-tools"></i>Accounts</a>
<ul>
<li><a href="#"><i

class="icon-double-angle-right"></i>Manage Income</a></li>
<li><a href="#"><i

class="icon-double-angle-right"></i>Manage Expense</a></li>
</ul>
</li>
<li><a href="#"><i

class="icon-files"></i>Reports</a>
<ul>
<li><a href="#"><i

class="icon-double-angle-right"></i>Elxir Monthly Reports</a></li>
<li><a href="#"><i

class="icon-double-angle-right"></i>Elixir Yearly Reports</a></li>
<li><a href="#"><i

class="icon-double-angle-right"></i>Franchise Monthly

Reports</a></li>
<li><a href="#"><i

class="icon-double-angle-right"></i>Franchise yearly Reports</a></li>
</ul>
</li>
</ul>
</div>

Answer 2

1.递归方式，通过根元素（一级菜单），找到自己下面的节点元素（二级菜单），如果还用则继续查询(通过就是自己调用自己，一定要有终止条件，不然会堆栈溢出，多次与数据库交互)
2、一次性把数据查询出来，绑定到ztree（要json格式的数据）上，下面是简单的使用，具体看官网实例！

追问

能不能帮我贴一个示例？或者发一个实例到我的邮。。。。箱。初学。