Bruk av egendefinerte JavaScript-funksjoner i en Blazor Server-applikasjon for å endre HTML5-lerretet

Integrering av JavaScript med HTML5 Canvas i Blazor

Blazor Server-applikasjoner gir utviklere fleksibiliteten til å bygge kraftige nettapplikasjoner ved hjelp av C#- og .NET-teknologier. Imidlertid er det scenarier der bruk av JavaScript, spesielt for oppgaver som å manipulere HTML5-lerretselementet, blir nødvendig. Et slikt scenario involverer dynamisk tegning på et lerret basert på data som sendes gjennom en Blazor-komponent.

I dette bestemte oppsettet kan det hende du har en løkke på Blazor Razor-siden din der en liste med data brukes til å generere individuelle HTML-lerretselementer. For hvert lerret vil du kalle en tilpasset JavaScript-funksjon for å gjengi bilder eller former. Denne kombinasjonen av C# og JavaScript gir en unik utfordring, men gir stor allsidighet.

Selv om du kanskje har testet JavaScript-koden vellykket i frittstående HTML-prosjekter, krever integrering av den i Blazor, spesielt å kalle den fra Razor HTML-delen, en annen tilnærming. Det er her Blazors JavaScript-interop kommer inn i bildet, spesielt gjennom bruken av `IJSRuntime`-tjenesten.

I denne veiledningen vil vi utforske hvordan du kan kalle din egendefinerte JavaScript-funksjon for å manipulere lerretet fra Blazor-serverprosjektets HTML-seksjon. Vi vil bryte ned prosessen trinn for trinn for å sikre jevn integrasjon mellom Blazor og JavaScript.

Forklarer Blazor og JavaScript Interop for Canvas Manipulation

Det første skripteksemplet viser hvordan du kan utnytte IJSRuntime å påkalle JavaScript-funksjoner fra en Blazor-komponent. De @injiser direktiv brukes til å injisere IJSRuntime tjeneste, som letter kommunikasjonen mellom Blazor og JavaScript. Dette er viktig når du trenger å manipulere HTML-elementer som HTML5-lerret fra C#. I dette eksemplet går en løkke gjennom en liste med data, og for hvert element i listen genereres et lerretselement dynamisk. Ved hjelp av et knappeklikk, JavaScript-funksjonen tegne bilde kalles, og sender IDen til lerretet og de tilsvarende dataene.

Nøkkelen til denne tilnærmingen er bruken av InvokeVoidAsync, en metode som lar C# kalle JavaScript-funksjoner uten å forvente en returverdi. Dette er viktig når du bare vil utføre en handling, for eksempel å tegne et bilde på lerretet, og ikke trenger et svar fra JavaScript. En annen bemerkelsesverdig del er OnAfterRenderAsync livssyklusmetode i Blazor, som sikrer at JavaScript-funksjonen kalles opp etter at komponenten er fullstendig gjengitt. Dette er spesielt viktig når du manipulerer DOM-elementer som lerretet, da forsøk på å få tilgang til lerretet for tidlig kan resultere i feil.

I det andre skripteksemplet introduseres en mer modulær tilnærming ved å bruke IJSObjectReference. Dette lar deg laste inn JavaScript-kode som en modul, som kan gjenbrukes på tvers av flere komponenter. Modulen lastes en gang, og deretter kalles funksjonene i den opp ved behov. Denne metoden forbedrer vedlikeholdbarheten til koden og gjør det enklere å administrere større JavaScript-kodebaser. Ved å importere JavaScript-modulen bare én gang, forbedres ytelsen til applikasjonen din, og du unngår å laste inn skript på nytt unødvendig.

Til slutt bruker enhetstestingsskriptet Moq bibliotek for å sikre at JavaScript-interop-kall fungerer som de skal. De Verifiserbar metoden brukes til å merke forventede anrop til InvokeAsync som verifiserbar, noe som betyr at du under tester kan sjekke om interop-funksjonen faktisk ble kalt med de riktige parameterne. Denne metoden sikrer at integrasjonen mellom Blazor og JavaScript er robust, og den legger til et ekstra lag med pålitelighet til prosjektet ditt ved å validere korrektheten til interoprop under testing.

// MyPage.razor
@page "/mypage"
@inject IJSRuntime JSRuntime
@code {
    private async Task DrawImageOnCanvas(MyData data)
    {
        await JSRuntime.InvokeVoidAsync("drawImage", data.Id, data);
    }
}

<div>@foreach (var data in ListOfMyData) {
    <div><canvas id="@data.Id" class="myDataImage"></canvas></div>
    <button @onclick="() => DrawImageOnCanvas(data)">Draw Image</button>
}</div>

// MyPage.razor
@page "/mypage"
@inject IJSRuntime JSRuntime
@code {
    private IJSObjectReference _jsModule;
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./js/MyJavaScript.js");
        }
    }
    private async Task DrawImageOnCanvas(MyData data)
    {
        await _jsModule.InvokeVoidAsync("drawImage", data.Id, data);
    }
}

<div>@foreach (var data in ListOfMyData) {
    <div><canvas id="@data.Id" class="myDataImage"></canvas></div>
    <button @onclick="() => DrawImageOnCanvas(data)">Draw Image</button>
}</div>

// TestComponent.razor.cs
@page "/testpage"
@inject IJSRuntime JSRuntime
@code {
    public void TestDrawImage()
    {
        var jsInteropMock = new Mock<IJSRuntime>();
        jsInteropMock.Setup(x => x.InvokeAsync<Void>("drawImage", It.IsAny<object[]>())).Verifiable();
        jsInteropMock.Verify();
    }
}

Utforsker JavaScript Interop for Dynamic Canvas Manipulation i Blazor

I Blazor åpner muligheten til å kalle tilpassede JavaScript-funksjoner opp kraftige alternativer for dynamisk frontend-manipulering, spesielt når du arbeider med grafiske elementer som HTML5-lerret. Et nøkkelaspekt ved denne prosessen som ikke har blitt dekket ennå, er bruken av asynkrone JavaScript-anrop innenfor Blazors serversidearkitektur. Ettersom Blazor opererer på serveren, håndteres kommunikasjonen mellom klienten og serveren via SignalR, noe som betyr at når du kaller en JavaScript-funksjon fra Razor-siden, blir interaksjonen litt forsinket. Å forstå hvordan man håndterer disse asynkrone operasjonene sikrer at lerretsmanipulering skjer jevnt.

En annen viktig faktor er å optimalisere måten JavaScript og C# samhandler på når det er flere lerretselementer på siden. Når du går gjennom en liste, og hvert element har sitt eget lerretselement, er utfordringen å sørge for at hvert lerret mottar de riktige tegneinstruksjonene fra den tilsvarende JavaScript-funksjonen. Dette kan håndteres effektivt ved å sikre at hvert lerret har en unik identifikator som sendes som en parameter i interopropet. Riktig feilhåndtering og validering innen JavaScript blir også avgjørende ved behandling av flere lerreter.

Til slutt er ytelseshensyn viktige når man arbeider med JavaScript-interop i Blazor. Selv om små skript fungerer bra i de fleste tilfeller, kan tunge lerretsoperasjoner som å gjengi komplekse former eller bilder forårsake flaskehalser i ytelsen hvis de ikke optimaliseres. Teknikker som å begrense størrelsen på lerretet, bruk av lerreter utenfor skjermen eller batchbehandling av grafiske endringer kan bidra til å forbedre gjengivelseshastighetene. Å forstå disse optimaliseringsstrategiene vil sikre at Blazor-appen din forblir ytende mens du håndterer komplekse frontend-gjengivelsesoppgaver.