ASP.NET MVC 5. Создание сайта-блога. Часть 3.
!!НАШ БЛОГ ПЕРЕЕХАЛ!!
Мы создали свой сайт! Все материалы, опубликованные в этом блоге, переехали туда.
Наш новый сайт maddevelop.ru
Страница представления постов
Страница, на которой расположены посты, состоит из нескольких частей: из мастер-страниц и страниц содержимого. Мастер-страница представляет собой обрамление, шаблон из неменяющейся или слабо меняющейся информации. В нашем случае - это шапка страницы, нижняя часть (футер) и, в правой части, место для блоков с названиями возможных категорий и тегов для фильтрации. Сами блоки, категории и теги отображаются с помощью страниц содержимого.
Код основной мастер-страницы выглядит следующим образом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-light rounded" style="background-color: #808000;">
@Html.ActionLink("Самый лучший сайт", "List", "Blog", null,
new { @class = "navbar-brand" })
@Html.ActionLink("Админ-панель", "Index", "Admin", null,
new { @class = "btn btn-outline-light" })
</nav>
<div class="row" style="margin-top: 15px; margin-bottom: 15px">
<div class="col-10">
<div class="container-fluid">
@RenderBody()
</div>
</div>
<div class="col-2">
<div class="container-fluid">
<div class="list-group">
@Html.Action("CatMenu", "Nav")
</div>
</div>
<p></p>
<div class="container-fluid">
<div class="list-group" style="font-style: italic">
@Html.Action("TagMenu", "Tag")
</div>
</div>
</div>
</div>
<h2 class="row" id="dno">
Здесь могла быть Ваша реклама!
</h2>
</body>
</html>
Ниже представлен один из вариантов получаемой страницы:
В начале кода мастер-страницы написана минимальная для создания страницы информация:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title</title> <link href="~/Content/bootstrap.css" rel="stylesheet" /> </head>
Здесь стоит обратить внимание на предпоследнюю строку с объявлением использования библиотеки шаблонов Bootstrap. Для создания строки достаточно перетащить css-файл в шапку разметки страницы.
Далее идёт описания тела (<body>).
Первый в теле страницы блок кода описывает навигационную панель, которая на рисунке выше отмечена цифрой 1.
<nav class="navbar navbar-light rounded" style="background-color: #808000;">
@Html.ActionLink("Самый лучший сайт", "List", "Blog", null,
new { @class = "navbar-brand" })
@Html.ActionLink("Админ-панель", "Index", "Admin", null,
new { @class = "btn btn-outline-light" })
</nav>
Навигационная панель имеет светлую тему (navbar-light) с закругленными краями (rounded).
В панели с помощью двух хелперов ActionLink создаются гиперссылки на действия контроллера. Здесь первый аргумент - текст ссылки, при нажатии на который случится перенаправление, третий и второй - контроллер и его метод действия, который будет вызываться при нажатии, четвёртый - передаваемый методу действия параметр (в нашем случае такого нет - null), а пятый - класс создаваемого html-элемента.
Поясним на примере @Html.ActionLink("Самый лучший сайт", "List", "Blog", null, new { @class = "navbar-brand" }). При нажатии на текст "Самый лучший сайт" будет вызван метод действия List контроллера Blog, который вернёт нам домашнюю страницу. При этом правила оформления гиперссылки записаны в классе navbar-brand библиотеки Bootstrap 4.
Далее в коде описываются части страницы 2, 3 и 4 (см. рис.).
<div class="row" style="margin-top: 15px; margin-bottom: 15px">
<div class="col-10">
<div class="container-fluid">
@RenderBody()
</div>
</div>
<div class="col-2">
<div class="container-fluid">
<div class="list-group">
@Html.Action("CatMenu", "Nav")
</div>
</div>
<p></p>
<div class="container-fluid">
<div class="list-group" style="font-style: italic">
@Html.Action("TagMenu", "Tag")
</div>
</div>
</div>
</div>
Этот фрагмент разметки задаёт блок, в котором вложенные части располагаются горизонтально (class="row"). В строку размещаются две колонки: одна занимает 10/12 всей ширины страницы ( div class="col-10"), вторая - 2/12 (div class="col-2").
В первой колонке находится контейнер, занимающий всю ширину столбца (div class="container-fluid"), в котором происходит вызов метода RenderBody(). Метод вставляет в разметку содержимое представления, указанное методом действия (в нашем случае метод действия List контроллера Blog).
Во второй колонке находятся два контейнера (№3 и №4 на рисунке), в которых происходит вызов частичных представлений из методов действия CatMenu и TagMenu контроллеров Nav и Tag соответственно.
Подробное описание содержимого столбцов будет приведено в следующей части.