Создайте частичное представление для импорта css и js asp.net core 2.2
Это вопрос относительно дизайна. В моем приложении ASP.Net Core MVC у меня есть 2 макета. Мой макет по умолчанию и мой макет администратора, название которых говорит само за себя. Я импортирую одни и те же js и css для обоих моих макетов, например. Bootstrap и jQuery и еще кое-что. Интересно, должен ли я создать частичное представление, содержащее их. Могут быть разные решения, о которых я не знаю.
Любая помощь приветствуется.
@MikeBrind спасибо :)
Ответы 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.
Я думаю, это может немного привести в порядок ваши макеты. Вы можете найти подробные сообщения об этих помощниках тегов здесь и здесь.
Это довольно хорошая идея, но большинство сценариев я беру с CDN.
Вы можете использовать вложенные макеты для создания иерархии макетов. У меня такой же сценарий, как у вас. У меня есть _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)
}
Документации по вложенным макетам не так много. Вот еще один статья, который я нашел, описывающий подход.
Не могли бы вы случайно поделиться и своим _MasterLayout?
Добавлена упрощенная версия того, что мы используем.
Почему @RenderSection по-прежнему нужен во вложенном макете и почему @section Script отмечены только скрипты, но не стили?
Я не уверен, что они все еще нужны, просто делитесь работами для меня прямо сейчас. Не стесняйтесь попробовать это без них. Главное, я думаю, что это предпочтительный способ иметь несколько макетов. Частичные представления тоже могут работать, я не знаю, но мне нравится иметь центральное расположение для всех js/css.
Частичное представление является наиболее подходящим инструментом для повторно используемого контента, который не требует обработки на стороне сервера (например, доступа к данным), поэтому это правильное решение для ваших требований.