Question

我有Blazor应用程序。在我的Index.html（wwwroot）中，我具有以下内容：

<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>

请注意，我的Body标签带有类修饰。

我有3种布局，必须将Body类更改为其他值，但是由于Body标记位于index.html内，所以我找不到解决方法。

有什么建议吗？

Answer 1

使用JS Interop。看起来可能像这样：

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

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

Blazor WASM-如何在布局内更改实体类动态

1 个答案: