asp.net-coremodel-view-controllerrazor-pages.net-8.0

Conditional @section for stylesheets and scripts


I was curious if there is a way to make my scripts conditional based on the environment? I've seen some examples similar to mine but for some reason the scripts do not render when published.

_ViewImports

@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

Layout (does work)

@RenderSection("Styles", false)

@{
    if (@Configuration["ASPNETCORE_ENVIRONMENT"] == "Development")
    {
        <link href="~/css/test.css" rel="stylesheet" asp-append-version="true" />           
    }
    else
    {
        <link href="~/css/test.min.css" rel="stylesheet" asp-append-version="true" />
    }
}

View (what doesn't work)

@* @{
    if (@Configuration["ASPNETCORE_ENVIRONMENT"] == "Development")
    {
        @section Styles {
        <link rel="stylesheet" href="~/css/Folder/file.css" asp-append-version="true"/>
       }
        
    }
    else
    {
       @section Styles {
        <link rel="stylesheet" href="~/css/Folder/file.min.css" asp-append-version="true"/>
       }
        
    }
} *@

If I only pass Folder/file.min.css or Folder/file.css within the @section Styles they render. So I know both file versions exist; however, for some reason if @section is inside the @{} it doesn't render.

Note: Configuration value is inside my appsettings-development-json and I have confirmed both in debug and publish that the value is returned correctly.


Solution

  • You can change your code like beow.

    @section Styles {
        @if (Configuration["ASPNETCORE_ENVIRONMENT"] == "Development")
        {
            <link rel="stylesheet" href="~/css/file.css" asp-append-version="true" />
        }
    
        else
        {
            <link rel="stylesheet" href="~/css/file.min.css" asp-append-version="true" />
        }
    }
    

    Test Result

    Development

    enter image description here

    Production

    enter image description here

    My test css files.

    enter image description here

    Index.cshtml

    @inject IConfiguration Configuration
    @{
        ViewData["Title"] = "Home Page";
    
    }
    
    <div class="text-center">
        <h1 class="display-4">Welcome</h1>
        <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    </div>
    
    @section Styles {
        @if (Configuration["ASPNETCORE_ENVIRONMENT"] == "Development")
        {
            <link rel="stylesheet" href="~/css/file.css" asp-append-version="true" />
        }
    
        else
        {
            <link rel="stylesheet" href="~/css/file.min.css" asp-append-version="true" />
        }
    }
    

    _Layout.cshtml

        ...
        <footer class="border-top footer text-muted">
            <div class="container">
                &copy; 2025 - _79325064 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
            </div>
        </footer>
        <script src="~/lib/jquery/dist/jquery.min.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
        @await RenderSectionAsync("Scripts", required: false)
        @await RenderSectionAsync("Styles", required: false)
    </body>
    </html>