Создать частичное представление для импорта css и js asp.net core 2.2

Question

Это вопрос дизайна. В моем приложении ASP.Net Core MVC у меня есть 2 макета. Мое расположение по умолчанию и мое расположение администратора, которые самоочевидны по названию. Я импортирую одинаковые js и css для обеих моих макетов, например Bootstrap и JQuery и некоторые другие. Интересно, должен ли я создать частичное представление, которое содержит это. Могут быть разные решения, о которых я не знаю.

Любая помощь приветствуется.

c# asp.net-core-mvc partial-views razor-pages

2

Twenty 29 Май 2019 в 09:56

Answer 1

Вы можете использовать вложенные макеты, чтобы иметь иерархию макетов. У меня есть сценарий, похожий на ваш. У меня есть _MasterLayout.cshtml в Shared с полным набором CSS и JS, которые я использую для всех страниц. Затем создайте отдельный файл макета для разных разделов. Ссылайтесь на главный макет вверху, а затем включите все остальные разделы, добавив специальный код для этого макета.

Таким образом, вы можете иметь MasterLayout, как:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="content-security-policy" content="upgrade-insecure-requests" />

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />

    @RenderSection("Styles", required: false)

    <title>@ViewData["Title"]</title>
</head>
<body>

    <div class="container body-content">
        @RenderBody()
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" crossorigin="anonymous"</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>

И отдельный вложенный макет, подобный следующему:

@{
    Layout = "_MasterLayout";
}
@RenderSection("Styles", required: false)

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> 
   // custom navbar for anonymous users
</nav>

<div class="container body-content">
    @RenderBody()
</div>

@section Scripts {
    @RenderSection("Scripts", required: false)
}

Там не много документации для вложенных макетов. Вот еще один Статья я нашел с описанием подхода.

2

Brad Patton 30 Май 2019 в 13:43

Answer 2

Я не могу сказать, было бы хорошо или нет создавать партиал для обоих макетов, но я бы порекомендовал скрытый, крошечный помощник по тегам для тега скрипта (и ссылки тоже), который, я думаю, может оказаться полезным. Это asp-src-include.

<script asp-src-include="/assets/js/*.js"></script>

Отображается как HTML;

<script src="/assets/js/jquery.js"></script>
<script src="/assets/js/bootstrap.js"></script>
<script src="/assets/js/custom.js"></script>

И та же функциональность применима и к тегу link.

Я думаю, что это может привести в порядок ваши макеты. Вы можете найти подробные сообщения об этих помощниках по тегам здесь и здесь

1

ibubi 29 Май 2019 в 08:42

Создать частичное представление для импорта css и js asp.net core 2.2

2 ответа

Похожие вопросы

Новые вопросы

c#