Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core
Теперь в нашем приложении не хватает одной детали - стилизации. Сделаем какую-нибудь простенькую стилизацию. Для этого нам надо определить файл стилей для нашего приложения. Все файлы стилей принято хранить в папке Content, поэтому вначале добавим в проект папку Content. Для этого нажмем на название проекта правой кнопкой мыши и в появившемся меню выберем Add (Добавить)->New Folder (Новая папка).
Теперь в новую папку добавим файл стилей. Назовем его Site.css. Для этого нажмем правой кнопкой мыши на папку Content и в появившемся меню выберем Add (Добавить)->New Item (Новый элемент). Затем в списке шаблонов найдем шаблон Style Sheet и дадим новому файлу имя Site.css.
Теперь добавим в файл 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
в данном случае будет служить в качестве класса для навигационного меню на сайте.
Теперь мы можем использовать стили. Поскольку наши представления по сути обычные веб-страницы, мы можем как и на любой странице html добавить в секции head ссылки на файл стилей:
<head> <meta name="viewport" content="width=device-width" /> <link type="text/css" rel="stylesheet" href="../../Content/Site.css" /> </head>
Если в приложении одно представление, или если разные представления используют разные стили и другие ресурсы, то такой подход оправдан. Однако в нашем случае у нас есть два представления, у которых должно быть одно меню и которые должны быть одинаково стилизованы. В этом случае очень удобно использовать мастер-страницы. Мастер-страница задает некий единый шаблон для других использующих его представлений.
Итак, создадим мастер-страницу. По сути это простое представление. Вначале добавим в папку Views проекта новую папку Shared. После этого в папку Shared добавим новое представление. Назовем его _Layout.cshtml:
Добавим в файл _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, в который передали путь к файлу. Оба способа - и этот, и использованный ранее равноправны.
Затем мы создали меню сайта с помощью методов 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. Запустив приложение, мы увидим, что теперь к нашему сайту применена стилизация: