Blazor set CSS file based on request path

Question

I'm attempting to switch out the css file on the fly - based on which part of the web-system the user is in (i.e. if the user is on mydomain/students/page then the page loads with students.min.css, rather than site.min.css).

I've tried doing it within the _Host.cshtml:

@page "/"
@namespace FIS2withSyncfusion.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;

    //sniff the requst path and switch the stylesheet accordingly
    string path = Request.Path;

    string css = "site.min.css";

    if (path.ToLowerInvariant().StartsWith("/students"))
    {
        css = "students.min.css";
    }

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Martin's Blazor Testing Site</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/@(css)" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>

    <script type="text/javascript">
        function saveAsFile(filename, bytesBase64) {
            if (navigator.msSaveBlob) {
                //Download document in Edge browser
                var data = window.atob(bytesBase64);
                var bytes = new Uint8Array(data.length);
                for (var i = 0; i < data.length; i++) {
                    bytes[i] = data.charCodeAt(i);
                }
                var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
                navigator.msSaveBlob(blob, filename);
            }
            else {
                var link = document.createElement('a');
                link.download = filename;
                link.href = "data:application/octet-stream;base64," + bytesBase64;
                document.body.appendChild(link); // Needed for Firefox
                link.click();
                document.body.removeChild(link);
            }
        }
    </script>
</head>

<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />
    <script src="_framework/blazor.server.js"></script>

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
</body>

</html>

However, it doesn't seem to hit this codeblock after the first load of the site; meaning whichever page they first landed on denotes the stylesheet for the entire site.

Do I have to put this codeblock on every page or is there another way of doing this?

Dharman · Accepted Answer · 2021-11-15 17:16:35Z

1

another way you could approach this is to create components that respond to different styling that you desire. From there you have two options:

Create dedicated css associate with the component. From the docs
Create a class toggle in the code block of the component, similar to how the NavMenu works.

edited Nov 15, 2021 at 17:16

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Nov 15, 2021 at 17:11

Juan Emmanuel Afable

4563 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrew Corrigan Over a year ago

Yeah, that'd work - main reason I went the way I did rather than those ways is because I figured this way it'd be easier to keep stuff somewhat standardised.

Andrew Corrigan · Accepted Answer · 2021-11-15 15:46:02Z

0

After further experimentation, I've found that adding this block:

@{
    //sniff the requst path and switch the stylesheet accordingly
    string path = navManager.Uri;

    Uri uri = new Uri(path);

    List<string> parts = uri.Segments.ToList();

    string module = parts[1].ToLowerInvariant().Trim('/');

    string css = "site.min.css";

    if (module == "students")
    {
        css = "students.min.css";
    }
}

<head>
    <link rel="stylesheet" href="css/@(css)" />
</head>

To the top of MainLayout.razor works perfectly - so long as you remove the equivalent block from _Host.cshtml

answered Nov 15, 2021 at 15:46

Andrew Corrigan

1,06711 silver badges27 bronze badges

Collectives™ on Stack Overflow

Blazor set CSS file based on request path

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related