CODEWITHSUNDEEP
c#asp.net-core-mvcpartial-viewsrazor-pages
Twenty
Twenty

Reputation: 5911

Create a partial view for the imports of css and js asp.net core 2.2

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.

Upvotes: 2

Views: 2800

Answers (2)

Brad Patton
Brad Patton

Reputation: 4205

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.

Upvotes: 2

ibubi
ibubi

Reputation: 2539

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

Upvotes: 1

Related Questions