• 章节:10
  • 访问:4158
  • 时长:00:29:14
  • 日期:2018-06-15 09:24

我们应该有两种方案可以实现。就是再顶部增加一级菜单的按钮。

然后点击不同的一级菜单的时候 要达到一个更换左侧菜单的功能。

我们可以让左侧菜单是一个独立页面。也可以动态去后台获取不同的一级菜单下面的不同的二级菜单。然后通过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>

}


图片3.png