Blazor WASM - how to change body class dynamic inside Layout

1
votes

I have a Blazor application. In my Index.html (wwwroot) I have the following body:

<body class="vertical-layout vertical-menu 2-columns fixed-navbar" data-open="click" data-menu="vertical-menu" data-col="2-columns">
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">????</a>
    </div>
    <script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>

    <script src="js/app.js"></script>
</body>

</html>

If you note, my Body tag has a class decoration.

I have 3 Layouts that I will have to change the Body class to a different value, but because Body tag lives inside the index.html I can't find a way to do this.

Any advice?

1
blazorblazor-client-sideblazor-webassembly

1 Answers

0
votes

Use JS Interop. It could look like that :

window.bodyLayout = {
   toggleClass: className => {
       $('body').toggleClass(className);
   }
}

@inject JSRuntime JSRuntime
...
@code {
    private Task ToggleBodyClass(string className)
    {
        return JSRuntime.InvokeVoidAsync("bodyLayout.toggleClass", className);
    }
}