如何从 Blazor WebAssembly 中的 Razor 页面访问 body 标签或其他标签？

Question

我正在尝试从 Razor 页面访问 body。我刚刚开始学习 Blazor。所以我不知道这是否可能。基本上我试图从 C# 端和不同的页面更改正文 class。我可以用 JavaScript 来做，但我想用 Blazor WebAssembly 来做。如果正文在 Razor 页面内，它就可以工作。但我不想那样使用它。

index.html:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="utf-8" />
</head>
<body class="theme-dark">
    <app>Loading...</app>
    <script src="_framework/blazor.webassembly.js"></script>
</body>
</html>

MainLayout.razor:

@inherits LayoutComponentBase
<div class="grid-wrapper sidebar-bg bg1">
    <div id="theme-tab">
        <div class="theme-tab-item switch-theme bg-white" @onclick="ToggleTheme" data-theme="theme-default" title="Light"></div>
        <div class="theme-tab-item switch-theme bg-dark" @onclick="ToggleTheme" data-theme="theme-dark" title="Dark"></div>
    </div>
    <NavMenu />
    <SideBar />
    <div class="main">
        @Body
    </div>
    <Footer />
</div>

@code {
    private bool isDark = true;
    private string currentTheme => isDark ? "theme-dark" : "theme-default"; //I want to use this variable in other pages.

    private void ToggleTheme()
    {
        isDark = !isDark;
    }
}

Answer 1

如果要换出 <body> class

添加一个 JS 文件。

site.js

window.SetBodyCss = function (elementId, classname) {
    var link = document.getElementById(elementId);
    if (link !== undefined) {
        link.className = classname;
    }
    return true;
}

在Host.cshtml.
中引用它在 <body>.

上创建一个 id

<body id="BlazorMainBody">

    <script src="/site.js"></script>
    <script src="_framework/blazor.server.js"></script>
</body>

添加助手class

using Microsoft.JSInterop;
using System.Threading.Tasks;

namespace Blazor.Starter
{
    public class AppJsInterop
    {
        protected IJSRuntime JSRuntime { get; }

        public AppJsInterop(IJSRuntime jsRuntime)
        {
            JSRuntime = jsRuntime;
        }

        public ValueTask<bool> SetBodyCss(string elementId, string cssClass)
          => JSRuntime.InvokeAsync<bool>("SetBodyCss", elementId, cssClass);
    }
}

这表明在页面中切换它

<button type="button" @onclick="SetCss">SetCss</button>

@code {
    [Inject] private IJSRuntime _js { get; set; }

    private bool _isbodyCss;

    private string _bodyCss => _isbodyCss ? "Theme-Dark" : "Theme-Light";

    private async Task SetCss()
    {
        var appJsInterop = new AppJsInterop(_js);
        await appJsInterop.SetBodyCss("BlazorMainBody", _bodyCss);
        _isbodyCss = !_isbodyCss;
    }
}

您可以用类似的方式更改整个样式表 - 请参阅此 note of mine

Answer 2

将布局 HTML 包裹在 <body> 标记中。

我需要 navbar-collapsed class 在某些布局中的 <body> 和 navbar-expand 中。默认情况下它是 navbar-expand 所以在我需要折叠的其他布局中我只是将我的布局 HTML 包裹在带有 class="navbar-collapsed" 的 <body> 标签中并且它起作用了。

如何从 Blazor WebAssembly 中的 Razor 页面访问 body 标签或其他标签？

How can I reach body tag or another tag from Razor Page in Blazor WebAssembly?

c#

razor

webassembly

blazor

blazor-webassembly