Мастер-страницы на HTML5

Лекция

Привет, сегодня поговорим про мастер-страницы на html5, обещаю рассказать все что знаю. Для того чтобы лучше понимать что такое мастер-страницы на html5 , настоятельно рекомендую прочитать все из категории Дизайн программных UI и Web дизаин.

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

При создании первого приложения в предыдущих главах мы использовали следующую мастер-страницу _Layout.chtml:

<!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>

На вид это обычное представление за одним исключением - вызова метода @RenderBody(). Этот вызов является плейсхолдером, на место которого другие представления, которые используют эту мастер-страницу, будут подставлять свое содержимое. И таким образом, мы можем легко установить для представлений веб-приложения единообразный стиль.

Чтобы применить мастер-страницу к представлению, мы должны в секции Layout указать путь к мастер-странице. Например, наше представление Index.cshtml, использующее эту мастер-страницу, начинается так:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Если мы не используем мастер-страницу, то мы указываем Layout = null;.

Мастер-страница может иметь несколько секций, куда представления могут поместить свое содержимое. Об этом говорит сайт https://intellect.icu . Например, добавим к мастер-странице секцию footer:

<!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()
    <footer>@RenderSection("Footer")</footer>
</body>
</html>

Теперь при запуске предыдущего представления Index мы получим ошибку, так как секция Footer не определена. По умолчанию представление должно передавать содержание для каждой секции мастер-страницы. Поэтому добавим вниз представления Index секцию footer. Это мы можем сделать с помощью выражения @section:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!-- здесь остальное содержание -->
@section Footer {
    Все права защищены. Syte Corp. 2012.
}

Однако, при таком подходе, если у нас есть куча представлений, и мы вдруг захотели определить новую секцию на мастер-странице, нам придется изменить все имеющиеся представления, что не очень удобно. Но мастер-страницы предлагают нам варианты гибкой настройки секций.

Первый вариант заключается в использовании перегруженной версии метода RenderSection, которая позволяет указать, что данную секцию не обязательно определять в представлении. Чтобы отметить секцию Footer в качестве необязательной, надо передать в метод в качестве второго параметра значение false:

<footer>@RenderSection("Footer", false)</footer>

Второй вариант позволяет задать содержание секции по умолчанию, если данная секция не определена в представлении:

<footer>
    @if (IsSectionDefined("Footer")) {
        @RenderSection("Footer")
    }
    else 
    { 
        <span>Содержание элемента footer по умолчанию.</span>   
    }
</footer>

ViewStart

Если у нас в проекте пара-тройка представлений, мы легко можем изменить для каждого описание мастер-страницы в секции Layout, если, например, мы решим использовать другую мастер-страницу. Однако, если у нас много представлений, то это делать будет не очень удобно.

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

При создании проекта ASP.NET MVC 3/4 по шаблону Basic или Internet в каталоге Views уже находится файл _ViewStart.cshtml. Этот файл определяет мастер-страницу, используемую по умолчанию. При создании нового проекта ASP.NET MVC 3/4 по шаблону Empty, нам надо добавить новое представление _ViewStart.cshtml в папку Views и удалить весь ранее автоматически сгенерированный текст и добавить туда следующие строки:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Этот код выполняется до любого другого кода, определенного в представлении, поэтому из других представлений мы можем удалить секцию Layout. Если же представление должно использовать другую мастер-страницу, то мы просто переопределяем свойство Layout, дописывая его определение в начало представления.

если же не использовать майкрософт то

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Шапка сайта

</header>

<nav>

Меню сайта

</nav>

Заголовок статьи

</header>

Статья с рыбным текстом

</article>

Заголовок статьи

</header>

Статья с рыбным текстом

</article>

</section>

<aside>

сайдбар с дополнительными блоками

</aside>

Подвал сайта

</footer>

</body>

</html>

Надеюсь, эта статья про мастер-страницы на html5, была вам полезна, счастья и удачи в ваших начинаниях! Надеюсь, что теперь ты понял что такое мастер-страницы на html5 и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Дизайн программных UI и Web дизаин

Из статьи мы узнали кратко, но содержательно про мастер-страницы на html5

Мастер-страницы на HTML5

ViewStart

Комментарии

Оставить комментарий

Дизайн программных UI и Web дизаин

Термины: Дизайн программных UI и Web дизаин