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 соответственно.

Подробное описание содержимого столбцов будет приведено в следующей части.