C#ASP.Net MVC3 Razor中的动态菜单

时间:2014-07-23 23:34:39

标签: c# asp.net-mvc razor

解释

我尝试做动态菜单,从数据库加载项目。 我在菜单中最多需要3个级别,如下所示:

<ul>
   <li>Home</li>
   <li>Peoples
      <ul>
         <li>Employee
            <ul>
              <li>Create</li>
              <li>List</li>
              <li>Edit</li>
            </ul>
         </li>
         <li>Training</li>
         <li>Material Requisition</li>
      </ul>
   </li>
</ul

现在,这就是我今天的表现,但没有成功:

部分视图&#34; TopBar.cshtml&#34;显示在每个页面中,并在内部调用&#34; _Layout.cshtml&#34;像这样:

_Layout.cshtml

<body>
    @Html.Partial("TopBar")
    <div class="container body-content">
        @RenderBody()
        (...)

和&#34; TopBar.cshtml &#34;使用下面的代码显示数据

@model IEnumerable<SIGO.Models.TopMenu>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <div class="SigoLogo" onclick="location.href='@Url.Action("")'">
                <a href="@Url.Action("Index", "Home")" title="Início">
                    <img src="~/Content/images/Wlogo.png" />
                </a>
            </div>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"></button>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                @if (Model != null){
                    foreach(var item in Model.Where(p => p.Nivel == 0)) {
                        if (Model.Where(s1 => s1.Parent == item.TopMenuID) != null) {
                            <li>@item.Descricao
                                <ul>
                                    @foreach (var sub1 in Model.Where(s1 => s1.Parent == item.TopMenuID)) {
                                        if (Model.Where(s2 => s2.Parent == sub1.TopMenuID) != null) {
                                            <li>@sub1.Descricao
                                                <ul>
                                                    @foreach (var sub2 in Model.Where(s2 => s2.Parent == sub1.TopMenuID)) {
                                                    <li>@Html.ActionLink(sub2.Descricao,sub2.Action,sub2.Controller)</li>
                                                    }
                                                </ul>
                                            </li>
                                        }else{
                                            <li>@Html.ActionLink(sub1.Descricao,sub1.Action,sub1.Controller)</li>
                                        }
                                    }
                                </ul>
                            </li>
                        }else{
                            <li>@Html.ActionLink(item.Descricao,item.Action,item.Controller)</li>
                        }
                    }
                }
            </ul>
        </div>
    </div>
</div>

这是&#34; TopMenu &#34;类

    public class TopMenuItem {
            [Key]
            [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
            public int Id { get; set; }             //Iterator
            public int Parent { get; set; }         //TopMenuItem parent id
            public bool Group { get; set; }         //If this have another item below
            public string Descricao { get; set; }   //Text to show
            public string Action { get; set; }      //Action to Go
            public string Controller { get; set; }  //Controller to Go
    }

所有这些都会导致空白列表,就像一个干净的数据库。 但是,当我调用动作列表时,例如发生冲突,因为展位视图(&#34; List.cshtml&#34;和&#34; TopBar.cshtml&#34;)以:

开头
@model IEnumerable<SIGO.Models.Employee>

@model IEnumerable<SIGO.Models.TopMenu>

P.S。:我没有使用任何控制器将数据处理到TopMenu。

问题

  • 我怎么能做这个TopMenu?
  • 你有其他解决方案吗?

谢谢!对不起翻译中的任何错误

4 个答案:

答案 0 :(得分:6)

这是通过上述答案达到的解决方案

感谢所有

类:TopMenu.cs

    public class TopMenu {
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public int Id { get; set; }             //Iterator
        public int Parent { get; set; }         //TopMenuItem parent id
        public bool Group { get; set; }         //If this have another item below
        public string Descricao { get; set; }   //Text to show
        public string Action { get; set; }      //Action to Go
        public string Controller { get; set; }  //Controller to Go
    }

上下文:SigoContext.cs

    public class SigoContext : DbContext {
        public SigoContext() : base("SigoMain") {}
            public DbSet<TopMenu> TopMenu{ get; set; }
        }
    }

控制器:SigoController.cs

    public class SystemController : Controller {
        private SigoContext db = new SigoContext();

        [ChildActionOnly]
        public ActionResult TopMenu() {
            return PartialView("TopBar",db.TopMenu);
        }
    }

布局:_Layout.cshtml

...
<body>
    @{Html.RenderAction("TopMenu", "System");}
    <div class="container body-content">
        @RenderBody()
...

部分视图:TopMenu.cshtml

@model IEnumerable<SIGO.Models.TopMenu>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <div class="SigoLogo">
                    <a href="@Url.Action("Index", "Home")" title="Início">
                        <img src="~/Content/images/Wlogo.png" />
                    </a>
                </div>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"></button>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    @if (Model != null){
                        foreach(var item in Model.Where(p => p.Parent == 0)) {
                            if (Model.Where(s1 => s1.Parent == item.Id) != null) {
                                <li>@item.Descricao
                                    <ul>
                                        @foreach (var sub1 in Model.Where(s1 => s1.Parent == item.Id)) {
                                            if (Model.Where(s2 => s2.Parent == sub1.Id) != null) {
                                                <li>@sub1.Descricao
                                                    <ul>
                                                        @foreach (var sub2 in Model.Where(s2 => s2.Parent == sub1.Id)) {
                                                        <li>@Html.ActionLink(sub2.Descricao,sub2.Action,sub2.Controller)</li>
                                                        }
                                                    </ul>
                                                </li>
                                            }else{
                                                <li>@Html.ActionLink(sub1.Descricao,sub1.Action,sub1.Controller)</li>
                                            }
                                        }
                                    </ul>
                                </li>
                            }else{
                                <li>@Html.ActionLink(item.Descricao,item.Action,item.Controller)</li>
                            }
                        }
                    }
                </ul>
            </div>
        </div>
    </div>

谢谢你们!

答案 1 :(得分:1)

您需要将模型传递给局部视图。相反,这种情况总是错误的,不会呈现任何内容:

@if (Model != null)

所以,你需要像这样呈现视图:

@Html.Partial("TopBar", model)

在您的情况下,由于此代码位于布局视图中,因此您无法获取model

实现此目的的唯一合理方法是创建一个控制器来提供模型。如果您这样做,而不是使用Partial,则应使用ActionRenderActionMSDN docs here)。即像这样实现它:

  • 使用MenuController操作创建Menu,该操作返回呈现菜单的PartialView。在此操作中创建模型,并使用return Partial("Menu",model),其中"Menu"引用"Menu.cshtml"视图,模型具有呈现此视图所需的数据。此操作将呈现菜单。
  • 使用Html.RenderAction("Menu","Menu")在布局中呈现菜单。第一个"Menu"参数引用操作名称,第二个引用控制器。

答案 2 :(得分:1)

创建一个单独的控制器/操作方法来构建菜单并使用@Html.Action()进行调用。例如

public class MenuController : Controller
{
  [ChildActionOnly]
  public ActionResult Index()
  {
    // Build your menu model;
    return PartialView(model);
  }
}

然后在你的布局中

@Html.Action("Index", "Menu")

答案 3 :(得分:1)

你可以这样试试。 我正在使用它并且它有效。

查看代码

<ul id="nav">
        @foreach (var p in Model.Where(a => a.MENU_MASTER.PARENT_ID == 0))
        {

            if (Model.Where(a => a.MENU_MASTER.PARENT_ID == p.MENU_MASTER.OBJECT_ID).Any())
            {
            <li class="has-sub"><a href="#">@p.MENU_MASTER.OBJECT_NAME</a>
                <ul>
                    @foreach (var c in Model.Where(g => (g.MENU_MASTER.PARENT_ID == p.MENU_MASTER.OBJECT_ID)))
                    {
                        if (Model.Where(a => a.MENU_MASTER.PARENT_ID == c.MENU_MASTER.OBJECT_ID).Any())
                        {
                        <li class="has-sub"><a href="#"><span>@c.MENU_MASTER.OBJECT_NAME</span></a>
                            <ul>
                                @foreach (var d in Model.Where(a => a.MENU_MASTER.PARENT_ID == c.MENU_MASTER.OBJECT_ID))
                                {
                                    <li><a  href="@Url.Action(@d.MENU_MASTER.ACTION_NAME, @d.MENU_MASTER.CONTROLLER_NAME)">
                                        <span>@d.MENU_MASTER.OBJECT_NAME</span></a> </li>
                                }
                            </ul>
                        </li>

                        }
                        else
                        {
                        <li><a  href="@Url.Action(@c.MENU_MASTER.ACTION_NAME, @c.MENU_MASTER.CONTROLLER_NAME)">
                            <span>@c.MENU_MASTER.OBJECT_NAME</span></a> </li>  
                        }

                    }
                </ul>
            </li>
            }
            else
            {
            <li><a class="hsubs" href="#">@p.MENU_MASTER.OBJECT_NAME</a></li>
            }

        }
    </ul>

控制器代码

 public ActionResult menu()
        {
            List<PartialClass> Q = new List<PartialClass>();
            var query = ctx.MENU_MASTER.Select(a => new { a.ACTION_NAME, a.CONTROLLER_NAME, a.OBJECT_ID, a.OBJECT_NAME, a.PARENT_ID });
            foreach (var item in query)
            {
                PartialClass cs = new PartialClass();
                cs.MENU_MASTER.ACTION_NAME = item.ACTION_NAME;
                cs.MENU_MASTER.CONTROLLER_NAME = item.CONTROLLER_NAME;
                cs.MENU_MASTER.OBJECT_ID = item.OBJECT_ID;
                cs.MENU_MASTER.OBJECT_NAME = item.OBJECT_NAME;
                cs.MENU_MASTER.PARENT_ID = item.PARENT_ID;
                Q.Add(cs);
            }

            return View(Q);
        }

模型类

public class MENU_MASTER
    {
        [Key]
        public decimal OBJECT_ID { get; set; }
        public string OBJECT_NAME { get; set; }
        public Nullable<decimal> OBJECT_TYPE { get; set; }
        [ForeignKey("MENU_GROUP")]
        public Nullable<decimal> GROUP_ID { get; set; }
        public string LINK_NAME { get; set; }
        public string IMAGE_PATH { get; set; }
        public Nullable<decimal> ORDER_OF_APEARANCE { get; set; }
        public Nullable<decimal> CREATED_BY { get; set; }
        public Nullable<System.DateTime> CREATED_ON { get; set; }
        public Nullable<decimal> MODIFIED_BY { get; set; }
        public Nullable<System.DateTime> MODIFIED_ON { get; set; }
        public string CONTROLLER_NAME { get; set; }
        public string ACTION_NAME { get; set; }
        [ForeignKey("MODULE_MASTER")]
        public Nullable<decimal> MODULE_ID { get; set; }
        public string DESCRIPTION { get; set; }
        public Nullable<decimal> PARENT_ID { get; set; }

        public virtual MENU_GROUP MENU_GROUP { get; set; }
        public virtual MODULE_MASTER MODULE_MASTER { get; set; }
    }