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

Question

I'm trying to reach to body from a Razor page.我正在尝试从 Razor 页面到达正文。 I have just started to learn Blazor.我刚刚开始学习 Blazor。 So I don't know if it is possible or not.所以我不知道这是否可能。 Basically I'm trying to change the body class from the C# side and from different pages.基本上，我试图从 C# 端和不同页面更改主体类。 I can do it with JavaScript but I want to do it with Blazor WebAssembly.我可以用 JavaScript 来做，但我想用 Blazor WebAssembly 来做。 It can work if the body is inside of the Razor page.如果正文位于 Razor 页面内，则它可以工作。 But I don't want to use it that way.但我不想那样使用它。

index.html :索引.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 : 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

If you want to change out the <body> class如果你想改变<body>类

Add a JS file.添加一个JS文件。

site.js网站.js


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

Reference it in Host.cshtml .在Host.cshtml 中引用它。
Create an id on <body> .在<body>上创建一个id 。

<body id="BlazorMainBody">

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

Add a helper 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);
    }
}

This shows toggling it in a page这显示在页面中切换它

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

You can change out the whole stylesheet in a similar way - see this note of mine您可以以类似的方式更改整个样式表 - 请参阅我的这篇笔记

Answer 2

wrap your Layout HTML in body tag.将您的布局 HTML 包装在 body 标签中。

I needed the navbar-collapsed class in the body in some layouts and navbar-expand in some layouts.我需要在某些布局中的主体中使用导航栏折叠类，在某些布局中使用导航栏扩展。 By default it was navbar-expand so in the other layout where I needed collapsed I just wrapped my layout HTML in BODY tag with "class=navbar-collapsed" and it worked.默认情况下，它是 navbar-expand，所以在我需要折叠的其他布局中，我只是将布局 HTML 包裹在带有“class=navbar-collapsed”的 BODY 标签中，并且它起作用了。

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

问题描述

2 个解决方案

解决方案1
4 已采纳 2021-06-25 16:41:19

解决方案2
0 2021-11-25 11:03:09

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

问题描述

2 个解决方案

解决方案1 4 已采纳 2021-06-25 16:41:19

解决方案2 0 2021-11-25 11:03:09

解决方案1
4 已采纳 2021-06-25 16:41:19

解决方案2
0 2021-11-25 11:03:09