我们应该有两种方案可以实现。就是再顶部增加一级菜单的按钮。
然后点击不同的一级菜单的时候 要达到一个更换左侧菜单的功能。
我们可以让左侧菜单是一个独立页面。也可以动态去后台获取不同的一级菜单下面的不同的二级菜单。然后通过js动态添加进去。当然 也可以使用MVC里面的部分视图也是可以的。那么我们这里就使用部分视图来实现。
1 我们在左侧菜单里面 改为部分视图
@{Html.RenderAction("GetMenu");}
代码如下
<nav class="mt-2“ id=“menudata”>
@{Html.RenderAction("GetMenu");}
</nav>
给顶部的一级菜单增加点击事件
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" onclick="loadmenu();" class="nav-link">一级菜单1</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="#" onclick="loadmenu();" class="nav-link">一级菜单2</a>
</li>
</ul>
function loadmenu(id)
{
$("#menudata").load("/home/getmenu/" + id);
}
增加一个MenuInfo
public class MenuInfo
{
public int Id { set; get; }
public int Pid { set; get; }
public string Name { set; get; }
public string Link { set; get; }
}
action返回一个部分视图结果PartialViewResult
public ActionResult GetMenu(int id)
{
List<MenuInfo> lists = new List<MenuInfo>();
if (id==1)
{
lists.Add(new MenuInfo() { Id = 1, Pid = 0, Name = "网站配置" });
lists.Add(new MenuInfo() { Id = 2, Pid = 1, Name = "日志配置" });
lists.Add(new MenuInfo() { Id = 3, Pid = 1, Name = "附件配置" });
}
if (id == 2)
{
lists.Add(new MenuInfo() { Id = 4, Pid = 0, Name = "新闻管理" });
lists.Add(new MenuInfo() { Id = 5, Pid = 4, Name = "新闻分类" });
lists.Add(new MenuInfo() { Id = 6, Pid = 4, Name = "新闻劣列表" });
}
return PartialView(lists);
}
添加一个部分视图
@model IEnumerable<WebApplication1.Models.MenuInfo>
@{ var secondList = Model.ToList().Where(m => m.Pid == 0).ToList();}
@for (int i = 0; i < secondList.Count(); i++)
{
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item has-treeview menu-open">
<a href="/article/index" class="nav-link active">
<i class="nav-icon fa fa-dashboard"></i>
<p>
@secondList[i].Name
<i class="right fa fa-angle-left"></i>
</p>
</a>
@{var thirdList = Model.ToList().Where(m => m.Pid == secondList[i].Id).ToList();}
<ul class="nav nav-treeview">
@for (int j = 0; j < thirdList.Count(); j++)
{
<li class="nav-item">
<a href="./index.html" target="mainiframe" class="nav-link active">
<i class="fa fa-circle-o nav-icon"></i>
<p>@thirdList[j].Name</p>
</a>
</li>
}
</ul>
</li>
</ul>
}
