В этом разделе описывается макет каждой страницы в приложении ASP.NET MVC и способы установки стиля.
Чтобы изучить ASP.NET MVC, мы создадим интернет-приложение.
Часть 3. Добавляем стиль и единый вид (макет).
Файл _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" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js") "></script> <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js") "></script> </head> <body> <ul id="menu"> <li>@Html.ActionLink("Home", "Index", "Home") </li> <li>@Html.ActionLink("Фильмы", "Индекс", "Фильмы") </li> <li>@Html.ActionLink("О программе", "О программе", "Главная") </li> </ul> <section id="main"> @RenderBody() <p>Авторские права W3CSchool 2012. Все права защищены.</p> </section> </body> </html>В приведенном выше коде помощник HTML используется для изменения вывода HTML:
@Url.Content() — сюда будет вставлено содержимое URL.
@Html.ActionLink() — сюда будет вставлена HTML-ссылка.
Вы узнаете больше о помощниках HTML в последующих главах этого руководства.
В приведенном выше коде код, отмеченный красным, — это код C# с использованием тегов Razor.
@ViewBag.Title — здесь будет вставлен заголовок страницы.
@RenderBody() — здесь будет отображаться содержимое страницы.
Вы можете узнать о разметке Razor для C# и VB (Visual Basic) в наших руководствах по Razor.
Таблица стилей приложения — Site.css, расположенная в папке «Содержимое».
Откройте файл Site.css и замените его содержимое на:
body {шрифт: "Trebuchet MS", Verdana, цвет фона: #5c87b2; цвет: #696969; } h1 { border-bottom: 3px Solid #cc9900; шрифт: Georgia, цвет: #996600; } #main {padding: 20px; цвет фона: #ffffff; border-radius: 0; 4px 4px 4px } a { color: #034af3 } /* Стили меню ---------------------------------- -*/ ul #menu {padding: 0px; позиция: относительная; маржа: 0; } ul#menu li {display: inline; } ul#menu li a {background-color: #e8eef4; text-decoration: none; line-height: 2.8em; /*Свойства CSS3*/ border-radius: 4px 4px 0 0; } ul#menu li a:hover { background-color: #ffffff } /* Стили форм - -----------------------------*/ набор полей {padding-left: 12px; } метка набора полей {display: блок: 4px; ; } input[type="text"], input[type="password"] { ширина: 300 пикселей } input[type="submit"] { отступ: 4 пикселя } /* Стили данных --------- ---------------------*/ table.data { background-color:#ffffff; border:1px Solid #c3c3c3; %; } table.data th {background-color:#e8eef4; граница: 1 пиксель сплошной # c3c3c3; дополнение: 3 пикселя } table.data td { граница: 1 пиксель сплошной # c3c3c3;Файл _ViewStart в папке Shared (расположенной в папке Views) содержит следующее содержимое:
@{Layout = "~/Views/Shared/_Layout.cshtml";}Этот код автоматически добавляется во все представления, отображаемые приложением.
Если вы удалите этот файл, вам придется добавить эту строку кода во все представления.
Вы узнаете больше о представлениях в последующих главах этого руководства.
Представление ViewStart обычно находится непосредственно под представлением Views. Конечно, страницы просмотра ViewStart могут быть и в других папках (при условии, что эта папка находится в папке «Виды»).