Building Customizable ASP.NET MVC Menu

Asked

Viewed 4,920 times

3

I have a menu in my application, but 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 to create a table with the menu items and check whether they are enabled or not (0 or 1), and show only those that are enabled.

I have never worked with this type of configuration and I don’t know if this medium I described is the "correct" way or if it works.

Could someone 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>
asp.net-mvc menu

  • First of all, take a look at these responses that use the Authorize. It can be interesting as a starting point. After that edit your question and leave it more specific.

  • @Ciganomorrisonmendez I have always used Authorize, the problem is that I do not have access control for this application. I will only have one admin user, to enable or disable menus for the entire application.

1 answer

5


Considering that the license will not be tied to the user, from what I understood of your question, a correct approach would be a home 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; }
}

Use in the Controller

Seek to create a Controller common, in which all others Controllers are derived from it. Place in your Controller one Action thus:

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

        return PartialView(menu);
    }

Views

Create a View to do your menu in /Views/Shared/Menu.cshtml. Call the Action that makes the View in its 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>
  • 1

    I thought about doing it this way, but what I had in mind was less "robust" than what you posted. I will test from soon returned with the result. Thank you.

  • what I was thinking was to save the value of each menu (enabled) in a helpper( if it is true or false) and show only those that are true. I edited the answer with the menu I have today(menu.cshtml), To adapt to the way you demonstrated I would put a @Model.Controller in place of the controller, or have another way?

  • @Renilsonandrade You would have to make this menu dynamic. You need an example in View?

  • If I may add, it would help a lot.

  • @Renilsonandrade See if it’s clearer now.

  • It was yes, now I understood what you were talking about. Thanks for the help, that’s just what I needed.

Show 1 more comment

Browser other questions tagged asp.net-mvc menu

You are not signed in. Login or sign up in order to post.