It is a question regarding design. In my ASP.Net Core MVC app I have 2 Layouts. My Default Layout and my Admin Layout which are quite self explanatory by there name. I do import the same js and css for both of my layouts e.g. Bootstrap and jQuery and some more. I wonder if I should create a partial view which contains these. There might be different solutions which I do not know about.
Any help is appreciated.
You can use nested layouts to have a hierarchy of layouts. I have a similar scenario as yours. I have a _MasterLayout.cshtml in Shared with the full set of CSS and JS I pull in for all pages. Then create a separate layout file for different sections. Reference the master layout at the top and then include all of the other sections adding specific code for that layout.
So you could have a MasterLayout like:
<!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>
And a separate nested layout like the following:
@{
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)
}
There's not a lot of documentation for nested layouts. Here's one other article I found describing the approach.
_MasterLayout by a chance?
@RenderSection still needed in the nested Layout and why are only the scripts marked as @section Script but not the styles?I can't tell if it would be good or not to create a partial for both layouts, but I would recommend a hidden, tiny tag helper for script tag (and link as well) that I think you might find useful. It is asp-src-include.
<script asp-src-include="/assets/js/*.js"></script>
is rendered to the html like;
<script src="/assets/js/jquery.js"></script>
<script src="/assets/js/bootstrap.js"></script>
<script src="/assets/js/custom.js"></script>
and same functionality applies to link tag as well.
I think this might tidy up your layouts a bit. Yo can find out detailed posts about these tag helpers here and here
