Brug af brugerdefinerede JavaScript-funktioner i en Blazor Server-applikation til at ændre HTML5-lærredet

Integration af JavaScript med HTML5 Canvas i Blazor

Blazor Server-applikationer giver udviklere fleksibiliteten til at bygge kraftfulde webapplikationer ved hjælp af C#- og .NET-teknologier. Der er dog scenarier, hvor det bliver nødvendigt at udnytte JavaScript, især til opgaver som at manipulere HTML5-lærredselementet. Et sådant scenarie involverer dynamisk tegning på et lærred baseret på data, der sendes gennem en Blazor-komponent.

I denne særlige opsætning har du muligvis en løkke på din Blazor Razor-side, hvor en liste over data bruges til at generere individuelle HTML-lærredselementer. For hvert lærred vil du kalde en brugerdefineret JavaScript-funktion til at gengive billeder eller former. Denne kombination af C# og JavaScript giver en unik udfordring, men giver stor alsidighed.

Selvom du måske har testet din JavaScript-kode med succes i selvstændige HTML-projekter, kræver det en anden tilgang at integrere den i Blazor, især kalde den fra Razor HTML-sektionen. Det er her Blazors JavaScript-interop kommer i spil, specifikt gennem brugen af ​​`IJSRuntime`-tjenesten.

I denne vejledning vil vi undersøge, hvordan du kan kalde din brugerdefinerede JavaScript-funktion for at manipulere lærredet fra Blazor-serverprojektets HTML-sektion. Vi nedbryder processen trin for trin for at sikre en jævn integration mellem Blazor og JavaScript.

Forklaring af Blazor og JavaScript Interop for Canvas Manipulation

Det første script-eksempel viser, hvordan man udnytter IJSRuntime at aktivere JavaScript-funktioner inde fra en Blazor-komponent. De @indsprøjte direktiv bruges til at injicere IJSRuntime service, som letter kommunikationen mellem Blazor og JavaScript. Dette er vigtigt, når du skal manipulere HTML-elementer som f.eks HTML5 lærred fra C#. I dette eksempel går en loop gennem en liste med data, og for hvert element på listen genereres et lærredselement dynamisk. Ved hjælp af et knapklik, JavaScript-funktionen tegneBillede kaldes og videregiver lærredets ID og de tilsvarende data.

Nøglen til denne tilgang er brugen af InvokeVoidAsync, en metode, der tillader C# at kalde JavaScript-funktioner uden at forvente en returværdi. Dette er vigtigt, når du blot ønsker at udføre en handling, såsom at tegne et billede på lærredet, og ikke behøver et svar fra JavaScript. En anden bemærkelsesværdig del er OnAfterRenderAsync livscyklusmetode i Blazor, som sikrer, at JavaScript-funktionen kaldes, efter at komponenten er fuldt gengivet. Dette er især afgørende, når du manipulerer DOM-elementer som lærredet, da forsøg på at få adgang til lærredet for tidligt kan resultere i fejl.

I det andet script-eksempel introduceres en mere modulær tilgang vha IJSObjectReference. Dette giver dig mulighed for at indlæse JavaScript-kode som et modul, som kan genbruges på tværs af flere komponenter. Modulet indlæses én gang, og derefter kaldes funktionerne i det, når det er nødvendigt. Denne metode forbedrer vedligeholdelsen af ​​koden og gør det nemmere at administrere større JavaScript-kodebaser. Ved kun at importere JavaScript-modulet én gang, forbedres din applikations ydeevne, og du undgår at genindlæse scripts unødigt.

Endelig bruger enhedstestscriptet Moq bibliotek for at sikre, at JavaScript-interopkald fungerer korrekt. De Verificerbar metode bruges til at markere forventede opkald til InvokeAsync som verificerbar, hvilket betyder, at du under test kan kontrollere, om interop-funktionen faktisk blev kaldt med de korrekte parametre. Denne metode sikrer, at integrationen mellem Blazor og JavaScript er robust, og den tilføjer et ekstra lag af pålidelighed til dit projekt ved at validere korrektheden af ​​interopkald under testning.

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

Udforsker JavaScript Interop til dynamisk lærredsmanipulation i Blazor

I Blazor åbner muligheden for at kalde brugerdefinerede JavaScript-funktioner op for effektive muligheder for dynamisk front-end-manipulation, især når du arbejder med grafiske elementer som f.eks. HTML5 lærred. Et nøgleaspekt af denne proces, som endnu ikke er blevet dækket, er brugen af ​​asynkrone JavaScript-kald inden for Blazors serverside-arkitektur. Da Blazor opererer på serveren, håndteres kommunikationen mellem klient og server via SignalR, hvilket betyder, at når du kalder en JavaScript-funktion fra Razor-siden, bliver interaktionen lidt forsinket. At forstå, hvordan man håndterer disse asynkrone operationer, sikrer, at lærredsmanipulation foregår problemfrit.

En anden vigtig faktor er at optimere måden JavaScript og C# interagerer på, når der er flere lærredselementer på siden. Når du går gennem en liste, og hvert element har sit eget lærredselement, er udfordringen at sikre, at hvert lærred modtager de korrekte tegneinstruktioner fra den tilsvarende JavaScript-funktion. Dette kan håndteres effektivt ved at sikre, at hvert lærred har en unik identifikator, der sendes som en parameter i interopkaldet. Korrekt fejlhåndtering og validering inden for JavaScript bliver også afgørende ved behandling af flere lærreder.

Endelig er præstationsovervejelser væsentlige, når man beskæftiger sig med JavaScript-interop i Blazor. Mens små scripts fungerer godt i de fleste tilfælde, kan tunge lærredsoperationer som gengivelse af komplekse former eller billeder forårsage flaskehalse i ydeevnen, hvis de ikke optimeres. Teknikker såsom at begrænse størrelsen af ​​lærredet, bruge off-screen lærreder eller batchbehandling af grafiske ændringer kan hjælpe med at forbedre gengivelseshastigheder. Forståelse af disse optimeringsstrategier vil sikre, at din Blazor-app forbliver effektiv, mens du håndterer komplekse frontend-renderingsopgaver.