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

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

1 голос
/ 29 мая 2019

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

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

Ответы [ 2 ]

1 голос
/ 30 мая 2019

Вы можете использовать вложенные макеты, чтобы иметь иерархию макетов.У меня есть сценарий, похожий на ваш.У меня есть _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)
}

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

0 голосов
/ 29 мая 2019

Я не могу сказать, хорошо ли было бы создавать частичное для обоих макетов, но я бы порекомендовал скрытый, крошечный помощник тега для тега сценария (и ссылку также), который, я думаю, может оказаться полезным. Это 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.

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

...