Anropa JavaScript-funktioner från .NET-metoder i ASP.NET Core Blazor

Den här artikeln beskriver hur du anropar JavaScript-funktioner (JS) från .NET.

Information om hur du anropar .NET-metoder från JSfinns i Anropa .NET-metoder från JavaScript-funktioner i ASP.NET Core Blazor.

Anropa JS-funktioner

IJSRuntime registreras av Blazor ramverket. Om du vill anropa JS från .NET matar du in IJSRuntime abstraktion och anropar någon av följande metoder:

• IJSRuntime.InvokeAsync
• JSRuntimeExtensions.InvokeAsync
• JSRuntimeExtensions.InvokeVoidAsync

För de föregående .NET-metoderna som anropar JS funktioner:

• Funktionsidentifieraren (String) är relativ till det globala omfånget (window). Om du vill anropa window.someScope.someFunctionär identifieraren someScope.someFunction. Du behöver inte registrera funktionen innan den anropas.
• Skicka valfritt antal JSON-serialiserbara argument i Object[] till en JS funktion.
• Annulleringstoken (CancellationToken) sprider ett meddelande om att åtgärder ska avbrytas.
• TimeSpan representerar en tidsgräns för en JS åtgärd.
• Den TValue returtypen måste också vara JSON-serialiserbar. TValue ska matcha den .NET-typ som bäst mappar till den JSON-typ som returneras.
• Ett JS Promise returneras för InvokeAsync-metoder. InvokeAsync packar upp Promise och returnerar det värde som förväntas av Promise.

För Blazor appar med prerendering aktiverat, vilket är standard för appar på serversidan, är det inte möjligt att anropa JS under förinläsningen. Mer information finns i avsnittet Prerendering.

Följande exempel baseras på TextDecoder, en JS-baserad avkodare. Exemplet visar hur du anropar en JS funktion från en C#-metod som avlastar ett krav från utvecklarkod till ett befintligt JS API. Funktionen JS accepterar en bytematris från en C#-metod, avkodar matrisen och returnerar texten till komponenten för visning.

<script>
  window.convertArray = (win1251Array) => {
    var win1251decoder = new TextDecoder('windows-1251');
    var bytes = new Uint8Array(win1251Array);
    var decodedArray = win1251decoder.decode(bytes);
    return decodedArray;
  };
</script>

Not

Allmän vägledning om JS plats och våra rekommendationer för produktionsappar finns i JavaScript-plats i ASP.NET Core Blazor-appar.

Följande komponent:

• Anropar funktionen convertArrayJS med InvokeAsync när du väljer en knapp (Convert Array).
• När funktionen JS anropas konverteras den skickade matrisen till en sträng. Strängen returneras till komponenten för visning (text).

CallJs1.razor:

@page "/call-js-1"
@inject IJSRuntime JS

<PageTitle>Call JS 1</PageTitle>

<h1>Call JS Example 1</h1>

<p>
    <button @onclick="ConvertArray">Convert Array</button>
</p>

<p>
    @text
</p>

<p>
    Quote ©2005 <a href="https://www.uphe.com">Universal Pictures</a>: 
    <a href="https://www.uphe.com/movies/serenity-2005">Serenity</a><br>
    <a href="https://www.imdb.com/name/nm0472710/">David Krumholtz on IMDB</a>
</p>

@code {
    private MarkupString text;

    private uint[] quoteArray = 
        new uint[]
        {
            60, 101, 109, 62, 67, 97, 110, 39, 116, 32, 115, 116, 111, 112, 32,
            116, 104, 101, 32, 115, 105, 103, 110, 97, 108, 44, 32, 77, 97,
            108, 46, 60, 47, 101, 109, 62, 32, 45, 32, 77, 114, 46, 32, 85, 110,
            105, 118, 101, 114, 115, 101, 10, 10,
        };

    private async Task ConvertArray() => 
        text = new(await JS.InvokeAsync<string>("convertArray", quoteArray));
}

JavaScript-API:et är begränsat till användargester

Det här avsnittet gäller för komponenter på serversidan.

Vissa JavaScript-api:er (JS) i webbläsaren kan bara köras i kontexten för en användargest, till exempel med hjälp av Fullscreen API (MDN-dokumentation). Dessa API:er kan inte anropas via JS interop-mekanismen i komponenter på serversidan eftersom UI-händelsehantering utförs asynkront och vanligtvis inte längre i kontexten för användargesten. Appen måste hantera användargränssnittshändelsen helt i JavaScript, så använd onclick i stället för Blazor@onclick direktivattribut.

Anropa JavaScript-funktioner utan att läsa ett returnerat värde (InvokeVoidAsync)

Använd InvokeVoidAsync när:

• .NET krävs inte för att läsa resultatet av ett JavaScript- (JS) -anrop.
• JS funktioner returnerar void(0)/void 0 eller obestämd.

Ange en displayTickerAlert1JS funktion. Funktionen anropas med InvokeVoidAsync och returnerar inte något värde:

<script>
  window.displayTickerAlert1 = (symbol, price) => {
    alert(`${symbol}: $${price}!`);
  };
</script>

Notis

För allmän vägledning om lokaliseringen JS och våra rekommendationer för produktionsapparna, se JavaScript-lokalisering i ASP.NET Core Blazor-appar.

Komponentexempel (.razor) (InvokeVoidAsync)

TickerChanged anropar metoden handleTickerChanged1 i följande komponent.

CallJs2.razor:

@page "/call-js-2"
@inject IJSRuntime JS

<PageTitle>Call JS 2</PageTitle>

<h1>Call JS Example 2</h1>

<p>
    <button @onclick="SetStock">Set Stock</button>
</p>

@if (stockSymbol is not null)
{
    <p>@stockSymbol price: @price.ToString("c")</p>
}

@code {
    private string? stockSymbol;
    private decimal price;

    private async Task SetStock()
    {
        stockSymbol = 
            $"{(char)('A' + Random.Shared.Next(0, 26))}" +
            $"{(char)('A' + Random.Shared.Next(0, 26))}";
        price = Random.Shared.Next(1, 101);
        await JS.InvokeVoidAsync("displayTickerAlert1", stockSymbol, price);
    }
}

Exempel på klass (.cs) (InvokeVoidAsync)

JsInteropClasses1.cs:

using Microsoft.JSInterop;

namespace BlazorSample;

public class JsInteropClasses1(IJSRuntime js) : IDisposable
{
    private readonly IJSRuntime js = js;

    public async ValueTask TickerChanged(string symbol, decimal price) => 
        await js.InvokeVoidAsync("displayTickerAlert1", symbol, price);

    // Calling SuppressFinalize(this) prevents derived types that introduce 
    // a finalizer from needing to re-implement IDisposable.
    public void Dispose() => GC.SuppressFinalize(this);
}

TickerChanged anropar metoden handleTickerChanged1 i följande komponent.

CallJs3.razor:

@page "/call-js-3"
@implements IDisposable
@inject IJSRuntime JS

<PageTitle>Call JS 3</PageTitle>

<h1>Call JS Example 3</h1>

<p>
    <button @onclick="SetStock">Set Stock</button>
</p>

@if (stockSymbol is not null)
{
    <p>@stockSymbol price: @price.ToString("c")</p>
}

@code {
    private string? stockSymbol;
    private decimal price;
    private JsInteropClasses1? jsClass;

    protected override void OnInitialized() => jsClass = new(JS);

    private async Task SetStock()
    {
        if (jsClass is not null)
        {
            stockSymbol = 
                $"{(char)('A' + Random.Shared.Next(0, 26))}" +
                $"{(char)('A' + Random.Shared.Next(0, 26))}";
            price = Random.Shared.Next(1, 101);
            await jsClass.TickerChanged(stockSymbol, price);
        }
    }

    public void Dispose() => jsClass?.Dispose();
}

Anropa JavaScript-funktioner och läs ett returnerat värde (InvokeAsync)

Använd InvokeAsync när .NET ska läsa resultatet av ett JavaScript-anrop (JS).

Ange en displayTickerAlert2JS funktion. I följande exempel returneras en sträng för visning av anroparen:

<script>
  window.displayTickerAlert2 = (symbol, price) => {
    if (price < 20) {
      alert(`${symbol}: $${price}!`);
      return "User alerted in the browser.";
    } else {
      return "User NOT alerted.";
    }
  };
</script>

Notera

För allmän vägledning om JS placering och våra rekommendationer för appar i produktion, se JavaScript-placering i ASP.NET Core Blazor-appar.

Komponentexempel (.razor) (InvokeAsync)

TickerChanged anropar metoden handleTickerChanged2 och visar den returnerade strängen i följande komponent.

CallJs4.razor:

@page "/call-js-4"
@inject IJSRuntime JS

<PageTitle>Call JS 4</PageTitle>

<h1>Call JS Example 4</h1>

<p>
    <button @onclick="SetStock">Set Stock</button>
</p>

@if (stockSymbol is not null)
{
    <p>@stockSymbol price: @price.ToString("c")</p>
}

@if (result is not null)
{
    <p>@result</p>
}

@code {
    private string? stockSymbol;
    private decimal price;
    private string? result;

    private async Task SetStock()
    {
        stockSymbol = 
            $"{(char)('A' + Random.Shared.Next(0, 26))}" +
            $"{(char)('A' + Random.Shared.Next(0, 26))}";
        price = Random.Shared.Next(1, 101);
        var interopResult = 
            await JS.InvokeAsync<string>("displayTickerAlert2", stockSymbol, price);
        result = $"Result of TickerChanged call for {stockSymbol} at " +
            $"{price.ToString("c")}: {interopResult}";
    }
}

Exempel på klass (.cs) (InvokeAsync)

JsInteropClasses2.cs:

using Microsoft.JSInterop;

namespace BlazorSample;

public class JsInteropClasses2(IJSRuntime js) : IDisposable
{
    private readonly IJSRuntime js = js;

    public async ValueTask<string> TickerChanged(string symbol, decimal price) => 
        await js.InvokeAsync<string>("displayTickerAlert2", symbol, price);

    // Calling SuppressFinalize(this) prevents derived types that introduce 
    // a finalizer from needing to re-implement IDisposable.
    public void Dispose() => GC.SuppressFinalize(this);
}

TickerChanged anropar metoden handleTickerChanged2 och visar den returnerade strängen i följande komponent.

CallJs5.razor:

@page "/call-js-5"
@implements IDisposable
@inject IJSRuntime JS

<PageTitle>Call JS 5</PageTitle>

<h1>Call JS Example 5</h1>

<p>
    <button @onclick="SetStock">Set Stock</button>
</p>

@if (stockSymbol is not null)
{
    <p>@stockSymbol price: @price.ToString("c")</p>
}

@if (result is not null)
{
    <p>@result</p>
}

@code {
    private string? stockSymbol;
    private decimal price;
    private JsInteropClasses2? jsClass;
    private string? result;

    protected override void OnInitialized() => jsClass = new(JS);

    private async Task SetStock()
    {
        if (jsClass is not null)
        {
            stockSymbol = 
                $"{(char)('A' + Random.Shared.Next(0, 26))}" +
                $"{(char)('A' + Random.Shared.Next(0, 26))}";
            price = Random.Shared.Next(1, 101);
            var interopResult = await jsClass.TickerChanged(stockSymbol, price);
            result = $"Result of TickerChanged call for {stockSymbol} at " +
                $"{price.ToString("c")}: {interopResult}";
        }
    }

    public void Dispose() => jsClass?.Dispose();
}

Scenarier för dynamisk innehållsgenerering

Använd attributet [Inject] för dynamisk innehållsgenerering med BuildRenderTree:

[Inject]
IJSRuntime JS { get; set; }

Förrendering

Det här avsnittet gäller för appar på serversidan som förbereder Razor-komponenter. Prerendering beskrivs i komponenterna Prerender ASP.NET Core Razor.

Not

Intern navigering för interaktiv routning i Blazor Web Appinnebär inte att begära nytt sidinnehåll från servern. Därför sker inte prerendering för interna sidbegäranden. Om appen implementerar interaktiv routning utför du en fullständig sidinläsning för komponentexempel som visar ett förebyggande beteende. Mer information finns i Prerender ASP.NET Core Razor-komponenter.

Det går inte att anropa JavaScript (JS) under förinläsningen. I följande exempel visas hur du använder JS interop som en del av en komponents initieringslogik på ett sätt som är kompatibelt med prerendering.

Följande scrollElementIntoView funktion:

• Rullar till det skickade elementet med scrollIntoView.
• Returnerar elementets top egenskapsvärde från metoden getBoundingClientRect.

window.scrollElementIntoView = (element) => {
  element.scrollIntoView();
  return element.getBoundingClientRect().top;
}

Om IJSRuntime.InvokeAsync anropar funktionen JS i komponentkoden används ElementReference endast i OnAfterRenderAsync och inte i någon tidigare livscykelmetod eftersom det inte finns något HTML DOM-element förrän komponenten har renderats.

StateHasChanged (referenskälla) anropas för att ange omrendering av komponenten med det nya tillståndet som erhålls från JS interop-anropet (mer information finns i ASP.NET Core Razor komponentrendering). En oändlig loop skapas inte eftersom StateHasChanged bara anropas när scrollPosition är null.

PrerenderedInterop.razor:

@page "/prerendered-interop"
@using Microsoft.AspNetCore.Components
@using Microsoft.JSInterop
@inject IJSRuntime JS

<PageTitle>Prerendered Interop</PageTitle>

<h1>Prerendered Interop Example</h1>

<div @ref="divElement" style="margin-top:2000px">
    Set value via JS interop call: <strong>@scrollPosition</strong>
</div>

@code {
    private ElementReference divElement;
    private double? scrollPosition;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && scrollPosition is null)
        {
            scrollPosition = await JS.InvokeAsync<double>(
                "scrollElementIntoView", divElement);

            StateHasChanged();
        }
    }
}

Föregående exempel förorenar klienten med en global funktion. En bättre metod i produktionsappar finns i JavaScript-isolering i JavaScript-moduler.

Synkrona JS-interoperabilitet i klientkomponenter

Det här avsnittet gäller endast komponenter på klientsidan.

JS interop-anrop är asynkrona, oavsett om den anropade koden är synkron eller asynkron. Anrop är asynkrona för att säkerställa att komponenterna är kompatibla i återgivningslägen på serversidan och på klientsidan. På servern måste alla JS interop-anrop vara asynkrona eftersom de skickas via en nätverksanslutning.

Om du vet att komponenten bara körs på WebAssembly kan du välja att göra synkrona JS interop-anrop. Detta har något mindre omkostnader än att göra asynkrona anrop och kan resultera i färre återgivningscykler eftersom det inte finns något mellanliggande tillstånd i väntan på resultat.

Om du vill göra ett synkront anrop från .NET till JavaScript i en komponent på klientsidan omvandlar du IJSRuntime till IJSInProcessRuntime för att göra JS interopanrop:

@inject IJSRuntime JS

...

@code {
    protected override void HandleSomeEvent()
    {
        var jsInProcess = (IJSInProcessRuntime)JS;
        var value = jsInProcess.Invoke<string>("javascriptFunctionIdentifier");
    }
}

När du arbetar med IJSObjectReference i ASP.NET Core 5.0 eller senare komponenter på klientsidan kan du använda IJSInProcessObjectReference synkront i stället. IJSInProcessObjectReference implementerar IAsyncDisposable/IDisposable och ska tas bort för skräpinsamling för att förhindra en minnesläcka, vilket visas i följande exempel:

@inject IJSRuntime JS
@implements IDisposable

...

@code {
    ...
    private IJSInProcessObjectReference? module;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var jsInProcess = (IJSInProcessRuntime)JS;
            module = await jsInProcess.Invoke<IJSInProcessObjectReference>("import", 
                "./scripts.js");
            var value = module.Invoke<string>("javascriptFunctionIdentifier");
        }
    }

    ...

    void IDisposable.Dispose()
    {
        if (module is not null)
        {
            await module.Dispose();
        }
    }
}

I föregående exempel är en JSDisconnectedException inte fångad under modulhantering eftersom det inte finns någon Blazor–SignalR krets i en Blazor WebAssembly app att förlora. Mer information finns i ASP.NET Core Blazor JavaScript-samverkan (JS interop).

JavaScript-plats

Läs in JavaScript-kod (JS) med någon av de metoder som beskrivs i -artikeln om JavaScript-plats:

• Läs in ett skript i <head>-markup (Rekommenderas inte vanligtvis)
• Läs in ett skript i märkning <body>
• Läs in ett skript från en extern JavaScript-fil (.js) som är samlokaliserad med en komponent
• Läs in ett skript från en extern JavaScript-fil (.js)
• Mata in ett skript före eller efter Blazor startar

Information om hur du isolerar skript i JS modulerfinns i avsnittet JavaScript-isolering i JavaScript-moduler.

Varning

Placera bara en <script>-tagg i en komponentfil (.razor) om komponenten garanterat använder statisk återgivning på serversidan (statisk SSR) eftersom taggen <script> inte kan uppdateras dynamiskt.

JavaScript-isolering i JavaScript-moduler

Blazor aktiverar JavaScript-isolering (JS) i JavaScript-standardmoduler (ECMAScript-specifikation). JavaScript-modulinläsning fungerar på samma sätt i Blazor som för andra typer av webbappar, och du kan anpassa hur moduler definieras i din app. En guide om hur du använder JavaScript-moduler finns i MDN Web Docs: JavaScript-moduler.

JS isolering ger följande fördelar:

• Importerade JS förorenar inte längre det globala namnområdet.
• Användare av ett bibliotek och dess komponenter behöver inte importera den relaterade JS.

Dynamisk import med operatorn import() stöds med ASP.NET Core och Blazor:

if ({CONDITION}) import("/additionalModule.js");

I föregående exempel representerar platshållaren {CONDITION} en villkorlig kontroll för att avgöra om modulen ska laddas.

Information om webbläsarkompatibilitet finns i Kan jag använda: JavaScript-moduler: dynamisk import.

I scenarier på serversidan kan inte JS interop-anrop utfärdas efter att Blazor:s SignalR-kretsen har kopplats från. Utan en krets vid komponentborttagning eller vid något annat tillfälle då en krets saknas, misslyckas följande metodanrop och loggar ett meddelande om att kretsen är frånkopplad som JSDisconnectedException:

• JS interop-metodanrop
  • IJSRuntime.InvokeAsync
  • JSRuntimeExtensions.InvokeAsync
  • JSRuntimeExtensions.InvokeVoidAsync)
• Dispose / DisposeAsync anropar alla IJSObjectReference.

För att undvika att logga JSDisconnectedException eller logga anpassad information i Blazorpå serversidan kan du fånga undantaget i en try-catch-instruktion.

För följande exempel på bortskaffning av komponenter:

• Komponenten på serversidan implementerar IAsyncDisposable.
• module är en IJSObjectReference för en JS-modul.
• JSDisconnectedException fångas och loggas inte.
• Du kan också logga anpassad information i catch-instruktionen på vilken loggnivå du vill. I följande exempel loggas inte anpassad information. Koden förutsätter att utvecklaren inte bryr sig om när eller var kretsar kopplas från vid bortskaffande av komponenter.

async ValueTask IAsyncDisposable.DisposeAsync()
{
    try
    {
        if (module is not null)
        {
            await module.DisposeAsync();
        }
    }
    catch (JSDisconnectedException)
    {
    }
}

Om du måste rensa dina egna JS objekt eller köra annan JS kod på klienten efter att en krets har förlorats i en Blazor app på serversidan använder du MutationObserver-mönstret i JS på klienten. Med MutationObserver-mönstret kan du köra JS kod när ett element tas bort från DOM.

Mer information finns i följande artiklar:

• ASP.NET Core Blazor JavaScript-samverkan (JS interop): Innehåller ett kodexempel på MutationObserver-mönstret.
• Hantera fel i ASP.NET Core Blazor-appar: I avsnittet JavaScript-interop beskrivs felhantering i JS interop-scenarier.
• ASP.NET Core Razor komponentens livscykel: Avsnittet Komponenthantering med IDisposable och IAsyncDisposable beskriver hur du implementerar bortskaffandemönster i Razor komponenter.

Följande JS-modul exporterar en JS-funktion för att visa en webbläsarfönsterprompt. Placera följande JS kod i en extern JS fil.

wwwroot/scripts.js:

export function showPrompt(message) {
  return prompt(message, 'Type anything here');
}

Lägg till den föregående JS modulen i en app eller ett klassbibliotek som en statisk webbtillgång i mappen wwwroot och importera sedan modulen till .NET-koden genom att anropa InvokeAsync på IJSRuntime-instansen.

IJSRuntime importerar modulen som en IJSObjectReference, som representerar en referens till ett JS-objekt från .NET-kod. Använd IJSObjectReference för att anropa exporterade JS funktioner från modulen.

CallJs6.razor:

@page "/call-js-6"
@implements IAsyncDisposable
@inject IJSRuntime JS

<PageTitle>Call JS 6</PageTitle>

<h1>Call JS Example 6</h1>

<p>
    <button @onclick="TriggerPrompt">Trigger browser window prompt</button>
</p>

<p>
    @result
</p>

@code {
    private IJSObjectReference? module;
    private string? result;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            module = await JS.InvokeAsync<IJSObjectReference>("import",
                "./scripts.js");
        }
    }

    private async Task TriggerPrompt() => result = await Prompt("Provide text");

    public async ValueTask<string?> Prompt(string message) =>
        module is not null ? 
            await module.InvokeAsync<string>("showPrompt", message) : null;

    async ValueTask IAsyncDisposable.DisposeAsync()
    {
        if (module is not null)
        {
            try
            {
                await module.DisposeAsync();
            }
            catch (JSDisconnectedException)
            {
            }
        }
    }
}

I föregående exempel:

• Enligt konventionen är den import identifieraren en särskild identifierare som används specifikt för att importera en JS modul.
• Ange modulens externa JS-fil med dess stabila statiska webbtillgångssökväg: ./{SCRIPT PATH AND FILE NAME (.js)}, där:
  • Sökvägssegmentet för den aktuella katalogen (./) krävs för att skapa rätt statisk tillgångssökväg till JS-filen.
  • Platshållaren {SCRIPT PATH AND FILE NAME (.js)} är sökvägen och filnamnet under wwwroot.
• Kasserar IJSObjectReference för skräpinsamling i IAsyncDisposable.DisposeAsync.
• Placera inte en <script> tagg för skriptet efter Blazor skriptet eftersom modulen läses in och cachelagras automatiskt när dynamiska import() anropas.

Dynamisk import av en modul kräver en nätverksbegäran, så det kan bara uppnås asynkront genom att anropa InvokeAsync.

IJSInProcessObjectReference representerar en referens till ett JS objekt vars funktioner kan anropas synkront i komponenter på klientsidan. Mer information finns i avsnittet Synkron JS interop i komponenter på klientsidan.

Obs

När den externa JS-filen tillhandahålls av ett Razor klassbibliotekanger du modulens JS-fil med dess stabila statiska webbtillgångssökväg: ./_content/{PACKAGE ID}/{SCRIPT PATH AND FILE NAME (.js)}:

• Sökvägssegmentet för den aktuella katalogen (./) krävs för att skapa rätt statisk tillgångssökväg till JS-filen.
• Platshållaren {PACKAGE ID} är bibliotekets paket-ID. Paket-ID:t är som standard projektets sammansättningsnamn om <PackageId> inte anges i projektfilen. I följande exempel är bibliotekets sammansättningsnamn ComponentLibrary och bibliotekets projektfil anger inte <PackageId>.
• Platshållaren {SCRIPT PATH AND FILE NAME (.js)} är sökvägen och filnamnet under wwwroot. I följande exempel placeras den externa JS -filen (script.js) i klassbibliotekets wwwroot mapp.
• module är en privat nullbar IJSObjectReference av komponentklassen (private IJSObjectReference? module;).

module = await js.InvokeAsync<IJSObjectReference>(
    "import", "./_content/ComponentLibrary/scripts.js");

Mer information finns i Consume ASP.NET Core Razor components from a Razor class library (RCL).

I dokumentationen för Blazor använder exemplen .js filnamnstillägg för modulfiler, inte den nyare .mjs filändelsen (RFC 9239). Vår dokumentation fortsätter att använda filnamnstillägget .js av samma skäl som Mozilla Foundations dokumentation fortsätter att använda filnamnstillägget .js. Mer information finns i Aside – .mjs kontra .js (MDN-dokumentation).

Samla in referenser till element

Vissa JavaScript (interop) scenarier (JS) kräver referenser till HTML-element. Ett gränssnittsbibliotek kan till exempel kräva en elementreferens för initiering, eller så kan du behöva anropa kommandoliknande API:er på ett element, till exempel click eller play.

Samla in referenser till HTML-element i en komponent med hjälp av följande metod:

• Lägg till ett @ref attribut i HTML-elementet.
• Definiera ett fält av typen ElementReference vars namn matchar värdet för attributet @ref.

I följande exempel visas en referens till elementet username<input>:

<input @ref="username" ... />

@code {
    private ElementReference username;
}

Varning

Använd endast en elementreferens för att mutera innehållet i ett tomt element som inte interagerar med Blazor. Det här scenariot är användbart när ett API från tredje part levererar innehåll till elementet. Eftersom Blazor inte interagerar med elementet finns det ingen risk för en konflikt mellan Blazorrepresentation av elementet och DOM.

I följande exempel är det farligt att mutera innehållet i den osorterade listan (ul) med hjälp av MyList via JS interop eftersom Blazor interagerar med DOM för att fylla i elementets listobjekt (<li>) från Todos-objektet:

<ul @ref="MyList">
    @foreach (var item in Todos)
    {
        <li>@item.Text</li>
    }
</ul>

Det finns stöd för att använda MyList-elementreferensen för att bara läsa DOM-innehåll eller utlösa en händelse.

Om JS interop kommer att mutera innehållet av elementet MyList och Blazor försöker att tillämpa diffar på elementet, kommer diffarna inte att matcha DOM. Att ändra innehållet i listan via JS interop med MyList-elementreferensen stöds inte.

Mer information finns i ASP.NET Core Blazor JavaScript-samverkan (JS interop).

En ElementReference skickas vidare till JS kod via JS interop. JS-koden tar emot en HTMLElement-instans som den kan använda med vanliga DOM-API:er. Följande kod definierar till exempel en .NET-tilläggsmetod (TriggerClickEvent) som gör det möjligt att skicka ett musklick till ett element.

Funktionen JSclickElement skapar en click händelse för det skickade HTML-elementet (element):

window.interopFunctions = {
  clickElement : function (element) {
    element.click();
  }
}

Om du vill anropa en JS funktion som inte returnerar ett värde använder du JSRuntimeExtensions.InvokeVoidAsync. Följande kod utlöser en click-händelse på klientsidan genom att anropa den föregående JS-funktionen med den insamlade ElementReference:

@inject IJSRuntime JS

<button @ref="exampleButton">Example Button</button>

<button @onclick="TriggerClick">
    Trigger click event on <code>Example Button</code>
</button>

@code {
    private ElementReference exampleButton;

    public async Task TriggerClick()
    {
        await JS.InvokeVoidAsync(
            "interopFunctions.clickElement", exampleButton);
    }
}

Om du vill använda en tilläggsmetod skapar du en statisk tilläggsmetod som tar emot den IJSRuntime instansen:

public static async Task TriggerClickEvent(this ElementReference elementRef, 
    IJSRuntime js)
{
    await js.InvokeVoidAsync("interopFunctions.clickElement", elementRef);
}

Metoden clickElement anropas direkt på objektet. I följande exempel förutsätts att metoden TriggerClickEvent är tillgänglig från JsInteropClasses namnområde:

@inject IJSRuntime JS
@using JsInteropClasses

<button @ref="exampleButton">Example Button</button>

<button @onclick="TriggerClick">
    Trigger click event on <code>Example Button</code>
</button>

@code {
    private ElementReference exampleButton;

    public async Task TriggerClick()
    {
        await exampleButton.TriggerClickEvent(JS);
    }
}

Viktig

Variabeln exampleButton fylls bara i när komponenten återges. Om en opopulerad ElementReference skickas till JS-kod, får JS-koden värdet null. Om du vill ändra elementreferenser när komponenten har slutfört återgivningen använder du OnAfterRenderAsync- eller OnAfterRender-komponentens livscykelmetoder.

När du arbetar med generiska typer och returnerar ett värde använder du ValueTask<TResult>:

public static ValueTask<T> GenericMethod<T>(
        this ElementReference elementRef, IJSRuntime js) => 
    js.InvokeAsync<T>("{JAVASCRIPT FUNCTION}", elementRef);

Platshållaren {JAVASCRIPT FUNCTION} är JS funktionsidentifierare.

GenericMethod anropas direkt på objektet av en viss typ. I följande exempel förutsätts att GenericMethod är tillgänglig från JsInteropClasses namnområde:

@inject IJSRuntime JS
@using JsInteropClasses

<input @ref="username" />

<button @onclick="OnClickMethod">Do something generic</button>

<p>
    returnValue: @returnValue
</p>

@code {
    private ElementReference username;
    private string? returnValue;

    private async Task OnClickMethod()
    {
        returnValue = await username.GenericMethod<string>(JS);
    }
}

Referenselement mellan komponenter

Det går inte att skicka en ElementReference mellan komponenterna eftersom:

• Instansen kommer att garanterat finnas först efter att komponenten har återgivits, vilket inträffar vid eller efter att en komponents OnAfterRender/OnAfterRenderAsync-metoden körs.
• En ElementReference är en struct, som inte kan skickas som en komponentparameter.

För att en överordnad komponent ska göra en elementreferens tillgänglig för andra komponenter kan den överordnade komponenten:

• Tillåt barnkomponenter att registrera återanrop.
• Anropa de registrerade återanropen under händelsen OnAfterRender med den skickade elementreferensen. Den här metoden tillåter indirekt att underordnade komponenter interagerar med föräldrarnas elementreferens.

<style>
    .red { color: red }
</style>

<script>
  function setElementClass(element, className) {
    var myElement = element;
    myElement.classList.add(className);
  }
</script>

Obs

För generell vägledning om JS:s plats och våra rekommendationer för appar i produktion, se JavaScript-plats i ASP.NET Core Blazor-appar.

CallJs7.razor (överordnad komponent):

@page "/call-js-7"

<PageTitle>Call JS 7</PageTitle>

<h1>Call JS Example 7</h1>

<h2 @ref="title">Hello, world!</h2>

Welcome to your new app.

<SurveyPrompt Parent="this" Title="How is Blazor working for you?" />

CallJs7.razor.cs:

using Microsoft.AspNetCore.Components;

namespace BlazorSample.Pages;

public partial class CallJs7 : 
    ComponentBase, IObservable<ElementReference>, IDisposable
{
    private bool disposing;
    private readonly List<IObserver<ElementReference>> subscriptions = [];
    private ElementReference title;

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);

        foreach (var subscription in subscriptions)
        {
            subscription.OnNext(title);
        }
    }

    public void Dispose()
    {
        disposing = true;

        foreach (var subscription in subscriptions)
        {
            try
            {
                subscription.OnCompleted();
            }
            catch (Exception)
            {
            }
        }

        subscriptions.Clear();

        // The following prevents derived types that introduce a
        // finalizer from needing to re-implement IDisposable.
        GC.SuppressFinalize(this);
    }

    public IDisposable Subscribe(IObserver<ElementReference> observer)
    {
        if (disposing)
        {
            throw new InvalidOperationException("Parent being disposed");
        }

        subscriptions.Add(observer);

        return new Subscription(observer, this);
    }

    private class Subscription(IObserver<ElementReference> observer,
        CallJs7 self) : IDisposable
    {
        public IObserver<ElementReference> Observer { get; } = observer;
        public CallJs7 Self { get; } = self;

        public void Dispose() => Self.subscriptions.Remove(Observer);
    }
}

I föregående exempel är appens namnområde BlazorSample. Om du testar koden lokalt uppdaterar du namnområdet.

SurveyPrompt.razor (underordnad komponent):

<div class="alert alert-secondary mt-4">
    <span class="oi oi-pencil me-2" aria-hidden="true"></span>
    <strong>@Title</strong>

    <span class="text-nowrap">
        Please take our
        <a target="_blank" class="font-weight-bold link-dark" href="https://go.microsoft.com/fwlink/?linkid=2186158">brief survey</a>
    </span>
    and tell us what you think.
</div>

@code {
    // Demonstrates how a parent component can supply parameters
    [Parameter]
    public string? Title { get; set; }
}

SurveyPrompt.razor.cs:

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

namespace BlazorSample.Components;

public partial class SurveyPrompt : 
    ComponentBase, IObserver<ElementReference>, IDisposable
{
    private IDisposable? subscription = null;

    [Parameter]
    public IObservable<ElementReference>? Parent { get; set; }

    [Inject]
    public IJSRuntime? JS {get; set;}

    protected override void OnParametersSet()
    {
        base.OnParametersSet();

        subscription?.Dispose();
        subscription = Parent?.Subscribe(this);
    }

    public void OnCompleted() => subscription = null;

    public void OnError(Exception error) => subscription = null;

    public void OnNext(ElementReference value) =>
        _ = (JS?.InvokeAsync<object>("setElementClass", [value, "red"]));

    public void Dispose()
    {
        subscription?.Dispose();

        // The following prevents derived types that introduce a
        // finalizer from needing to re-implement IDisposable.
        GC.SuppressFinalize(this);
    }
}

I föregående exempel är appens namnområde BlazorSample med delade komponenter i mappen Shared. Om du testar koden lokalt uppdaterar du namnområdet.

Förstärka JavaScript-interop-anrop

Det här avsnittet gäller endast interaktiva serverkomponenter, men komponenter på klientsidan kan också ange JS interop-tidsgränser om villkoren motiverar det.

I appar på serversidan med serverinteraktivitet kan JavaScript (JS) interop misslyckas på grund av nätverksfel och bör behandlas som otillförlitligt. Blazor appar använder en tidsgräns på en minut för JS interop-anrop. Om en app kan tolerera en mer aggressiv timeout anger du tidsgränsen med någon av följande metoder.

Ange en global timeout i Program.cs med hjälp av CircuitOptions.JSInteropDefaultCallTimeout:

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents(options => 
        options.JSInteropDefaultCallTimeout = {TIMEOUT});

Platshållaren {TIMEOUT} är en TimeSpan (till exempel TimeSpan.FromSeconds(80)).

Ange en tidsgräns per anrop i komponentkoden. Den angivna tidsgränsen åsidosätter den globala tidsgränsen som anges av JSInteropDefaultCallTimeout:

var result = await JS.InvokeAsync<string>("{ID}", {TIMEOUT}, new[] { "Arg1" });

I föregående exempel:

• Platshållaren {TIMEOUT} är en TimeSpan (till exempel TimeSpan.FromSeconds(80)).
• Platshållaren {ID} är identifieraren för funktionen som ska anropas. Värdet someScope.someFunction anropar till exempel funktionen window.someScope.someFunction.

Även om en vanlig orsak till JS interop-fel är nätverksfel med komponenter på serversidan, kan tidsgränser per anrop anges för JS interop-anrop för komponenter på klientsidan. Även om det inte finns några Blazor–SignalR kretsar för en komponent på klientsidan kan JS interop-anrop misslyckas av andra relevanta orsaker.

För mer information om uttömning av resurser, se Vägledning för att minska hot för ASP.NET Core Blazor interaktiv serverrendering.

Undvik cirkelobjektreferenser

Objekt som innehåller cirkelreferenser kan inte serialiseras på klienten för något av följande:

• .NET-metodanrop.
• JavaScript-metoden anropar från C# när returtypen har cirkelreferenser.

JavaScript-bibliotek som renderar användargränssnitt

Ibland kanske du vill använda JavaScript-bibliotek (JS) som skapar synliga användargränssnittselement i webbläsarens DOM. Vid första anblicken kan detta verka svårt eftersom Blazor's diffing system förlitar sig på att ha kontroll över trädet av DOM-element och stöter på fel om någon extern kod muterar DOM-trädet och ogiltigförklarar dess mekanism för att tillämpa diffs. Detta är inte en Blazor- specifik begränsning. Samma utmaning uppstår med alla diff-baserade gränssnittsramverk.

Lyckligtvis är det enkelt att bädda in externt genererat användargränssnitt i ett Razor komponentgränssnittet på ett tillförlitligt sätt. Den rekommenderade tekniken är att komponentens kod (.razor fil) ska generera ett tomt element. När det gäller Blazor's diffing system är elementet alltid tomt, så renderaren återkommer inte till elementet och lämnar i stället innehållet ensamt. Detta gör det säkert att fylla elementet med godtyckligt externt hanterat innehåll.

I följande exempel visas konceptet. Inom if-instruktionen, när firstRender är true, interagera med unmanagedElement utanför Blazor med JS interop. Anropa till exempel ett externt JS-bibliotek för att fylla i elementet. Blazor lämnar elementets innehåll ensamt tills den här komponenten tas bort. När komponenten tas bort tas även komponentens hela DOM-underträd bort.

<h1>Hello! This is a Razor component rendered at @DateTime.Now</h1>

<div @ref="unmanagedElement"></div>

@code {
    private ElementReference unmanagedElement;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            ...
        }
    }
}

Tänk på följande exempel som återger en interaktiv karta med API:er för kartbox med öppen källkod.

Följande JS modul placeras i appen eller görs tillgänglig från ett Razor klassbibliotek.

Not

För att skapa Mapbox-kartan, hämta en åtkomsttoken från Mapbox-inloggning och placera den där {ACCESS TOKEN} visas i följande kod.

wwwroot/mapComponent.js:

import 'https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js';

mapboxgl.accessToken = '{ACCESS TOKEN}';

export function addMapToElement(element) {
  return new mapboxgl.Map({
    container: element,
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-74.5, 40],
    zoom: 9
  });
}

export function setMapCenter(map, latitude, longitude) {
  map.setCenter([longitude, latitude]);
}

För att skapa korrekt formatering, lägg till följande formatmallstagg i HTML-sidan.

Lägg till följande <link>-element i markeringen för <head>-elementet (plats för <head>-innehåll):

<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" 
    rel="stylesheet" />

CallJs8.razor:

@page "/call-js-8"
@implements IAsyncDisposable
@inject IJSRuntime JS

<PageTitle>Call JS 8</PageTitle>

<HeadContent>
    <link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" 
        rel="stylesheet" />
</HeadContent>

<h1>Call JS Example 8</h1>

<div @ref="mapElement" style='width:400px;height:300px'></div>

<button @onclick="() => ShowAsync(51.454514, -2.587910)">Show Bristol, UK</button>
<button @onclick="() => ShowAsync(35.6762, 139.6503)">Show Tokyo, Japan</button>

@code
{
    private ElementReference mapElement;
    private IJSObjectReference? mapModule;
    private IJSObjectReference? mapInstance;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            mapModule = await JS.InvokeAsync<IJSObjectReference>(
                "import", "./mapComponent.js");
            mapInstance = await mapModule.InvokeAsync<IJSObjectReference>(
                "addMapToElement", mapElement);
        }
    }

    private async Task ShowAsync(double latitude, double longitude)
    {
        if (mapModule is not null && mapInstance is not null)
        {
            await mapModule.InvokeVoidAsync("setMapCenter", mapInstance, 
                latitude, longitude);
        }
    }

    async ValueTask IAsyncDisposable.DisposeAsync()
    {
        if (mapInstance is not null)
        {
            try
            {
                await mapInstance.DisposeAsync();
            }
            catch (JSDisconnectedException)
            {
            }
        }

        if (mapModule is not null)
        {
            try
            {
                await mapModule.DisposeAsync();
            }
            catch (JSDisconnectedException)
            {
            }
        }
    }
}

I föregående exempel skapas ett interaktivt mappningsgränssnitt. Användaren:

• Kan dra för att rulla eller zooma.
• Välj knappar för att hoppa till fördefinierade platser.

I föregående exempel:

• <div> med @ref="mapElement" lämnas tom vad gäller Blazor. Skriptet mapbox-gl.js kan fylla elementet på ett säkert sätt och ändra dess innehåll. Använd den här tekniken med alla JS bibliotek som renderar användargränssnittet. Du kan bädda in komponenter från ett JS SPA-ramverk från tredje part i Razor komponenter, så länge de inte försöker nå ut och ändra andra delar av sidan. Det är inte säkert för extern JS kod att ändra element som Blazor inte betraktar som tomma.
• När du använder den här metoden bör du tänka på reglerna för hur Blazor behåller eller förstör DOM-element. Komponenten hanterar knappklickshändelser på ett säkert sätt och uppdaterar den befintliga kartinstansen eftersom DOM-element behålls där det är möjligt. Om du återger en lista över kartelement inifrån en @foreach-loop vill du använda @key för att säkerställa bevarandet av komponentinstanser. Annars kan ändringar i listdata göra att komponentinstanser behåller tillståndet för tidigare instanser på ett oönskat sätt. Mer information finns i hur du använda attributet @key-direktiv för att bevara relationen mellan element, komponenter och modellobjekt.
• Exemplet kapslar in JS logik och beroenden i en JavaScript-modul och läser in modulen dynamiskt med hjälp av import identifierare. Mer information finns i JavaScript-isolering i JavaScript-moduler.

Stöd för bytematris

Blazor stöder optimerad bytematris JavaScript (JS) interop som undviker kodning/avkodning av bytematriser till Base64. I följande exempel används JS interop för att skicka en bytematris till JavaScript.

Ange en receiveByteArrayJS funktion. Funktionen anropas med InvokeVoidAsync och returnerar inte något värde:

<script>
  window.receiveByteArray = (bytes) => {
    let utf8decoder = new TextDecoder();
    let str = utf8decoder.decode(bytes);
    return str;
  };
</script>

Not

För allmän vägledning om placering av JS och våra rekommendationer för produktionsappar, se JavaScript-placering i ASP.NET Core Blazor-appar.

CallJs9.razor:

@page "/call-js-9"
@inject IJSRuntime JS

<h1>Call JS Example 9</h1>

<p>
    <button @onclick="SendByteArray">Send Bytes</button>
</p>

<p>
    @result
</p>

<p>
    Quote &copy;2005 <a href="https://www.uphe.com">Universal Pictures</a>:
    <a href="https://www.uphe.com/movies/serenity-2005">Serenity</a><br>
    <a href="https://www.imdb.com/name/nm0821612/">Jewel Staite on IMDB</a>
</p>

@code {
    private string? result;

    private async Task SendByteArray()
    {
        var bytes = new byte[] { 0x45, 0x76, 0x65, 0x72, 0x79, 0x74, 0x68, 0x69,
            0x6e, 0x67, 0x27, 0x73, 0x20, 0x73, 0x68, 0x69, 0x6e, 0x79, 0x2c,
            0x20, 0x43, 0x61, 0x70, 0x74, 0x69, 0x61, 0x6e, 0x2e, 0x20, 0x4e,
            0x6f, 0x74, 0x20, 0x74, 0x6f, 0x20, 0x66, 0x72, 0x65, 0x74, 0x2e };

        result = await JS.InvokeAsync<string>("receiveByteArray", bytes);
    }
}

Strömma från .NET till JavaScript

Blazor stöder direktuppspelning av data från .NET till JavaScript (JS). Strömmar skapas med hjälp av en DotNetStreamReference.

DotNetStreamReference representerar en .NET-ström och använder följande parametrar:

• stream: Strömmen skickas till JS.
• leaveOpen: Avgör om strömmen lämnas öppen efter överföringen. Om inget värde anges, får leaveOpen värdet false.

I JSanvänder du en matrisbuffert eller en läsbar ström för att ta emot data:

• Använda en ArrayBuffer:

  async function streamToJavaScript(streamRef) {
    const data = await streamRef.arrayBuffer();
  }
  

• Användning av en ReadableStream:

  async function streamToJavaScript(streamRef) {
    const stream = await streamRef.stream();
  }
  

I C#-kod:

var streamRef = new DotNetStreamReference(stream: {STREAM}, leaveOpen: false);
await JS.InvokeVoidAsync("streamToJavaScript", streamRef);

I föregående exempel:

• Platshållaren {STREAM} representerar Stream som skickas till JS.
• JS är en inmatad IJSRuntime instans.

Det är vanligtvis onödigt att ta bort en DotNetStreamReference instans. När leaveOpen är inställt på standardvärdet falsetas den underliggande Stream bort automatiskt efter överföring till JS.

Om leaveOpen är true, så leder borttagandet av en DotNetStreamReference inte till att den underliggande Streamtas bort. Appens kod avgör när den underliggande Streamska tas bort. När du bestämmer dig för hur du ska ta bort den underliggande Streambör du tänka på följande:

• Att ta bort en Stream när den överförs till JS anses vara ett programfel och kan orsaka ett ohanterat undantag.
• Stream överföring börjar så snart DotNetStreamReference skickas som ett argument till ett JS interop-anrop, oavsett om strömmen faktiskt används i JS logiken.

Med tanke på dessa egenskaper rekommenderar vi att du bortser från den underliggande Stream först när den har förbrukats fullt ut av JS (löftet som returneras av arrayBuffer eller stream löser). Därför bör en DotNetStreamReference endast skickas till JS om den utan villkor ska användas av logiken i JS.

Anropa .NET-metoder från JavaScript-funktioner i ASP.NET Core Blazor omfattar omvänd åtgärd, direktuppspelning från JavaScript till .NET.

ASP.NET Core Blazor filnedladdningar beskriver hur man laddar ned en fil i Blazor.

Fånga JavaScript-undantag

Om du vill fånga JS-undantag, omsluter du JS-interop i ett try-catch-block och fångar en JSException.

I följande exempel finns inte funktionen nonFunctionJS. Om funktionen inte hittas omfattas JSException med en Message som indikerar följande felmeddelande:

Could not find 'nonFunction' ('nonFunction' was undefined).

CallJs11.razor:

@page "/call-js-11"
@inject IJSRuntime JS

<PageTitle>Call JS 11</PageTitle>

<h1>Call JS Example 11</h1>

<p>
    <button @onclick="CatchUndefinedJSFunction">Catch Exception</button>
</p>

<p>
    @result
</p>

<p>
    @errorMessage
</p>

@code {
    private string? errorMessage;
    private string? result;

    private async Task CatchUndefinedJSFunction()
    {
        try
        {
            result = await JS.InvokeAsync<string>("nonFunction");
        }
        catch (JSException e)
        {
            errorMessage = $"Error Message: {e.Message}";
        }
    }
}

Avbryta en långvarig JavaScript-funktion

Använd en JSAbortController- med en CancellationTokenSource i komponenten för att avbryta en långkörande JavaScript-funktion från C#-kod.

Följande JSHelpers-klass innehåller en simulerad tidskrävande funktion, longRunningFn, som ska räknas kontinuerligt tills AbortController.signal anger att AbortController.abort har anropats. Funktionen sleep är i demonstrationssyfte för att simulera långsam körning av den långvariga funktionen och skulle inte finnas i produktionskoden. När en komponent anropar stopFn, signaleras longRunningFn att avbryta genom den villkorliga kontrollen i while-loopen på AbortSignal.aborted.

<script>
  class Helpers {
    static #controller = new AbortController();

    static async #sleep(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    }

    static async longRunningFn() {
      var i = 0;
      while (!this.#controller.signal.aborted) {
        i++;
        console.log(`longRunningFn: ${i}`);
        await this.#sleep(1000);
      }
    }

    static stopFn() {
      this.#controller.abort();
      console.log('longRunningFn aborted!');
    }
  }

  window.Helpers = Helpers;
</script>

Not

För allmän vägledning om JS-plats och våra rekommendationer för produktionsappar, se JavaScript-plats i ASP.NET Core Blazor-appar.

Följande komponent:

• Anropar funktionen JSlongRunningFn när knappen Start Task är markerad. En CancellationTokenSource används för att hantera körningen av den långvariga funktionen. CancellationToken.Register anger ett JS interop-anropsdelegat för att köra funktionen JSstopFn när CancellationTokenSource.Token avbryts.
• När knappen Cancel Task har valts avbryts CancellationTokenSource.Token med ett anrop till Cancel.
• CancellationTokenSource tas bort i metoden Dispose.

CallJs12.razor:

@page "/call-js-12"
@inject IJSRuntime JS

<h1>Cancel long-running JS interop</h1>

<p>
    <button @onclick="StartTask">Start Task</button>
    <button @onclick="CancelTask">Cancel Task</button>
</p>

@code {
    private CancellationTokenSource? cts;

    private async Task StartTask()
    {
        cts = new CancellationTokenSource();
        cts.Token.Register(() => JS.InvokeVoidAsync("Helpers.stopFn"));

        await JS.InvokeVoidAsync("Helpers.longRunningFn");
    }

    private void CancelTask()
    {
        cts?.Cancel();
    }

    public void Dispose()
    {
        cts?.Cancel();
        cts?.Dispose();
    }
}

En webbläsares utvecklarverktyg-konsolen anger körningen av den långvariga JS-funktionen efter att knappen Start Task har valts och när funktionen avbryts när knappen Cancel Task har valts:

longRunningFn: 1
longRunningFn: 2
longRunningFn: 3
longRunningFn aborted!

JavaScript [JSImport]/[JSExport] interop

Det här avsnittet gäller komponenter på klientsidan.

Som ett alternativ till att interagera med JavaScript (JS) i komponenter på klientsidan med hjälp av BlazorJS interop-mekanism baserat på IJSRuntime-gränssnittet är ett JS[JSImport]/[JSExport] interop-API tillgängligt för appar som riktar sig till .NET 7 eller senare.

Mer information finns i JavaScript JSImport/JSExport interop med ASP.NET Core Blazor.

Oserialiserad JavaScript-interoperabilitet

Det här avsnittet gäller komponenter på klientsidan.

Omarbetad interop med IJSUnmarshalledRuntime-gränssnittet är föråldrad och bör ersättas med JavaScript [JSImport]/[JSExport] interop.

Mer information finns i JavaScript JSImport/JSExport interop med ASP.NET Core Blazor.

Borttagning av javascript-interopobjektreferenser

Exempel i interop-artiklarna i JavaScript (JS) visar typiska mönster för bortskaffande av objekt:

• När du anropar JS från .NET, enligt beskrivningen i den här artikeln, ska du ta bort alla skapade IJSObjectReference/IJSInProcessObjectReference/JSObjectReference antingen från .NET eller från JS för att undvika att läcka JS minne.

• När du anropar .NET från JS, enligt beskrivningen i Anropa .NET-metoder från JavaScript-funktioner i ASP.NET Core Blazor, gör du dig av med en skapad DotNetObjectReference antingen från .NET eller från JS för att undvika läckage av .NET-minne.

JS interop-objektreferenser implementeras som en karta där nyckeln är en identifierare på sidan av JS interop-anropet som skapar referensen. När borttagning av objektet initieras från antingen .NET- eller JS-sidan, tar Blazor bort objektets post från kartan, och objektet kan skräpsamlas så länge det inte finns någon annan stark referens till det.

Ta alltid bort objekt som skapats på .NET-sidan för att undvika att läcka .NET-hanterat minne.

DOM-rensningsuppgifter vid bortskaffande av komponenter

Mer information finns i ASP.NET Core Blazor JavaScript-samverkan (JS interop).

JavaScript-interopanrop utan krets

Mer information finns i ASP.NET Core Blazor JavaScript-samverkan (JS interop).

Ytterligare resurser

• Anropa .NET-metoder från JavaScript-funktioner i ASP.NET Core Blazor
• InteropComponent.razor exempel (dotnet/AspNetCore GitHub-lagringsplats main gren): Grenen main representerar produktenhetens aktuella utveckling för nästa version av ASP.NET Core. Om du vill välja grenen för en annan version (till exempel release/{VERSION}, där platshållaren {VERSION} är versionsnumret), använder du rullgardinsmenyn Växla grenar eller taggar för att välja grenen. För en gren som inte längre finns använder du fliken Taggar för att hitta API:et (till exempel v7.0.0).
• Blazor exempel på GitHub-lagringsplats (dotnet/blazor-samples) (hur du laddar ned)
• Hantera fel i ASP.NET Core Blazor-appar (JavaScript- avsnitt)
• Hotbegränsning: JavaScript-funktioner som anropas från .NET