Egyéni JavaScript-függvények használata Blazor Server alkalmazásban a HTML5 vászon módosításához

JavaScript integrálása HTML5 Canvas-szal a Blazorban

A Blazor Server alkalmazások rugalmasságot biztosítanak a fejlesztőknek, hogy hatékony webalkalmazásokat készítsenek C# és .NET technológiák használatával. Vannak azonban olyan forgatókönyvek, amikor a JavaScript kihasználása szükségessé válik, különösen olyan feladatokhoz, mint a HTML5 vászonelem manipulálása. Az egyik ilyen forgatókönyv magában foglalja a dinamikus rajzolást egy vászonra a Blazor-komponensen áthaladó adatok alapján.

Ebben a konkrét beállításban előfordulhat, hogy a Blazor Razor oldalon van egy hurok, ahol az adatok listája egyedi HTML vászonelemek létrehozására szolgál. Minden egyes vászonhoz meg kíván hívni egy egyéni JavaScript-függvényt a képek vagy alakzatok megjelenítéséhez. A C# és a JavaScript ezen kombinációja egyedülálló kihívást jelent, de nagy sokoldalúságot biztosít.

Bár előfordulhat, hogy sikeresen tesztelte JavaScript-kódját önálló HTML-projektekben, a Blazorba való integrálása, különösen a Razor HTML szakaszból történő meghívása, más megközelítést igényel. Itt lép életbe a Blazor JavaScript interopja, különösen az "IJSRuntime" szolgáltatás használatával.

Ebben az útmutatóban megvizsgáljuk, hogyan hívhatja meg egyéni JavaScript-függvényét a vászon manipulálásához a Blazor szerver projekt HTML részében. A folyamatot lépésről lépésre lebontjuk, hogy biztosítsuk a Blazor és a JavaScript közötti zökkenőmentes integrációt.

A Blazor és a JavaScript interop magyarázata a vászonmanipulációhoz

Az első szkriptpélda bemutatja, hogyan lehet kihasználni IJSRuntime JavaScript függvények meghívásához egy Blazor komponensen belül. A @inject direktívát használják a beadására IJSRuntime szolgáltatás, amely megkönnyíti a kommunikációt a Blazor és a JavaScript között. Ez elengedhetetlen, ha olyan HTML-elemeket kell manipulálnia, mint a HTML5 vászon C#-ból. Ebben a példában egy hurok átmegy egy adatlistán, és a lista minden eleméhez dinamikusan generál egy vászonelemet. Egy gombnyomással a JavaScript függvény drawImage hívják, átadva a vászon azonosítóját és a megfelelő adatokat.

Ennek a megközelítésnek a kulcsa a használata InvokeVoidAsync, egy olyan módszer, amely lehetővé teszi a C# számára JavaScript függvények meghívását anélkül, hogy visszatérési értéket várna. Ez akkor fontos, ha egyszerűen csak egy műveletet szeretne végrehajtani, például egy képet rajzol a vászonra, és nincs szüksége válaszra a JavaScripttől. Egy másik figyelemre méltó része a OnAfterRenderAsync életciklus metódus a Blazorban, amely biztosítja, hogy a JavaScript függvény az összetevő teljes megjelenítése után kerüljön meghívásra. Ez különösen fontos a DOM-elemek, például a vászon manipulálásakor, mivel a vászon túl korai elérése hibákhoz vezethet.

A második szkriptpéldában egy modulárisabb megközelítés kerül bevezetésre a használatával IJSObjectReference. Ez lehetővé teszi a JavaScript-kód modulként való betöltését, amely több komponensben újra felhasználható. A modul egyszer betöltődik, majd a benne lévő függvények szükség esetén meghívódnak. Ez a módszer javítja a kód karbantarthatóságát, és megkönnyíti a nagyobb JavaScript-kódbázisok kezelését. Ha csak egyszer importálja a JavaScript modult, az alkalmazás teljesítménye javul, és elkerülhető a szkriptek szükségtelen újratöltése.

Végül az egységtesztelési szkript a Moq könyvtárat, hogy biztosítsa a JavaScript interop hívások megfelelő működését. A Igazolható metódust használják a várt hívások megjelölésére InvokeAsync ellenőrizhető, ami azt jelenti, hogy a tesztek során ellenőrizheti, hogy az interop függvény valóban a megfelelő paraméterekkel lett-e meghívva. Ez a módszer biztosítja, hogy a Blazor és a JavaScript közötti integráció robusztus legyen, és további megbízhatósági réteget ad a projekthez azáltal, hogy ellenőrzi az interop hívások helyességét a tesztelés során.

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

A JavaScript interop felfedezése a dinamikus vászonmanipulációhoz a Blazorban

A Blazorban az egyéni JavaScript-függvények meghívásának lehetősége hatékony lehetőségeket nyit meg a dinamikus előtér-manipulációhoz, különösen, ha grafikus elemekkel, például HTML5 vászon. Ennek a folyamatnak az egyik kulcsfontosságú aspektusa, amelyet még nem tárgyaltunk, az aszinkron JavaScript-hívások használata a Blazor szerveroldali architektúrájában. Mivel a Blazor a szerveren működik, a kliens és a szerver közötti kommunikáció a SignalR-n keresztül történik, ami azt jelenti, hogy ha JavaScript-függvényt hív meg a Razor oldalról, az interakció kissé késik. Az aszinkron műveletek kezelésének megértése biztosítja, hogy a vászonkezelés zökkenőmentesen történjen.

Egy másik fontos tényező a JavaScript és a C# interakciójának optimalizálása, ha több vászonelem van az oldalon. Amikor egy listán böngészik, és minden elemnek megvan a sajátja vászon elem, a kihívás annak biztosítása, hogy minden vászon megkapja a megfelelő rajzi utasításokat a megfelelő JavaScript-függvénytől. Ez hatékonyan kezelhető úgy, hogy minden vászonnak egyedi azonosítója van, amelyet paraméterként adnak át az interop hívásban. A JavaScripten belüli megfelelő hibakezelés és érvényesítés több vászon feldolgozásakor is kulcsfontosságúvá válik.

Végezetül, a teljesítmény szempontjai jelentősek a Blazor JavaScript-együttműködése során. Míg a kis szkriptek a legtöbb esetben jól működnek, a nehéz vászonműveletek, mint például az összetett alakzatok vagy képek megjelenítése, szűk keresztmetszeteket okozhatnak a teljesítményben, ha nem optimalizálják őket. Az olyan technikák, mint a vászon méretének korlátozása, a képernyőn kívüli vásznak használata vagy a grafikus változtatások kötegelt feldolgozása segíthetnek javítani a renderelési sebességen. Ezen optimalizálási stratégiák megértése biztosítja, hogy a Blazor alkalmazás továbbra is hatékony maradjon, miközben összetett előtér-megjelenítési feladatokat is kezel.