Search code examples
c#asp.net-mvc-4sql-server-2008-express

How to make dynamic menu based on role in nested master page asp.net mvc 4?


I want to ask about dynamic menu based on role in master page asp.net mvc 4. before i ask about it. I have database menu in sql server express 2008 like this:

Id_Menu        int          NotNull
Displaymenu    varchar(50)  Null
Url            varchar(50)  Null
ParentID       int          Not Null

and i have created master page in mvc 4 like this :

<body>
    <header>
       <div class="float-left">
               <img src="../../Images/logo.png" width="350" height="95" />
        </div>
        <div class="content-wrapper">
            <div class="float-right">
                <section id="login">
                    <%: Html.Partial("_LoginPartial") %>
                </section>
                <nav>
                    <ul id="menu">
                        <li><%: Html.ActionLink("Home", "Index", "Home") %></li>
                        <li><%: Html.ActionLink("About", "About", "Home") %></li>
                        <li><%: Html.ActionLink("Contact", "Contact", "Home") %></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <div id="body">
        <asp:ContentPlaceHolder ID="FeaturedContent" runat="server" />
        <section class="content-wrapper main-content clear-fix">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; <%: DateTime.Now.Year %> - Cenie.Sistem Informasi.IT 
      Telkom</p>
            </div>
        </div>
    </footer>

and the i have created nested master page like this :

<%@ Master Language="C#" MasterPageFile="~/Views/Shared/Site.Master" 
 AutoEventWireup="true" CodeBehind="Dashboard.master.cs" 
 Inherits="TA_SID.Views.Shared.Dashboard<TA_SID.Models>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
 </asp:Content>
 <asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
  </asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<div class="span3 main-menu-span">
            <div class="well nav-collapse sidebar-nav">
                <ul class="nav nav-tabs nav-stacked main-menu">
                    <li class="nav-header hidden-tablet">MAIN    
   MENU</li>
                    if()
                    <li><a class="ajax-link"   
href="/Admin/Index"><i class="icon-home"></i><span class="hidden-tablet"> 
Dashboard</span>   
</a></li>
                    <li><a class="ajax-link"   
 href="/Admin/PertaminaIndex"><i class="icon-eye-open"></i><span class="hidden-tablet"> 
Pertamina</span></a></li>
                    <li><a class="ajax-link"     
href="/Admin/DistributorIndex"><i class="icon-edit"></i><span class="hidden-tablet"> 
Distributor</span></a></li>
                    <li><a class="ajax-link"   
href="/Admin/CustomerIndex"><i class="icon-list-alt"></i><span class="hidden-tablet">    
 Customer</span></a></li>
                    <li><a class="ajax-link"    
 href="/Admin/ProdukIndex"><i class="icon-font"></i><span class="hidden-tablet">  
 Product</span></a></li>
                    <li><a class="ajax-link" href="table.html">   
 <i class="icon-align-justify"></i><span class="hidden-tablet"> Chart</span></a></li>
                    <li><a class="ajax-link"   
 href="calendar.html"><i class="icon-calendar"></i><span class="hidden-tablet">   
 Calendar</span></a></li>
                    <li><a class="ajax-link" href="grid.html"><i  
 class="icon-th"></i><span class="hidden-tablet"> User</span></a></li>

                </ul>
            </div><!--/.well -->
        </div>
 </asp:Content>
 <asp:Content ID="Content4" ContentPlaceHolderID="ScriptsSection" runat="server">
 </asp:Content>

can you help me.. How to create dynamic menu load in nested master page if i log in as admin or as user after i success log in as role?

thank you for your help..


Solution

  • First of all, you don't want to do this logic in a master page. You want to create a partial view that will build the menu based on the model information returned by a child action in some controller. For example:

    You should move this logic into some controller that is in charge of building navigation. Inside of this controller you should declare a child action that returns the information that you need.

    If you plan to store URL and Description in a database, you might as well store access privileges in a table as well. That way you can pass user's group or user name and retrieve a collection of URL to which that user has access. After that you could use a code similar to the one below.

    For example:

    public class NavigationController : Controller
    {
        [ChildActionOnly]
        public PartialViewResult GetMenuForUser()
        {
            var model = _securityLayer.GetUrlForUser(HttpContext.User.Identity.Name);
    
            return PartialView("_UserMenu", model);
        }
    }
    

    Your _UserMenu.cshtml could be like:

    @model IEnumerable<SomeCollection>
    
    @foreach(var url in Model) {
        <li><a class="ajax-link" href="@url.Url">@url.Description</a></li>
    }
    

    THen in your master page, where you want to use the menu you would call:

    <div class="well nav-collapse sidebar-nav">
        <ul class="nav nav-tabs nav-stacked main-menu">
            <li class="nav-header hidden-tablet">MAIN MENU</li>
            @{ Html.RenderAction("GetMenuForUser", "Navigation"); }
        </ul>
    </div>
    

    This should give you an idea how to proceed regardless of whether you store user access rights in a database.

    UPDATE: Sorry, I realized later that you are using ASPX View Engine and not Razor. You will need to convert to ASPX View Engine my markup.