Добавление мастер-страницы и стилизации

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core 7

Последнее обновление: 16.11.2019

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

У нас есть два представления, которые фактически напоминают веб-страницу. И если мы захотим применить к каждой веб-странице какие-либо стили, которые заключены во внешнем файле css, то нам придется в каждом представлении подключить этот файл стилей. Также если мы захотим определить общее для всех веб-страниц меню или какие-то другие общие элементы, например, футер, то опять же нам придется прописывать все эти элементы в каждом представлении. Это не является оптимальной практикой, так как если нам надо внести изменения, то придется менять все представления, которых может быть в проекте множество.

Гораздо более оптимальный способ преставляет использование мастер-страниц. По умолчанию в проекте ASP.NET MVC уже имеется мастер-страница, которая называется _Layout.cshtml и которая находится в папке Views/Shared:

Layout в ASP.NET MVC Core

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"]</title>
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    </head>
    <body>
        <!--меню-->
        <nav class="navbar navbar-inverse">
            <div class="container">
                <div>
                    <ul class="nav navbar-nav">
                        <li><a href="~/Home/Index" class="navbar-brand">Главная</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!--основной контент-->
        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>© 2015 - MobileStore</p>
            </footer>
        </div>
    </body>
</html>

Вначале подключаются стили библиотеки Bootstrap, которая по умолчанию уже имеется в проекте в папке wwwroot/lib/bootstrap/dist/css/.

После секции head на мастер-странице идет создание меню. Так как у нас всего два представления, то в качестве одного единственного пункта меню указывается ссылка на главную страницу. Для создания меню здесь применяются стандартные классы Bootstrap.

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

Теперь изменим представления так, чтобы они использовали мастер-страницу. Обновленное представление Index.cshtml:

@model IEnumerable<MobileStore.Models.Phone>
@{
    ViewData["Title"] = "Каталог товаров";
}
<h3>Смартфоны</h3>
<table class="table-condensed">
    <tr>
        <td>Модель</td>
        <td>Производитель</td>
        <td>Цена</td>
        <td></td>
    </tr>
    @foreach (var phone in Model)
            {
        <tr>
            <td>@phone.Name</td>
            <td>@phone.Company</td>
            <td>@phone.Price</td>
            <td><a href="~/Home/Buy/@phone.Id">Купить</a></td>
        </tr>
    }
</table>

Вначале объявляется заголовок с помощью выражения ViewData["Title"] = "Каталог товаров". Этот заголовок затем вставляется на мастер-страницу.

Для создания таблицы здесь используется класс bootstrap table-condensed. Поскольку данное представление будет внедряться в мастер-страницу, то соответственно все стили и скрипты на мастер-страницы для представления Index.cshtml также будут доступны.

Представление Buy.cshtml:

@{
    ViewData["Title"] = "Оформление заказа";
}
<h2>Форма оформления покупки</h2>

<form method="post" class="form-horizontal" role="form">
    <input type="hidden" value="@ViewBag.PhoneId" name="PhoneId" />
    <p>Для оформления покупки заполните следующие поля:</p>
    <div class="form-group">
        <label for="User" class="col-md-2 control-label">Имя:</label>
        <div class="col-md-4">
            <input type="text" name="User" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="Address" class="col-md-2 control-label">Адрес:</label>
        <div class="col-md-4">
            <input type="text" name="Address" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">Телефон:</label>
        <div class="col-md-4">
            <input type="text" name="ContactPhone" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Отправить" />
        </div>
    </div>
</form>

Здесь та же сама форма для создания заказа, только теперь к элементам применяются классы bootstrap.

И если мы теперь запустим приложение, то увидим, что веб-страницы выглядят немного иначе за счет использования мастер-страницы и стилей bootstrap:

Применение стилизации в ASP.NET MVC Core

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850