Geek Answers Handbook

Dynamic menu in C # ASP.Net MVC3 Razor

Explaining

I am trying to make a dynamic menu by loading items from a database. I need 3 levels maximum inside the menu, for example:

<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

Now, here is how I do today, but without success:

A partial view of "TopBar.cshtml" is shown on each page and is called inside "_Layout.cshtml" as follows:

_Layout.cshtml

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

and " TopBar.cshtml " shows the data using the code below

@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>

This is the TopMenu class

    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
    }

All this will lead to empty lists, for example a clean database. But, when I call up a list of actions, for example. The conflict arises because the view of the stand ("List.cshtml" and "TopBar.cshtml") begins with:

@model IEnumerable<SIGO.Models.Employee>

or

@model IEnumerable<SIGO.Models.TopMenu>

PS: I do not use a controller to process data in TopMenu.

Questions

  • TopMenu?
  • ?

!

+4
4

,

: 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>

, !

+5

. , :

@if (Model != null)

, :

@Html.Partial("TopBar", model)

, , model.

- . , Partial Action RenderAction (MSDN docs ). :

  • MenuController Menu, PartialView, . return Partial("Menu",model), "Menu" "Menu.cshtml", , . .
  • Html.RenderAction("Menu","Menu"), . "Menu" , .
+1

/ , @Html.Action().

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


@Html.Action("Index", "Menu")
+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; }
    }
+1

More articles:


All Articles