Kohandatud JavaScripti funktsioonide kasutamine Blazori serverirakenduses HTML5 lõuendi muutmiseks

JavaScripti integreerimine HTML5 lõuendiga Blazoris

Blazor Serveri rakendused pakuvad arendajatele paindlikkust võimsate veebirakenduste loomiseks, kasutades C#- ja .NET-tehnoloogiaid. Siiski on stsenaariume, kus JavaScripti kasutamine on vajalik, eriti selliste toimingute jaoks nagu HTML5 lõuendi elemendiga manipuleerimine. Üks selline stsenaarium hõlmab dünaamilist joonistamist lõuendile Blazori komponendi kaudu edastatud andmete põhjal.

Selle konkreetse seadistuse korral võib teie Blazor Razori lehel olla silmus, kus andmete loendit kasutatakse üksikute HTML-lõuendi elementide genereerimiseks. Iga lõuendi jaoks soovite piltide või kujundite renderdamiseks kutsuda kohandatud JavaScripti funktsiooni. See C# ja JavaScripti kombinatsioon pakub ainulaadset väljakutset, kuid pakub suurepärast mitmekülgsust.

Ehkki olete võib-olla katsetanud oma JavaScripti koodi edukalt iseseisvates HTML-projektides, nõuab selle Blazori integreerimine, eriti selle kutsumine jaotisest Razor HTML, teistsugust lähenemist. Siin tuleb mängu Blazori JavaScripti interop, eriti teenuse "IJSRuntime" kasutamise kaudu.

Selles juhendis uurime, kuidas saate kutsuda oma kohandatud JavaScripti funktsiooni, et manipuleerida lõuendiga Blazori serveriprojekti HTML-i jaotises. Jagame protsessi samm-sammult, et tagada Blazori ja JavaScripti sujuv integreerimine.

Blazori ja JavaScripti interopi selgitamine lõuendiga manipuleerimiseks

Esimene skripti näide näitab, kuidas võimendada IJSRuntime JavaScripti funktsioonide käivitamiseks Blazori komponendist. The @süst käskkirja kasutatakse süstimiseks IJSRuntime teenus, mis hõlbustab suhtlust Blazori ja JavaScripti vahel. See on oluline, kui peate manipuleerima selliste HTML-elementidega nagu HTML5 lõuend alates C#. Selles näites läbib tsükkel andmete loendit ja iga loendi üksuse jaoks luuakse dünaamiliselt lõuendielement. Nupuklõpsuga JavaScripti funktsioon joonista pilt kutsutakse, edastades lõuendi ID ja vastavad andmed.

Selle lähenemisviisi võti on kasutamine InvokeVoidAsync, meetod, mis võimaldab C#-l välja kutsuda JavaScripti funktsioone ilma tagastamisväärtust ootamata. See on oluline, kui soovite lihtsalt sooritada toimingu, näiteks joonistada lõuendile kujutise, ja te ei vaja JavaScripti vastust. Teine tähelepanuväärne osa on OnAfterRenderAsync elutsükli meetod Blazoris, mis tagab JavaScripti funktsiooni kutsumise pärast komponendi täielikku renderdamist. See on eriti oluline DOM-i elementidega, näiteks lõuendiga, manipuleerimisel, kuna lõuendile liiga varane juurdepääs võib põhjustada vigu.

Teises skripti näites tutvustatakse modulaarsemat lähenemist IJSObjectReference. See võimaldab laadida JavaScripti koodi moodulina, mida saab mitmes komponendis uuesti kasutada. Moodul laaditakse üks kord ja seejärel kutsutakse vajaduse korral välja selle sees olevad funktsioonid. See meetod parandab koodi hooldatavust ja hõlbustab suuremate JavaScripti koodibaaside haldamist. JavaScripti mooduli ainult üks kord importimine suurendab teie rakenduse jõudlust ja väldite skriptide asjatut uuesti laadimist.

Lõpuks kasutab üksuse testimise skript Moq teek, et tagada JavaScripti interop-kutsete korrektne toimimine. The Kontrollitav meetodit kasutatakse eeldatavate kõnede tähistamiseks InvokeAsync kontrollitav, mis tähendab, et testide käigus saate kontrollida, kas interop-funktsiooni kutsuti välja õigete parameetritega. See meetod tagab, et Blazori ja JavaScripti vaheline integratsioon on tugev ning lisab teie projektile täiendava usaldusväärsuse, kinnitades testimise ajal interop-kõnede õigsuse.

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

JavaScripti koosmõju uurimine Blazoris dünaamilise lõuendiga manipuleerimiseks

Blazoris avab kohandatud JavaScripti funktsioonide kutsumise võimalus võimsad võimalused dünaamiliseks esiotsa manipuleerimiseks, eriti kui töötate selliste graafiliste elementidega nagu HTML5 lõuend. Selle protsessi üks peamisi aspekte, mida pole veel käsitletud, on asünkroonsete JavaScripti kõnede kasutamine Blazori serveripoolses arhitektuuris. Kuna Blazor töötab serveris, toimub side kliendi ja serveri vahel SignalR-i kaudu, mis tähendab, et kui kutsute Razori lehelt JavaScripti funktsiooni, siis interaktsioon viibib veidi. Nende asünkroonsete toimingute käsitsemise mõistmine tagab lõuendiga manipuleerimise sujuva.

Teine oluline tegur on JavaScripti ja C# interaktsiooni optimeerimine, kui lehel on mitu lõuendielementi. Kui sirvite loendit ja igal üksusel on oma lõuendi element, ülesanne on tagada, et iga lõuend saaks vastavalt JavaScripti funktsioonilt õiged joonistusjuhised. Seda saab tõhusalt käsitleda, tagades, et igal lõuendil on kordumatu identifikaator, mis edastatakse koostöökõnes parameetrina. Korrektne vigade käsitlemine ja valideerimine JavaScriptis muutuvad oluliseks ka mitme lõuendi töötlemisel.

Lõpuks on jõudluskaalutlused olulised, kui käsitleda JavaScripti koostoimet Blazoris. Kuigi väikesed skriptid töötavad enamikul juhtudel hästi, võivad rasked lõuenditoimingud, nagu keerukate kujundite või kujutiste renderdamine, põhjustada jõudluse kitsaskohti, kui neid ei optimeerita. Sellised võtted nagu lõuendi suuruse piiramine, ekraaniväliste lõuendite kasutamine või graafiliste muudatuste paketttöötlus võivad aidata parandada renderduskiirust. Nende optimeerimisstrateegiate mõistmine tagab, et teie rakendus Blazor jääb keerukate esiotsa renderdamisülesannete täitmisel toimima.