Building Customizable Menu in ASP.NET MVC

Navigation
3

I have a menu in my application, however I need to add a configuration screen where the system administrator selects the menu and chooses whether to enable or disable the menu item for all users of the application.

I thought about creating a table with the menu items and check if they are enabled (0 or 1), and show only those that are enabled.

I've never worked with this type of configuration and I do not know if this medium I've described is the "right" way or it works.

Can anyone help me with the right logic to develop this configuration?

Menu 

<div class="container">
    <br />
    <!-- Static navbar -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Informações<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li>@Html.ActionLink("Afastamentos", "Index", "Afastamento")</li>
                            <li>@Html.ActionLink("Aniversariantes", "Aniversariantes", "Usuario")</li>
                            <li>@Html.ActionLink("Dados Cadastrais", "Index", "Usuario")</li>
                            <li>@Html.ActionLink("Dependentes", "Dependente", "Usuario")</li>
                            <li>@Html.ActionLink("Férias", "Ferias", "Usuario")</li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Requerimentos<span class="caret"></span></a>
                        <ul class="dropdown-menu">

                                    <li>@Html.ActionLink("Todos", "Index", "Requerimento")</li>

                            <li>@Html.ActionLink("Meus Requerimentos", "MeusRequerimentos", "Requerimento")</li>
                            <li>@Html.ActionLink("Aposentadoria", "Aposentadoria", "Requerimento")</li>
                            <li>@Html.ActionLink("Averbação", "Averbacao", "Requerimento")</li>
                            <li>@Html.ActionLink("Certidão de Tempo de Serviço", "CertidaoTempo", "Requerimento")</li>
                            <li>@Html.ActionLink("Exoneração", "Exoneracao", "Requerimento")</li>
                            <li>@Html.ActionLink("Férias", "Ferias", "Requerimento")</li>
                            <li>@Html.ActionLink("Mudança de Nivel", "Nivel", "Requerimento")</li>
                            <li>@Html.ActionLink("Outros", "Outros", "Requerimento")</li>

                        </ul>
                    </li>

                    {
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Usuários<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li>@Html.ActionLink("Cadastrar Novo", "Inserir", "Funcionario")</li>
                                <li>@Html.ActionLink("Listar", "Index", "Funcionario")</li>
                            </ul>
                        </li>
                    }
                    <li>
                        <a href="http://localhost/GPWEB/logado.asp">Contracheque<span></span></a>
                    </li>
                </ul>
            </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
    </nav>
</div>
    
asked by anonymous 03.02.2015 / 16:09

1 answer

4

Considering that the activation will not be tied to the user, so I understood your question, a correct approach would be a home-made solution.

Models 

public class MenuItem 
{
    [Key]
    public int MenuItemId { get; set; }
    public int? MenuPaiId { get; set; }
    [Required]
    public int Nome { get; set; }
    public bool Habilitado { get; set; }

    [Required]
    public String Action { get; set; }
    [Required]
    public String Controller { get; set; }

    [ForeignKey("MenuPaiId")]
    public virtual MenuItem MenuPai { get; set; }
    public virtual ICollection<MenuItem> MenusFilhos { get; set; }
}

Using the Controller

Try to create a common Controller , where all other Controllers are derived from it. Put Controller in an Action like this: 

    [ChildActionOnly]
    public ActionResult Menu()
    {
        var menu = contexto.MenuItens.Where(m => m.Habilitado).ToList();

        return PartialView(menu);
    }

Views

Create a View to make your menu in /Views/Shared/Menu.cshtml . Call Action which View in your Layout using: 

@Html.Action("Menu")

A View Menu.cshtml 

@model IEnumerable<SeuSistema.Models.MenuItem>

<div class="container">
    <br />
    <!-- Static navbar -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Informações<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            @foreach (var item in Model) 
                            {
                                <li>@Html.ActionLink(item.Nome, item.Action, item.Controller)</li>
                            }
                        </ul>
                    </li>

                    ...

                    <li>
                        <a href="http://localhost/GPWEB/logado.asp">Contracheque<span></span></a>
                    </li>
                </ul>
            </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
    </nav>
</div>
    
03.02.2015 / 16:29
Change Actionbar button icon Problem when comparing hours