Início / coding / Perguntas / 77010240
Accepted
Sam
Asked: 2023-08-31 01:21:59 +0800 CST

Manipular index.html no Blazor WASM

  • 772

Estou trabalhando em meu primeiro aplicativo Blazor WASM e preciso definir/alterar programaticamente as classes para a <body>tag que está no arquivo index.html. Por exemplo, a definição do tema claro/escuro é feita definindo a classe apropriada para a <body>tag.

Isso só é possível através do JS Interop ou existe outra maneira de lidar com isso?

blazor

1 respostas

  1. Best Answer

    Não, bodyestá fora do escopo Blazor DOM. No entanto, é relativamente fácil com JsInterop.

    site.js registrado em index.html ou _Host.cshtml .

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

    Um serviço:

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

    Registrado:

    builder.Services.AddScoped<BlazrInteropLibrary>();

    Defina idcomo <body>"blazorBody".

    E uma página de demonstração simples.

    @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

relate perguntas