主页 / coding / 问题 / 77010240
Accepted
Sam
Asked: 2023-08-31 01:21:59 +0800 CST

在 Blazor WASM 中操作 index.html

  • 772

我正在开发我的第一个 Blazor WASM 应用程序，我需要以编程方式设置/<body>更改index.html. 例如，设置浅色/深色主题是通过为<body>标签设置适当的类来完成的。

这只能通过 JS Interop 实现吗？还是有其他方法可以处理它？

blazor

1 个回答

  1. Best Answer

    不，body在 Blazor DOM 范围之外。然而，使用 JsInterop 相对容易。

    site.js注册在index.html或_Host.cshtml中。

    window.Blazr = {
    setCssClass: function (elementId, css) {
        var link = document.getElementById(elementId);
        link.className = css;
        return true;
    }
}

    一项服务：

    public class BlazrInteropLibrary
{
    protected IJSRuntime JSRuntime { get; }

    public BlazrInteropLibrary(IJSRuntime jsRuntime)
        => JSRuntime = jsRuntime;

    public ValueTask<bool> SetCssClass(string elementId, string css)
        => JSRuntime.InvokeAsync<bool>("Blazr.setCssClass", elementId, css);
}

    挂号的：

    builder.Services.AddScoped<BlazrInteropLibrary>();

    将idof设置<body>为“blazorBody”。

    和一个简单的演示页面。

    @page "/"
@inject BlazrInteropLibrary BlazrJs

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />
<div>
    <button class="btn btn-primary" @onclick="ChangeBody">Change</button>
</div>

@code {
    private async Task ChangeBody()
    {
       await BlazrJs.SetCssClass("blazorBody", "black-background");
    }
}
    • 0

相关问题