Мастер-страницы

Создание мастер-страницы и выпадающее меню

Последнее обновление: 31.10.2015

Сейчас у нас различные группы пользователей могу обращаться к различным контроллерам и их действиям. Но обращаться, как сейчас, из адресной строки браузера, вбивая там адрес, навреное, не очень удобно, и хотелось бы какое-нибудь меню. И это меню бы содержала ссылки на все доступные для данной группы разделы.

При создании меню следует учитывать, что нам надо создать фактически четыре разных меню (для каждой группы пользователей) и в зависимости от роли пользователя вывести нужное меню на страницу.

Итак, перейдем к нашей мастер-странице _Layout.chtml и изменим стандартный код на следующий:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    
</head>
<body>
    <!-- В зависимости от роли пользователя устанавливаем определенное меню -->
    @if (ViewContext.HttpContext.User.IsInRole("Администратор"))
    {
        <h2>Меню администратора: вы вошли как superadmin</h2>
            <div class="menu">
                <ul>
                    <li><a class="hide">Справочники</a>
                        <ul class="submenu">
                            <li>@Html.ActionLink("Отделы", "Departments", "Service")</li>
                            <li>@Html.ActionLink("Активы", "Activ", "Service")</li>
                            <li>@Html.ActionLink("Категории", "Categories", "Service")</li>
                        </ul>
                    </li>
                    <li><a class="hide">Заявки</a>
                        <ul class="submenu">
                            <li>@Html.ActionLink("Мои заявки", "Index", "Request")</li>
                            <li>@Html.ActionLink("Все заявки", "RequestList", "Request")</li>
                            <li>@Html.ActionLink("Новая", "Create", "Request")</li>
                        </ul>
                    </li>
                    <li><a class="hide">Пользователи</a>
                        <ul class="submenu">
                            <li>@Html.ActionLink("Добавление", "Create", "User")</li>
                            <li>@Html.ActionLink("Просмотр", "Index", "User")</li>
                        </ul>
                    </li>
                    <li>@Html.ActionLink("Выйти", "LogOff", "Account")</li>
                </ul>
            </div> 
    }
    else if (ViewContext.HttpContext.User.IsInRole("Модератор"))
    { 
        <h2>Меню диспетчера</h2>
             <div class="menu">
                <ul>
                    <li><a class="hide">Заявки</a>
                        <ul class="submenu">
                            <li>@Html.ActionLink("Мои заявки", "Index", "Request")</li>
                            <li>@Html.ActionLink("Распределить", "Distribute", "Request")</li>
                            <li>@Html.ActionLink("Новая", "Create", "Request")</li>
                        </ul>
                    </li>
                    <li>@Html.ActionLink("Пользователи", "Index", "User")</li>
                    <li>@Html.ActionLink("Выйти", "LogOff", "Account")</li>
                </ul>
         </div>
    }
    else if (ViewContext.HttpContext.User.IsInRole("Исполнитель"))
    {
        <h2>Меню исполнителя</h2>
             <div class="menu">
                <ul>
                    <li><a class="hide">Заявки</a>
                        <ul class="submenu">
                            <li>@Html.ActionLink("Мои заявки", "Index", "Request")</li>
                            <li>@Html.ActionLink("Изменить статус", "ChangeStatus", "Request")</li>
                            <li>@Html.ActionLink("Новая", "Create", "Request")</li>
                        </ul>
                    </li>
                    <li>@Html.ActionLink("Пользователи", "Index", "User")</li>
                    <li>@Html.ActionLink("Выйти", "LogOff", "Account")</li>
                </ul>
         </div>
    }
    else if (ViewContext.HttpContext.User.IsInRole("Пользователь"))
    {
        <h2>Приветствую, @ViewContext.HttpContext.User.Identity.Name</h2>
            <div class="menu">
                <ul>
                    <li>@Html.ActionLink("Подать заявку", "Create", "Request")</li>
                    <li>@Html.ActionLink("Мои заявки", "Index", "Request")</li>
                    <li>@Html.ActionLink("Выйти", "LogOff", "Account")</li>
                </ul>
         </div>
    }

    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

Как и в контроллере, в представлении мы можем получить контекст запроса через объект ViewContext и затем через него проверить принадлежность пользователя определенной роли: ViewContext.HttpContext.User.IsInRole("Администратор"). И если эта принадлежность имеет место, то выводим в представлении соответствующее меню.

Ну и в конце нам надо как-то стилизовать меню. Добавим в файл Site.css следующие нехитрые определения стилей:

/* Меню */
.menu {
    font-family: Arial, Sans-Serif; 
    width:99%; 
    height:50px; 
    position:relative;
    z-index:100;
}
.menu ul li a, .menu ul li a:visited {
    display:block; 
    text-decoration:none;
    width:104px; 
    max-height:100px; 
    text-align:center; 
    color:#fff; 
    border:1px solid #fff; 
    background:silver; 
    line-height:30px; 
    font-size:13px; 
    overflow:hidden; 
    vertical-align: middle;
}
.menu ul {
    padding:0; 
    margin:0; 
    list-style: none;
}
.menu ul li {
    float:left; 
    position:relative;
    vertical-align: middle;
}
.menu ul li ul {
    display: none;
    opacity:0.8;
}

.menu ul li:hover a {
    color:#fff; 
    background:grey;
}
.menu ul li:hover ul {
    display:block; 
    position:absolute; 
    top:25px; 
    left:0;
    width:105px;
}
.menu ul li:hover ul li a.hide {
    background:#6a3; 
    color:#fff;
}
.menu ul li:hover ul li:hover a.hide {
    background:grey; 
    color:#000;
}
.menu ul li:hover ul li ul {
    display: none;
}
.menu ul li:hover ul li a {
    display:block; 
    background:#ddd; 
    color:#000;
}
.menu ul li:hover ul li a:hover {
    background:grey; 
    color:#000;
}
.menu ul li:hover ul li:hover ul {
    display:block; 
    position:absolute; 
    left:105px; 
    top:0;
}
.menu ul li:hover ul li:hover ul.left {
    left:-105px;
}

В итоге у нас получится следующее меню:


НазадСодержание

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850