Главная страница   /   7.6. Применение стилей к контенту (ASP.NET MVC 4

ASP.NET MVC 4

ASP.NET MVC 4

Адам Фриман

7.6. Применение стилей к контенту

Мы уже создали большую часть инфраструктуры, и наше приложение действительно начинает выглядеть целостным, но мы до сих пор не обратили внимания на его внешний вид. Хотя эта книга не о веб-дизайне или CSS, дизайн приложения SportsStore настолько невыразительный, что умаляет даже его технические достоинства. В данном разделе мы исправим эту ситуацию.

Примечание

В этой части главы мы попросим вас добавить стили CSS, не объясняя их значение. Адам подробно описывает CSS в своей книге Руководство по HTML5 (Apress, 2011).

Мы реализуем классический дизайн с двумя колонками и заголовком, как показано на рисунке 7-16.

Рисунок 7-16: Целевой дизайн приложения SportsStore

Определяем общий контент в макете

В главе 5 мы объяснили, как работают макеты Razor и как их применять. Когда мы создавали представление List.cshtml для контроллера Product, мы попросили вас отметить флажком опцию Use a layout, но не заполнять поле, в котором определяется макет. В результате используется макет по умолчанию, _Layout.cshtml, который можно найти в папке Views/Shared проекта SportsStore.WebUI. Откройте этот файл и измените его содержание так, чтобы он соответствовал листингу 7-24.

Листинг 7-24: Изменяем стандартный макет Razor
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<title>@ViewBag.Title</title>
	<link href="~/Content/Site.css" type="text/css" rel="stylesheet" />
</head>
<body>
	<div id="header">
		<div class="title">SPORTS STORE</div>
	</div>
	<div id="categories">
		We will put something useful here later
	</div>
	<div id="content">
		@RenderBody()
	</div>
</body>
</html>

Примечание

Обратите внимание, что мы попросили вас удалить теги Razor @Styles и @Scripts из представления. Это новые дополнения к Razor в MVC 4, и мы опишем их должным образом в главе 24, когда будем говорить о способах оптимизации контента, который ваше приложение MVC демонстрирует клиентам. На данный момент мы хотим сохранить все внимание на основных функциях MVC.

Добавляем стили CSS

Разметка HTML в листинге 7-24 является характерной для приложения ASP.NET MVC. Она простая и чисто семантическая. Он описывает контент, но ничего не говорит о том, как он должен быть расположен на экране. Мы будем использовать CSS, чтобы сообщить браузеру, как должны быть расположены элементы, которые мы только что добавили.

Visual Studio создает для нас файл CSS автоматически, если мы создаем проект MVC, используя опцию Basic. Этот файл, который называется Site.css, можно найти в папке Content проекта SportsStore.WebUI, и мы уже просили вас добавить в файл _Layout.cshtml ссылку на этот файл:

<link href="~/Content/Site.css" type="text/css" rel="stylesheet" />

Откройте файл Site.css и добавьте стили, показанные в листинге 7-25, в конец файла (не удаляйте содержимое, которое уже есть в Site.css). Вам не нужно набирать их вручную. Вы можете скачать дополнения CSS и весь остальной проект как часть кода, который прилагается к этой книге.

Листинг 7-25: Определяем CSS
BODY
{
	font-family: Cambria, Georgia, "Times New Roman";
	margin: 0;
}

DIV#header DIV.title, DIV.item H3, DIV.item H4, DIV.pager A
{
	font: bold 1em "Arial Narrow", "Franklin Gothic Medium", Arial;
}

DIV#header
{
	background-color: #444;
	border-bottom: 2px solid #111;
	color: White;
}

	DIV#header DIV.title
	{
		font-size: 2em;
		padding: .6em;
	}

DIV#content
{
	border-left: 2px solid gray;
	margin-left: 9em;
	padding: 1em;
}

DIV#categories
{
	float: left;
	width: 8em;
	padding: .3em;
}

DIV.item
{
	border-top: 1px dotted gray;
	padding-top: .7em;
	margin-bottom: .7em;
}

	DIV.item:first-child
	{
		border-top: none;
		padding-top: 0;
	}

	DIV.item H3
	{
		font-size: 1.3em;
		margin: 0 0 .25em 0;
	}

	DIV.item H4
	{
		font-size: 1.1em;
		margin: .4em 0 0 0;
	}

DIV.pager
{
	text-align: right;
	border-top: 2px solid silver;
	padding: .5em 0 0 0;
	margin-top: 1em;
}

	DIV.pager A
	{
		font-size: 1.1em;
		color: #666;
		text-decoration: none;
		padding: 0 .4em 0 .4em;
	}

		DIV.pager A:hover
		{
			background-color: Silver;
		}

		DIV.pager A.selected
		{
			background-color: #353535;
			color: White;
		}

Если вы запустите приложение, то увидите, что мы уже немного улучшили внешний вид. Изменения показаны на рисунке 7-17.

Рисунок 7-17: Приложение SportsStore с улучшенным дизайном

Создаем частичное представление

Последний прием, который мы изучим этой главе, - это реорганизация приложения с целью упрощения представления List.cshtml. Мы создадим частичное представление, которое представляет собой фрагмент содержимого, который внедряется в другое представление. Частичные представления находятся в отдельных файлах и могут использоваться несколькими представлениями, что может помочь сократить дублирование, особенно если вам нужно визуализировать одни и те же данные в приложении несколько раз.

Чтобы добавить частичное представление, кликните правой кнопкой мыши папку /Views/Shared в проекте SportsStore.WebUI и выберите Add - View из контекстного меню. Назовите представление ProductSummary. Мы хотим отобразить информацию о товаре, поэтому выберите класс Product из выпадающего меню класса Model или введите указанное имя класса. Отметьте флажком опцию Create as a partial view, как показано на рисунке 7-18.

Рисунок 7-18: Создаем частичное представление

Нажмите кнопку Add, и Visual Studio создаст файл частичного представления по адресу Views/Shared/ProductSummary.cshtml. Частичное представление очень похоже на обычное, за исключением того, что когда оно визуализируется, оно создает фрагмент HTML, а не полный HTML-документ. Если вы откроете представление ProductSummary, то увидите, что оно содержит только директиву представления модели, которая является нашим классом доменной модели Product. Примените изменения, показанные в листинге 7-26.

Листинг 7-26: Добавляем разметку в частичное представление ProductSummary
@model SportsStore.Domain.Entities.Product

<div class="item">
	<h3>@Model.Name</h3>
	@Model.Description
	<h4>@Model.Price.ToString("c")</h4>
</div>

Теперь нам необходимо обновить Views/Products/List.cshtml, чтобы он начал использовать частичное представление. Вы можете увидеть изменения в листинге 7-27.

Листинг 7-27: Используем частичное представление в List.cshtml
@model SportsStore.WebUI.Models.ProductsListViewModel

@{
	ViewBag.Title = "Products";
}

@foreach (var p in Model.Products)
{
	Html.RenderPartial("ProductSummary", p);
}

<div class="pager">
	@Html.PageLinks(Model.PagingInfo, x => Url.Action("List", new { page = x }))
</div>

Мы взяли разметку, которая раньше была в цикле foreach в представлении List.cshtml, и перенесли ее в новое частичное представление. Мы вызываем частичное представление, используя вспомогательный метод Html.RenderPartial. Параметры – это имя представления и объект модели представления.

Совет

Метод RenderPartial не возвращает разметку HTML, как большинство других вспомогательных методов. Вместо этого он записывает содержимое непосредственно в поток ответа, и именно поэтому мы должны вызывать его как полную строку C#, используя точку с запятой. Это более эффективно, чем помещение в буфер созданной частичным представлением разметки HTML, потому что потом она все равно будет записана в поток ответа. Если вы предпочитаете более последовательный синтаксис, используйте метод Html.Partial, который делает то же, что и метод RenderPartial, но возвращает фрагмент HTML и может быть вызван как @Html.Partial("ProductSummary", р).

Использовать частичное представление – это хороший прием. Он не меняет внешний вид приложения. Если вы запустите его, вы увидите, что дисплей остался тем же, как показано на рисунке 7-19.

Рисунок 7-19: Применяем частичное представление