Стилизация приложения и мастер-страницы

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

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

Итак, добавим в наше приложение небольшую примитивную стилизацию. Для этого определим файл стилей. По умолчанию Visual Studio уже добавляет файл стилей Site.css в папку Content:

Кроме файла Site.css, в папке Content находится файл css-фреймворка Bootstrap, но нам он пока не понадобится. Откроем файл Site.css и изменим его содержание на следующее:

body {
    font-size: 13px;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    background-color: #f7f7fa;
    padding-left:40px;
}
 
nav{
    display: block;
}
 
.menu {
    padding-left:10px;
}
.menu ul {
    list-style:none;
}
.menu li {
    display:inline;
}
.menu a:hover {
    color:red;
}
table {
   vertical-align:middle;
   text-align:left;  
 }
.header {
    font-weight:bold;
}
 td {
    padding-right:10px;
 }
input {
    width: 150px;
}

Класс .menu в данном случае будет служить в качестве класса для навигационного меню на сайте. Хотя наше приложении не очень большое, поэтому там будет только ссылка на главную страницу. Но при необходимости вы можете добавить в него дополнительные пункты.

Чтобы использовать стили, мы можем их просто подключить в секции head, как в любой обычной html-страницу:

<head>
    <meta name="viewport" content="width=device-width" />
    <link  type="text/css" rel="stylesheet" href="../../Content/Site.css" />
</head>

В нашем случае достаточно вставить данный код на оба наших представления. Однако это не самый лучший подход, так как стили для обоих представлений общие, кроме того, подобных представлений в проекте может быть не два, а гораздо больше. И если мы вдруг изменим ссылку на файл стилей, то придется менять эту ссылку на всех представлениях.

И чтобы выйти из этой проблемы фреймворк ASP.NET MVC предоставляет нам такую функциональность, как мастер-страницы. Мастер-страница задает единый шаблон для других использующих его представлений.

По умолчанию в проекте уже имеется мастер-страница, которая называется _Layout.cshtml. Ее можно найти в папке Views -> Shared:

Файл _Layout.cshtml уже имеет некоторое содержимое по умолчанию. Изменим его на следующее:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
</head>

<body>
    <nav>
        <ul class="menu">
            <li>@Html.ActionLink("Главная", "Index", "Home")</li>
        </ul>
    </nav>
    @RenderBody()
</body>
</html>

Для подключения стилей здесь использовался другой способ - метод Url.Content, в который передается путь к файлу. Впоследствии мы познакомимся с еще одним способом - подключение бандлов, который является более предпочтительным.

После секции head на мастер-странице идет создание меню. Так как у нас всего два представления, то в качестве одного единственного пункта меню указывается ссылка на главную страницу. Для создания ссылки используется метод Html.ActionLink. Он генерирует элемент-ссылку и принимает название ссылки, метод контроллера и имя контроллера.

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

Теперь изменим представления так, чтобы они использовали мастер-страницу. Обновленное представление Index.cshtml:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
    <div>
        <h3>Распродажа книг</h3>
        <table>
            <tr class="header"><td><p>Название книги</p></td>
                <td><p>Автор</p></td>
                <td><p>Цена</p></td><td></td>
            </tr>
            @foreach (var b in ViewBag.Books)
            {
            <tr>
                <td><p>@b.Name</p></td>
                <td><p>@b.Author</p></td>
                <td><p>@b.Price</p></td>
                <td><p><a href="/Home/Buy/@b.Id">Купить</a></p></td>
            </tr>
            }
        </table>
    </div>

Также изменим представление Buy.cshtml:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

    <div>
        <h3>Форма оформления покупки</h3>
        <form method="post" action="">
            <input type="hidden" value="@ViewBag.BookId" name="BookId" />
            <table>
                <tr><td><p>Введите свое имя </p></td>
                    <td><input type="text" name="Person" /> </td></tr>
                <tr><td><p>Введите адрес :</p></td><td> 
                   <input type="text" name="Address" /> </td></tr>
                <tr><td><input type="submit" value="Отправить" /> </td><td></td></tr>
            </table>
        </form>
    </div>

Чтобы указать используемую мастер-страницу, в начале представления прописывается путь к мастер-странице: Layout = "~/Views/Shared/_Layout.cshtml"; . И теперь нам больше не нужны секции head и body. Мы их можем удалить.

Запустим на выполнение обновленный проект и убедимся, что к нашему приложению применена стилизация и мастер-страницы:

Стилизация в ASP.NET MVC 5

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

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