Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core
Итак, добавим в наше приложение небольшую примитивную стилизацию. Для этого определим файл стилей. По умолчанию 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. Мы их можем удалить.
Запустим на выполнение обновленный проект и убедимся, что к нашему приложению применена стилизация и мастер-страницы:
На этом работа над приложением закончена, и теперь мы можем перейти к более детальному обсуждению основных компонентов приложения MVC.