Volání metod .NET z funkcí JavaScriptu v ASP.NET Core Blazor

Tento článek vysvětluje, jak vyvolat metody .NET z JavaScriptu (JS).

Informace o volání JS funkcí z .NET naleznete v tématu Volání javascriptových funkcí z metod .NET v ASP.NET Core Blazor.

Vyvolání statické metody .NET

Pokud chcete vyvolat statickou metodu .NET z JavaScriptu (JS), použijte JS tyto funkce:

• DotNet.invokeMethodAsync (Doporučeno): Asynchronní pro aplikace Blazor Server i Blazor WebAssembly aplikace.
• DotNet.invokeMethod: Synchronní pouze pro Blazor WebAssembly aplikace.

Předejte název sestavení obsahující metodu, identifikátor statické metody .NET a všechny argumenty.

V následujícím příkladu:

• Zástupný {ASSEMBLY NAME} symbol je název sestavení aplikace.
• Zástupný {.NET METHOD ID} symbol je identifikátor metody .NET.
• Zástupný {ARGUMENTS} symbol je volitelný argument oddělený čárkami pro předání metodě, z nichž každý musí být JSon-serializovatelný.

DotNet.invokeMethodAsync('{ASSEMBLY NAME}', '{.NET METHOD ID}', {ARGUMENTS});

DotNet.invokeMethodAsyncJS Promise vrátí výsledek operace. DotNet.invokeMethod (Blazor WebAssembly pouze) vrátí výsledek operace.

Důležité

Asynchronní funkce (invokeMethodAsync) je upřednostňovaná před synchronní verzí (invokeMethod) pro podporu Blazor Server scénářů.

Metoda .NET musí být veřejná, statická a musí mít [JSInvokable] atribut.

V následujícím příkladu:

• Zástupný {<T>} symbol označuje návratový typ, který se vyžaduje pouze pro metody, které vracejí hodnotu.
• Zástupný {.NET METHOD ID} symbol je identifikátor metody.

@code {
    [JSInvokable]
    public static Task{<T>} {.NET METHOD ID}()
    {
        ...
    }
}

Poznámka

Volání otevřených obecných metod není podporováno u statických metod .NET, ale podporuje se s metodami instance. Další informace naleznete v části Volání metod obecné třídy .NET .

V následující CallDotNetExample1 komponentě ReturnArrayAsync vrátí int metoda C# pole. Atribut[JSInvokable] se použije na metodu, která metodu vyvolá .JS

Pages/CallDotNetExample1.razor:

@page "/call-dotnet-example-1"

<h1>Call .NET Example 1</h1>

<p>
    <button onclick="returnArrayAsync()">
        Trigger .NET static method
    </button>
</p>

@code {
    [JSInvokable]
    public static Task<int[]> ReturnArrayAsync()
    {
        return Task.FromResult(new int[] { 1, 2, 3 });
    }
}

Atribut <button> HTML elementu onclick je přiřazení obslužné rutiny událostí JavaScriptu onclick pro zpracování click událostí, nikoli Blazoratribut direktivy @onclick . Funkce returnArrayAsyncJS je přiřazena jako obslužná rutina.

Následující returnArrayAsyncJS funkce volá metodu ReturnArrayAsync .NET předchozí CallDotNetExample1 komponenty a zaprotokoluje výsledek do konzoly webových vývojářských nástrojů prohlížeče. BlazorSample je název sestavení aplikace.

<script>
  window.returnArrayAsync = () => {
    DotNet.invokeMethodAsync('BlazorSample', 'ReturnArrayAsync')
      .then(data => {
        console.log(data);
      });
    };
</script>

Poznámka

Obecné pokyny k JS umístění a našim doporučením pro produkční aplikace najdete v tématu ASP.NET Core Blazor interoperabilita JavaScriptu (JSinterop).

Trigger .NET static method Po výběru tlačítka se ve výstupu konzoly vývojářských nástrojů prohlížeče zobrazí data pole. Formát výstupu se v prohlížečích mírně liší. Následující výstup ukazuje formát, který microsoft Edge používá:

Array(3) [ 1, 2, 3 ]

Ve výchozím nastavení je identifikátor metody .NET pro JS volání název metody .NET, ale můžete zadat jiný identifikátor pomocí konstruktoru atributu[JSInvokable]. V následujícím příkladu DifferentMethodName je přiřazený identifikátor metody pro metodu ReturnArrayAsync :

[JSInvokable("DifferentMethodName")]

Při volání nebo DotNet.invokeMethodAsyncDotNet.invokeMethod (Blazor WebAssembly pouze) volání DifferentMethodName pro spuštění ReturnArrayAsync metody .NET:

• DotNet.invokeMethodAsync('BlazorSample', 'DifferentMethodName');
• DotNet.invokeMethod('BlazorSample', 'DifferentMethodName'); (Blazor WebAssembly pouze)

Poznámka

Příklad ReturnArrayAsync metody v této části vrátí výsledek Task bez použití explicitního jazyka C# async a await klíčových slov. Metody kódování s typickými await metodamiasync, které používají await klíčové slovo k vrácení hodnoty asynchronních operací.

ReturnArrayAsync metoda složená s async klíčovými await slovy:

[JSInvokable]
public static async Task<int[]> ReturnArrayAsync()
{
    return await Task.FromResult(new int[] { 1, 2, 3 });
}

Další informace naleznete v tématu Asynchronní programování pomocí async a await v průvodci jazykem C#.

Vyvolání metody instance .NET

Vyvolání metody .NET instance z JavaScriptu (JS):

• Předejte instanci .NET odkazem tak, že JS instanci zabalíte do DotNetObjectReference a zavoláte Create na ni.
• Vyvolá metodu instance .NET pomocí JSinvokeMethodAsync nebo invokeMethod (Blazor WebAssembly pouze) z předané DotNetObjectReference. Instanci .NET lze předat také jako argument při vyvolání jiných metod .NET z JS.
• Likvidujte DotNetObjectReference.

Následující části tohoto článku ukazují různé přístupy k vyvolání metody instance .NET:

• DotNetObjectReference Předání jednotlivé funkce JavaScriptu
• DotNetObjectReference Předání třídy s více javascriptovými funkcemi
• Volání metod obecné třídy .NET
• Příklady instancí třídy
• Pomocná třída metody .NET instance komponenty

DotNetObjectReference Předání jednotlivé funkce JavaScriptu

Příklad v této části ukazuje, jak předat DotNetObjectReference jednotlivé javascriptovéJS () funkce.

Následující sayHello1JS funkce přijme DotNetObjectReference metodu GetHelloMessage .NET komponenty a zavolá invokeMethodAsync ji:

<script>
  window.sayHello1 = (dotNetHelper) => {
    return dotNetHelper.invokeMethodAsync('GetHelloMessage');
  };
</script>

Poznámka

Obecné pokyny k JS umístění a našim doporučením pro produkční aplikace najdete v tématu ASP.NET Core Blazor interoperabilita JavaScriptu (JSinterop).

V předchozím příkladu je název dotNetHelper proměnné libovolný a lze ho změnit na libovolný upřednostňovaný název.

Pro následující CallDotNetExample2 komponentu:

• Komponenta má metodu JS-invokable .NET s názvem GetHelloMessage.
• Trigger .NET instance method Když je tlačítko vybráno, JS funkce sayHello1 je volána s .DotNetObjectReference
• sayHello1:
  • Volání GetHelloMessage a příjem výsledku zprávy
  • Vrátí výsledek zprávy volající TriggerDotNetInstanceMethod metodě.
• Vrácená zpráva od sayHello1result uživatele se zobrazí.
• Chcete-li zabránit úniku paměti a povolit uvolňování paměti, je v metodě odstraněn odkaz na objekt .NET vytvořený DotNetObjectReference metodou Dispose .

Pages/CallDotNetExample2.razor:

@page "/call-dotnet-example-2"
@implements IDisposable
@inject IJSRuntime JS

<h1>Call .NET Example 2</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string? name;
    private string? result;
    private DotNetObjectReference<CallDotNetExample2>? objRef;

    public async Task TriggerDotNetInstanceMethod()
    {
        objRef = DotNetObjectReference.Create(this);
        result = await JS.InvokeAsync<string>("sayHello1", objRef);
    }

    [JSInvokable]
    public string GetHelloMessage() => $"Hello, {name}!";

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

V předchozím příkladu je název dotNetHelper proměnné libovolný a lze ho změnit na libovolný upřednostňovaný název.

Předání argumentů metodě instance:

1. Přidejte parametry do vyvolání metody .NET. V následujícím příkladu se metodě předá název. Podle potřeby přidejte do seznamu další parametry.

   <script>
     window.sayHello2 = (dotNetHelper, name) => {
       return dotNetHelper.invokeMethodAsync('GetHelloMessage', name);
     };
   </script>
   

   V předchozím příkladu je název dotNetHelper proměnné libovolný a lze ho změnit na libovolný upřednostňovaný název.

2. Zadejte seznam parametrů metodě .NET.

   Pages/CallDotNetExample3.razor:

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

<h1>Call .NET Example 3</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string? name;
    private string? result;
    private DotNetObjectReference<CallDotNetExample3>? objRef;

    public async Task TriggerDotNetInstanceMethod()
    {
        objRef = DotNetObjectReference.Create(this);
        result = await JS.InvokeAsync<string>("sayHello2", objRef, name);
    }

    [JSInvokable]
    public string GetHelloMessage(string passedName) => $"Hello, {passedName}!";

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

V předchozím příkladu je název dotNetHelper proměnné libovolný a lze ho změnit na libovolný upřednostňovaný název.

DotNetObjectReference Předání třídy s více javascriptovými funkcemi

Příklad v této části ukazuje, jak předat DotNetObjectReference třídu JavaScriptu (JS) s více funkcemi.

Vytvořte a předejte DotNetObjectReferencemetoduOnAfterRenderAsync životního cyklu tříděJS, aby bylo možné použít více funkcí. Ujistěte se, že kód .NET odstraní DotNetObjectReference, jak ukazuje následující příklad.

V následující CallDotNetExampleOneHelper komponentě Trigger JS function tlačítka volají JS funkce nastavením JSonclick vlastnosti, nikoliBlazor atribut direktivy @onclick .

Pages/CallDotNetExampleOneHelper.razor:

@page "/call-dotnet-example-one-helper"
@implements IDisposable
@inject IJSRuntime JS

<PageTitle>Call .NET Example</PageTitle>

<h1>Pass <code>DotNetObjectReference</code> to a JavaScript class</h1>

<p>
    <label>
        Message: <input @bind="name" />
    </label>
</p>

<p>
    <button onclick="GreetingHelpers.sayHello()">
        Trigger JS function <code>sayHello</code>
    </button>
</p>

<p>
    <button onclick="GreetingHelpers.welcomeVisitor()">
        Trigger JS function <code>welcomeVisitor</code>
    </button>
</p>

@code {
    private string? name;
    private DotNetObjectReference<CallDotNetExampleOneHelper>? dotNetHelper;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            dotNetHelper = DotNetObjectReference.Create(this);
            await JS.InvokeVoidAsync("GreetingHelpers.setDotNetHelper", 
                dotNetHelper);
        }
    }

    [JSInvokable]
    public string GetHelloMessage() => $"Hello, {name}!";

    [JSInvokable]
    public string GetWelcomeMessage() => $"Welcome, {name}!";

    public void Dispose()
    {
        dotNetHelper?.Dispose();
    }
}

V předchozím příkladu:

• JS je injektovaná IJSRuntime instance. IJSRuntime je registrován v Blazor rámci.
• Název dotNetHelper proměnné je libovolný a lze ho změnit na libovolný upřednostňovaný název.
• Komponenta musí explicitně odstranit povolení DotNetObjectReference uvolňování paměti a zabránit úniku paměti.

<script>
  class GreetingHelpers {
    static dotNetHelper;

    static setDotNetHelper(value) {
      GreetingHelpers.dotNetHelper = value;
    }

    static async sayHello() {
      const msg = 
        await GreetingHelpers.dotNetHelper.invokeMethodAsync('GetHelloMessage');
      alert(`Message from .NET: "${msg}"`);
    }

    static async welcomeVisitor() {
      const msg = 
        await GreetingHelpers.dotNetHelper.invokeMethodAsync('GetWelcomeMessage');
      alert(`Message from .NET: "${msg}"`);
    }
  }

  window.GreetingHelpers = GreetingHelpers;
</script>

Poznámka

Obecné pokyny k JS umístění a našim doporučením pro produkční aplikace najdete v tématu ASP.NET Core Blazor interoperabilita JavaScriptu (JSinterop).

V předchozím příkladu:

• Třída GreetingHelpers se přidá do objektu window , který globálně definuje třídu, která umožňuje Blazor vyhledat třídu pro JS interoperabilitu.
• Název dotNetHelper proměnné je libovolný a lze ho změnit na libovolný upřednostňovaný název.

Volání metod obecné třídy .NET

Funkce Jazyka JavaScript (JS) můžou volat metody obecné třídy .NET , kde JS funkce volá metodu .NET obecné třídy.

V následující obecné třídě typu (GenericType<TValue>):

• Třída má jeden parametr typu (TValue) s jednou obecnou Value vlastností.
• Třída má dvě ne generické metody označené atributem[JSInvokable], z nichž každý má parametr obecného typu s názvem newValue:
  • Update synchronně aktualizuje hodnotu Value z newValue.
  • UpdateAsync asynchronně aktualizuje hodnotu Value od newValue po vytvoření očekávané úlohy, Task.Yield která asynchronně vrátí zpět do aktuálního kontextu při očekávání.
• Každá z metod třídy zapisuje typ TValue a hodnotu Value do konzoly. Zápis do konzoly je určen pouze pro demonstrační účely. Produkční aplikace se obvykle vyhýbají zápisu do konzoly ve prospěch protokolování aplikací. Další informace najdete v tématu ASP.NET Core Blazor protokolování a protokolování v .NET Core a ASP.NET Core.

Poznámka

Otevřené obecné typy a metody nezadávají typy pro zástupné symboly typů. Naopak zavřené obecné typy poskytují typy pro všechny zástupné symboly typů. Příklady v této části ukazují uzavřené obecné typy, ale vyvolání JS metod interop instance s otevřenými obecnými typy se podporuje. Použití otevřených obecných typů není podporováno pro vyvolání statické metody .NET, které byly popsány výše v tomto článku.

Další informace najdete v následujících článcích:

• Obecné třídy a metody (dokumentace k jazyku C#)
• Obecné třídy (Průvodce programováním v C#)
• Obecné typy v .NET (dokumentace k .NET)

GenericType.cs:

using Microsoft.JSInterop;

public class GenericType<TValue>
{
    public TValue? Value { get; set; }

    [JSInvokable]
    public void Update(TValue newValue)
    {
        Value = newValue;

        Console.WriteLine($"Update: GenericType<{typeof(TValue)}>: {Value}");
    }

    [JSInvokable]
    public async void UpdateAsync(TValue newValue)
    {
        await Task.Yield();
        Value = newValue;

        Console.WriteLine($"UpdateAsync: GenericType<{typeof(TValue)}>: {Value}");
    }
}

V následující invokeMethodsAsync funkci:

• Obecné typy třídy Update a UpdateAsync metody jsou volány s argumenty představující řetězce a čísla.
• Blazor WebAssembly aplikace podporují synchronní volání metod .NET s invokeMethod. syncInterop obdrží logickou hodnotu označující, jestli JS se v Blazor WebAssembly aplikaci vyskytuje interop. Kdy syncInterop je true, invokeMethod je bezpečně volána. Pokud je falsehodnota , syncInterop volá se pouze asynchronní funkceinvokeMethodAsync, protože JS interop se spouští v Blazor Server aplikaci.
• Pro demonstrační účely DotNetObjectReference se volání funkce ( nebo invokeMethodAsync), metoda .NET volá (invokeMethodUpdate nebo UpdateAsync) a argument se zapíše do konzoly. Argumenty používají náhodné číslo k povolení odpovídajícího JS volání metody .NET volání metody .NET (také zapsáno do konzoly na straně .NET). Produkční kód obvykle nenapisuje do konzoly, a to buď na klientovi, nebo na serveru. Produkční aplikace obvykle spoléhají na protokolování aplikací. Další informace najdete v tématu ASP.NET Core Blazor protokolování a protokolování v .NET Core a ASP.NET Core.

<script>
  const randomInt = () => Math.floor(Math.random() * 99999);

  window.invokeMethodsAsync = async (syncInterop, dotNetHelper1, dotNetHelper2) => {
    var n = randomInt();
    console.log(`JS: invokeMethodAsync:Update('string ${n}')`);
    await dotNetHelper1.invokeMethodAsync('Update', `string ${n}`);

    n = randomInt();
    console.log(`JS: invokeMethodAsync:UpdateAsync('string ${n}')`);
    await dotNetHelper1.invokeMethodAsync('UpdateAsync', `string ${n}`);

    if (syncInterop) {
      n = randomInt();
      console.log(`JS: invokeMethod:Update('string ${n}')`);
      dotNetHelper1.invokeMethod('Update', `string ${n}`);
    }

    n = randomInt();
    console.log(`JS: invokeMethodAsync:Update(${n})`);
    await dotNetHelper2.invokeMethodAsync('Update', n);

    n = randomInt();
    console.log(`JS: invokeMethodAsync:UpdateAsync(${n})`);
    await dotNetHelper2.invokeMethodAsync('UpdateAsync', n);

    if (syncInterop) {
      n = randomInt();
      console.log(`JS: invokeMethod:Update(${n})`);
      dotNetHelper2.invokeMethod('Update', n);
    }
  };
</script>

Poznámka

Obecné pokyny k JS umístění a doporučení pro produkční aplikace najdete v tématu ASP.NET Core Blazor interoperabilita JavaScriptu (JSinterop)..

V následující komponentě GenericsExample:

• Funkce JSinvokeMethodsAsync se volá při Invoke Interop výběru tlačítka.
• Vytvoří se pár DotNetObjectReference typů a předá JS funkci pro instance GenericType jako string a .int

Pages/GenericsExample.razor:

@page "/generics-example"
@using System.Runtime.InteropServices
@inject IJSRuntime JS

<p>
    <button @onclick="InvokeInterop">Invoke Interop</button>
</p>

<ul>
    <li>genericType1: @genericType1?.Value</li>
    <li>genericType2: @genericType2?.Value</li>
</ul>

@code {
    private GenericType<string> genericType1 = new() { Value = "string 0" };
    private GenericType<int> genericType2 = new() { Value = 0 };

    public async Task InvokeInterop()
    {
        var syncInterop = 
            RuntimeInformation.IsOSPlatform(OSPlatform.Create("BROWSER"));

        await JS.InvokeVoidAsync(
            "invokeMethodsAsync",
            syncInterop,
            DotNetObjectReference.Create(genericType1),
            DotNetObjectReference.Create(genericType2));
    }
}

V předchozím příkladu JS je vložená IJSRuntime instance. IJSRuntime je registrován v Blazor rámci.

Následující příklad ukazuje typický výstup předchozího příkladu, když Invoke Interop je tlačítko vybráno v Blazor WebAssembly aplikaci:

JS: invokeMethodAsync:Update('string 37802')
.NET: Aktualizace: GenericType<System.String>: řetězec 37802
JS: invokeMethodAsync:UpdateAsync('string 53051')
JS: invokeMethod:Update('string 26784')
.NET: Aktualizace: GenericType<System.String>: řetězec 26784
JS: invokeMethodAsync:Update(14107)
.NET: Aktualizace: GenericType<System.Int32>: 14107
JS: invokeMethodAsync:UpdateAsync(48995)
JS: invokeMethod:Update(12872)
.NET: Aktualizace: GenericType<System.Int32>: 12872
.NET: UpdateAsync: GenericType<System.String>: řetězec 53051
.NET: UpdateAsync: GenericType<System.Int32>: 48995

Pokud je předchozí příklad implementovaný v Blazor Server aplikaci, synchronní volání se invokeMethod vyhnete. Asynchronní funkce (invokeMethodAsync) je upřednostňovaná před synchronní verzí (invokeMethod) ve Blazor Server scénářích.

Typický výstup Blazor Server aplikace:

JS: invokeMethodAsync:Update('string 34809')
.NET: Aktualizace: GenericType<System.String>: řetězec 34809
JS: invokeMethodAsync:UpdateAsync('string 93059')
JS: invokeMethodAsync:Update(41997)
.NET: Aktualizace: GenericType<System.Int32>: 41997
JS: invokeMethodAsync:UpdateAsync(24652)
.NET: UpdateAsync: GenericType<System.String>: string 93059
.NET: UpdateAsync: GenericType<System.Int32>: 24652

Předchozí příklady výstupu ukazují, že asynchronní metody se provádějí a provádějí v libovolném pořadí v závislosti na několika faktorech, včetně plánování vláken a rychlosti provádění metody. Pro asynchronní volání metod není možné spolehlivě předpovědět pořadí dokončení.

Příklady instancí třídy

sayHello1JS Následující funkce:

• Volá metodu GetHelloMessage .NET na předané DotNetObjectReference.
• Vrátí zprávu od GetHelloMessage volajícího sayHello1 .

<script>
  window.sayHello1 = (dotNetHelper) => {
    return dotNetHelper.invokeMethodAsync('GetHelloMessage');
  };
</script>

Poznámka

Obecné pokyny k JS umístění a doporučení pro produkční aplikace najdete v tématu ASP.NET Core Blazor interoperabilita JavaScriptu (JSinterop)..

V předchozím příkladu je název dotNetHelper proměnné libovolný a lze ho změnit na libovolný upřednostňovaný název.

HelloHelper Následující třída má metodu JS-invokable .NET s názvem GetHelloMessage. Po HelloHelper vytvoření se název vlastnosti Name použije k vrácení zprávy z GetHelloMessage.

HelloHelper.cs:

using Microsoft.JSInterop;

public class HelloHelper
{
    public HelloHelper(string? name)
    {
        Name = name ?? "No Name";
    }

    public string? Name { get; set; }

    [JSInvokable]
    public string GetHelloMessage() => $"Hello, {Name}!";
}

Metoda CallHelloHelperGetHelloMessage v následující JsInteropClasses3 třídě vyvolá JS funkci sayHello1 s novou instancí HelloHelper.

JsInteropClasses3.cs:

using Microsoft.JSInterop;

public class JsInteropClasses3 : IDisposable
{
    private readonly IJSRuntime js;
    private DotNetObjectReference<HelloHelper>? objRef;

    public JsInteropClasses3(IJSRuntime js)
    {
        this.js = js;
    }

    public ValueTask<string> CallHelloHelperGetHelloMessage(string? name)
    {
        objRef = DotNetObjectReference.Create(new HelloHelper(name));

        return js.InvokeAsync<string>("sayHello1", objRef);
    }

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

V předchozím příkladu je název dotNetHelper proměnné libovolný a lze ho změnit na libovolný upřednostňovaný název.

Aby nedošlo k úniku paměti a povolte uvolňování paměti, je v metodě odstraněn Dispose odkaz na objekt .NET vytvořenýDotNetObjectReference.

Trigger .NET instance method Když je tlačítko vybráno v následující CallDotNetExample4 komponentě, JsInteropClasses3.CallHelloHelperGetHelloMessage je volána s hodnotou .name

Pages/CallDotNetExample4.razor:

@page "/call-dotnet-example-4"
@implements IDisposable
@inject IJSRuntime JS

<h1>Call .NET Example 4</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string? name;
    private string? result;
    private JsInteropClasses3? jsInteropClasses;

    private async Task TriggerDotNetInstanceMethod()
    {
        jsInteropClasses = new JsInteropClasses3(JS);
        result = await jsInteropClasses.CallHelloHelperGetHelloMessage(name);
    }

    public void Dispose()
    {
        jsInteropClasses?.Dispose();
    }
}

Následující obrázek znázorňuje vykreslovanou komponentu s názvem Amy Pond v Name poli. Po výběru Hello, Amy Pond! tlačítka se zobrazí v uživatelském rozhraní:

Předchozí vzor zobrazený ve JsInteropClasses3 třídě lze také implementovat zcela v komponentě.

Pages/CallDotNetExample5.razor:

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

<h1>Call .NET Example 5</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string? name;
    private string? result;
    private DotNetObjectReference<HelloHelper>? objRef;

    public async Task TriggerDotNetInstanceMethod()
    {
        objRef = DotNetObjectReference.Create(new HelloHelper(name));
        result = await JS.InvokeAsync<string>("sayHello1", objRef);
    }

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

V předchozím příkladu je název dotNetHelper proměnné libovolný a lze ho změnit na libovolný upřednostňovaný název.

Aby nedošlo k úniku paměti a povolte uvolňování paměti, je v metodě odstraněn Dispose odkaz na objekt .NET vytvořenýDotNetObjectReference.

Výstup zobrazený komponentou CallDotNetExample5 je Hello, Amy Pond! , když je název Amy Pond zadaný v Name poli.

V předchozí CallDotNetExample5 komponentě je odkaz na objekt .NET odstraněn. Pokud třída nebo komponenta neodhodí DotNetObjectReference, odstraňte ji od klienta voláním dispose předaného DotNetObjectReference:

window.jsFunction = (dotNetHelper) => {
  dotNetHelper.invokeMethodAsync('{ASSEMBLY NAME}', '{.NET METHOD ID}');
  dotNetHelper.dispose();
}

V předchozím příkladu:

• Název dotNetHelper proměnné je libovolný a lze ho změnit na libovolný upřednostňovaný název.
• Zástupný {ASSEMBLY NAME} symbol je název sestavení aplikace.
• Zástupný {.NET METHOD ID} symbol je identifikátor metody .NET.

Pomocná třída metody .NET instance komponenty

Pomocná třída může vyvolat metodu instance .NET jako Action. Pomocné třídy jsou užitečné v následujících scénářích:

• Když se na stejné stránce vykreslí několik komponent stejného typu.
• V aplikacích Blazor Server , kde více uživatelů současně používá stejnou komponentu.

V následujícím příkladu:

• Komponenta CallDotNetExample6 obsahuje několik ListItem komponent, což je sdílená komponenta ve složce aplikace Shared .
• Každá ListItem komponenta se skládá ze zprávy a tlačítka.
• ListItem Když je vybráno tlačítko komponenty, tato ListItemUpdateMessage metoda změní text položky seznamu a skryje tlačítko.

MessageUpdateInvokeHelper Následující třída udržuje metodu JS-invokable .NET, UpdateMessageCallerkterá vyvolá zadanou Action při vytvoření instance třídy. BlazorSample je název sestavení aplikace.

MessageUpdateInvokeHelper.cs:

using Microsoft.JSInterop;

public class MessageUpdateInvokeHelper
{
    private Action action;

    public MessageUpdateInvokeHelper(Action action)
    {
        this.action = action;
    }

    [JSInvokable("BlazorSample")]
    public void UpdateMessageCaller()
    {
        action.Invoke();
    }
}

updateMessageCallerJS Následující funkce vyvolá metodu UpdateMessageCaller .NET. BlazorSample je název sestavení aplikace.

<script>
  window.updateMessageCaller = (dotNetHelper) => {
    dotNetHelper.invokeMethodAsync('BlazorSample', 'UpdateMessageCaller');
    dotNetHelper.dispose();
  }
</script>

Poznámka

Obecné pokyny k JS umístění a doporučení pro produkční aplikace najdete v tématu ASP.NET Core Blazor interoperabilita JavaScriptu (JSinterop)..

V předchozím příkladu je název dotNetHelper proměnné libovolný a lze ho změnit na libovolný upřednostňovaný název.

Následující ListItem komponenta je sdílená komponenta, která se dá použít libovolný početkrát v nadřazené komponentě a vytvoří položky seznamu (<li>...</li>) pro seznam HTML (<ul>...</ul> nebo <ol>...</ol>). Každá ListItem instance komponenty vytvoří instanci MessageUpdateInvokeHelper s nastavenou metodou ActionUpdateMessage .

ListItem Když je vybráno tlačítko komponentyInteropCall, updateMessageCaller vyvolá se vytvořeným DotNetObjectReference pro MessageUpdateInvokeHelper instanci. To umožňuje rozhraní volat UpdateMessageCaller tuto ListItemMessageUpdateInvokeHelper instanci. Předaný DotNetObjectReference se vyhodí (JSdotNetHelper.dispose()).

Shared/ListItem.razor:

@inject IJSRuntime JS

<li>
    @message
    <button @onclick="InteropCall" style="display:@display">InteropCall</button>
</li>

@code {
    private string message = "Select one of these list item buttons.";
    private string display = "inline-block";
    private MessageUpdateInvokeHelper? messageUpdateInvokeHelper;

    protected override void OnInitialized()
    {
        messageUpdateInvokeHelper = new MessageUpdateInvokeHelper(UpdateMessage);
    }

    protected async Task InteropCall()
    {
        if (messageUpdateInvokeHelper is not null)
        {
            await JS.InvokeVoidAsync("updateMessageCaller",
                DotNetObjectReference.Create(messageUpdateInvokeHelper));
        }
    }

    private void UpdateMessage()
    {
        message = "UpdateMessage Called!";
        display = "none";
        StateHasChanged();
    }
}

StateHasChangedje volána k aktualizaci uživatelského rozhraní, když message je nastavena .UpdateMessage Pokud StateHasChanged není volána, nemá žádný způsob, jak zjistit, Blazor že by se uživatelské rozhraní mělo aktualizovat při Action vyvolání.

CallDotNetExample6 Následující nadřazená komponenta obsahuje čtyři položky seznamu, každou instanci ListItem komponenty.

Pages/CallDotNetExample6.razor:

@page "/call-dotnet-example-6"

<h1>Call .NET Example 6</h1>

<ul>
    <ListItem />
    <ListItem />
    <ListItem />
    <ListItem />
</ul>

Následující obrázek znázorňuje vykreslovanou CallDotNetExample6 nadřazenou komponentu po výběru druhého InteropCall tlačítka:

• Druhá ListItem komponenta zobrazila UpdateMessage Called! zprávu.
• Tlačítko InteropCall druhé ListItem komponenty není viditelné, protože vlastnost CSS display tlačítka je nastavena na none.

Synchronní JS spolupráce v Blazor WebAssembly aplikacích

Tato část platí jenom pro Blazor WebAssembly aplikace.

Volání zprostředkovatele komunikace JS jsou ve výchozím nastavení asynchronní, bez ohledu na to, jestli volaný kód je synchronní nebo asynchronní. Volání jsou ve výchozím nastavení asynchronní, aby se zajistilo, že komponenty jsou kompatibilní jak mezi modely hostování Blazor, tak Blazor Server a Blazor WebAssembly. Všechny Blazor ServerJS volání interopu musí být asynchronní, protože se odesílají přes síťové připojení.

Pokud víte, že vaše aplikace běží Blazor WebAssemblyjenom někdy, můžete se rozhodnout provádět synchronní JS volání interopu. To má mírně menší režii než provádění asynchronních volání a může vést k menšímu počtu cyklů vykreslování, protože během čekání na výsledky neexistuje žádný přechodný stav.

Pokud chcete v aplikacích provádět synchronní volání z JavaScriptu na .NET Blazor WebAssembly , použijte DotNet.invokeMethod místo DotNet.invokeMethodAsync.

Synchronní volání fungují, pokud:

• Aplikace běží na Blazor WebAssembly, ne Blazor Server.
• Volaná funkce vrátí synchronně hodnotu. Funkce není async metoda a nevrací .NET Task ani JavaScript Promise.

Umístění JavaScriptu

Načtěte kód JavaScriptu (JS) pomocí libovolného přístupu popsaného v článku přehleduJS spolupráce:

• Načtení skriptu ve značce <head> (obecně se nedoporučuje)
• Načtení skriptu ve značce <body>
• Načtení skriptu z externího souboru JS (.js)
• Vložení skriptu po spuštění architektury Blazor

Informace o izolace skriptů v JS modulech najdete v části javascriptové izolace modulů .

Upozornění

Neumisťujte <script> značku do souboru komponenty (.razor), protože <script> značku nelze dynamicky aktualizovat.

Izolace JavaScriptu v modulech JavaScriptu

Blazor umožňuje izolaci JavaScriptu (JS) ve standardních modulech JavaScriptu (specifikace ECMAScript).

Izolace JS poskytuje následující výhody:

• Import JS už znečišťuje globální obor názvů.
• Uživatelé knihovny a komponent už nemusí importovat související JS.

Další informace najdete v tématu Volání funkcí JavaScriptu z metod .NET v ASP.NET Core Blazor.

Vyhněte se cyklovým odkazům na objekty.

Objekty, které obsahují cyklický odkaz, nelze serializovat v klientovi pro následující objekty:

• Volání metody .NET
• Volání metod JavaScriptu z jazyka C#, pokud má návratový typ cyklický odkaz.

Podpora bajtového pole

Blazor podporuje optimalizovanou bajtůovou matici JavaScriptu (JS), která zabraňuje kódování a dekódování bajtů do Base64. Následující příklad používá JS interoperabilitu k předání bajtového pole do .NET.

sendByteArrayJS Zadejte funkci. Funkce se volá tlačítkem v komponentě a nevrací hodnotu:

<script>
  window.sendByteArray = () => {
    const data = new Uint8Array([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]);
    DotNet.invokeMethodAsync('BlazorSample', 'ReceiveByteArray', data)
      .then(str => {
        alert(str);
      });
  };
</script>

Poznámka

Obecné pokyny k JS umístění a doporučení pro produkční aplikace najdete v tématu ASP.NET Core Blazor interoperabilita JavaScriptu (JSinterop)..

Pages/CallDotNetExample7.razor:

@page "/call-dotnet-example-7"
@using System.Text

<h1>Call .NET Example 7</h1>

<p>
    <button onclick="sendByteArray()">Send Bytes</button>
</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 {
    [JSInvokable]
    public static Task<string> ReceiveByteArray(byte[] receivedBytes)
    {
        return Task.FromResult(
            Encoding.UTF8.GetString(receivedBytes, 0, receivedBytes.Length));
    }
}

Informace o použití bajtového pole při volání JavaScriptu z .NET najdete v tématu Volání funkcí JavaScriptu z metod .NET v ASP.NET Core Blazor.

Streamování z JavaScriptu do .NET

Blazor podporuje streamovaná data přímo z JavaScriptu do .NET. Streamy se požadují pomocí Microsoft.JSInterop.IJSStreamReference rozhraní.

Microsoft.JSInterop.IJSStreamReference.OpenReadStreamAsyncStream vrátí a použije následující parametry:

• maxAllowedSize: Maximální počet bajtů povolených pro operaci čtení z JavaScriptu, což je výchozí hodnota 512 000 bajtů, pokud není zadána.
• cancellationToken: A CancellationToken pro zrušení čtení.

V JavaScriptu:

function streamToDotNet() {
  return new Uint8Array(10000000);
}

V kódu jazyka C#:

var dataReference = 
    await JS.InvokeAsync<IJSStreamReference>("streamToDotNet");
using var dataReferenceStream = 
    await dataReference.OpenReadStreamAsync(maxAllowedSize: 10_000_000);

var outputPath = Path.Combine(Path.GetTempPath(), "file.txt");
using var outputFileStream = File.OpenWrite(outputPath);
await dataReferenceStream.CopyToAsync(outputFileStream);

V předchozím příkladu:

• JS je vložená IJSRuntime instance. IJSRuntime je registrován v Blazor rámci.
• Zapisuje se dataReferenceStream na disk (file.txt) v cestě k dočasné složce aktuálního uživatele (GetTempPath).

Volání funkcí JavaScriptu z metod .NET v ASP.NET Core Blazor pokrývá reverzní operaci streamování z .NET do JavaScriptu pomocí DotNetStreamReference.

Blazor ASP.NET Core nahrávání souborů se zabývá tím, jak nahrát soubor do Blazorsouboru .

Omezení velikosti pro volání z interoperability JavaScriptu

Tato část platí jenom pro Blazor Server aplikace. Architektura Blazor WebAssemblyneukládá omezení velikosti vstupů a výstupů z interoperability JavaScriptuJS.

Volání Blazor Serverinteropu jsou omezená velikostí maximální velikosti příchozích SignalR zpráv povolených pro metody centra, která se vynucuje HubOptions.MaximumReceiveMessageSize (výchozí hodnota: 32 kBJS). JS pro zprávy .NET SignalR větší, než MaximumReceiveMessageSize vyvolá chybu. Architektura neukládá omezení velikosti SignalR zprávy z centra na klienta.

Pokud SignalR protokolování není nastavené na Ladění nebo Trasování, zobrazí se chyba velikosti zprávy jenom v konzole vývojářských nástrojů prohlížeče:

Chyba: Připojení se odpojilo s chybou Chyba: Server vrátil chybu při zavření: Připojení se zavřelo s chybou.

Pokud SignalR je protokolování na straně serveru nastavené na Ladění nebo Trasování, protokolování na straně serveru zobrazí InvalidDataException chybu velikosti zprávy.

appsettings.Development.json:

{
  "DetailedErrors": true,
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information",
      "Microsoft.AspNetCore.SignalR": "Debug"
    }
  }
}

Chyba:

System.IO.InvalidDataException: Byla překročena maximální velikost zprávy 32768B. Velikost zprávy je možné nakonfigurovat v AddHubOptions.

Zvyšte limit nastavením MaximumReceiveMessageSize v Program.cs. Následující příklad nastaví maximální velikost zprávy příjmu na 64 kB (64 * 1024):

builder.Services.AddServerSideBlazor()
    .AddHubOptions(options => options.MaximumReceiveMessageSize = 64 * 1024);

Zvýšení limitu SignalR velikosti příchozích zpráv má náklady na vyžadování dalších prostředků serveru a zpřístupňuje server zvýšeným rizikům od škodlivého uživatele. Kromě toho může čtení velkého množství obsahu do paměti jako řetězce nebo bajtová pole způsobit také přidělení, která fungují špatně s uvolňováním paměti, což vede k dalším sankcím za výkon.

Při vývoji kódu, který přenáší velké množství dat mezi JS aplikacemi a Blazor v Blazor Server aplikacích, zvažte následující pokyny:

• Využijte nativní podporu komunikace streamování k přenosu dat větších než SignalR limit velikosti příchozích zpráv:
  • Volání funkcí JavaScriptu z metod .NET v ASP.NET Core Blazor
  • Volání metod .NET z funkcí JavaScriptu v ASP.NET Core Blazor
• Obecné tipy:
  • Nepřidělujte velké objekty v kódu jazyka JS C#.
  • Bezplatná spotřebovaná paměť při dokončení nebo zrušení procesu
  • Vynucujte pro účely zabezpečení následující další požadavky:
    • Deklarujte maximální velikost souboru nebo dat, které lze předat.
    • Deklarujte minimální rychlost nahrávání z klienta na server.
  • Po přijetí dat serverem můžou být tato data:
    • Dočasně uložená v vyrovnávací paměti, dokud se neshromáždí všechny segmenty.
    • Spotřebováno okamžitě. Data se například dají uložit okamžitě v databázi nebo zapisovat na disk při přijetí jednotlivých segmentů.

Další materiály

• Volání funkcí JavaScriptu z metod .NET v ASP.NET Core Blazor
• InteropComponent.razor example (dotnet/AspNetCore GitHub repository main branch): main Větev představuje aktuální vývoj produktové jednotky pro příští verzi ASP.NET Core. Pokud chcete vybrat větev pro jinou verzi (například release/5.0), pomocí rozevíracího seznamu Přepnout větve nebo značky vyberte větev.
• Interakce s modelem DOM (Document Object Model)
• Blazor ukázky úložiště GitHub (dotnet/blazor-samples)

Informace o volání JS funkcí z .NET naleznete v tématu Volání javascriptových funkcí z metod .NET v ASP.NET Core Blazor.

Vyvolání statické metody .NET

Pokud chcete vyvolat statickou metodu .NET z JavaScriptu (JS), použijte JS tyto funkce:

• DotNet.invokeMethodAsync (Doporučeno): Asynchronní pro aplikace Blazor Server i Blazor WebAssembly aplikace.
• DotNet.invokeMethod: Synchronní pouze pro Blazor WebAssembly aplikace.

V následujícím příkladu:

• Zástupný {ASSEMBLY NAME} symbol je název sestavení aplikace.
• Zástupný {.NET METHOD ID} symbol je identifikátor metody .NET.
• Zástupný {ARGUMENTS} symbol je volitelný argument oddělený čárkami pro předání metodě, z nichž každý musí být JSon-serializovatelný.

DotNet.invokeMethodAsync('{ASSEMBLY NAME}', '{.NET METHOD ID}', {ARGUMENTS});

DotNet.invokeMethodAsyncJS Promise vrátí výsledek operace. DotNet.invokeMethod (Blazor WebAssembly pouze) vrátí výsledek operace.

Důležité

Asynchronní funkce (invokeMethodAsync) je upřednostňovaná před synchronní verzí (invokeMethod) pro podporu Blazor Server scénářů.

Metoda .NET musí být veřejná, statická a musí mít [JSInvokable] atribut.

V následujícím příkladu:

• Zástupný {<T>} symbol označuje návratový typ, který se vyžaduje pouze pro metody, které vracejí hodnotu.
• Zástupný {.NET METHOD ID} symbol je identifikátor metody.

@code {
    [JSInvokable]
    public static Task{<T>} {.NET METHOD ID}()
    {
        ...
    }
}

Poznámka

Volání otevřených obecných metod není podporováno u statických metod .NET, ale podporuje se metodami instance, které jsou popsány dále v tomto článku.

V následující CallDotNetExample1 komponentě ReturnArrayAsync vrátí int metoda C# pole. Atribut[JSInvokable] se použije na metodu, která metodu vyvolá .JS

Pages/CallDotNetExample1.razor:

@page "/call-dotnet-example-1"

<h1>Call .NET Example 1</h1>

<p>
    <button onclick="returnArrayAsync()">
        Trigger .NET static method
    </button>
</p>

@code {
    [JSInvokable]
    public static Task<int[]> ReturnArrayAsync()
    {
        return Task.FromResult(new int[] { 1, 2, 3 });
    }
}

Atribut <button> HTML elementu onclick je přiřazení obslužné rutiny událostí JavaScriptu onclick pro zpracování click událostí, nikoli Blazoratribut direktivy @onclick . Funkce returnArrayAsyncJS je přiřazena jako obslužná rutina.

Následující returnArrayAsyncJS funkce volá metodu ReturnArrayAsync .NET předchozí CallDotNetExample1 komponenty a zaprotokoluje výsledek do konzoly webových vývojářských nástrojů prohlížeče. BlazorSample je název sestavení aplikace.

Uvnitř koncové </body> značky wwwroot/index.html (Blazor WebAssembly) nebo Pages/_Host.cshtml (Blazor Server):

<script>
  window.returnArrayAsync = () => {
    DotNet.invokeMethodAsync('BlazorSample', 'ReturnArrayAsync')
      .then(data => {
        console.log(data);
      });
    };
</script>

Trigger .NET static method Po výběru tlačítka se ve výstupu konzoly vývojářských nástrojů prohlížeče zobrazí data pole. Formát výstupu se v prohlížečích mírně liší. Následující výstup ukazuje formát, který microsoft Edge používá:

Array(3) [ 1, 2, 3 ]

Ve výchozím nastavení je identifikátor metody .NET pro JS volání název metody .NET, ale můžete zadat jiný identifikátor pomocí konstruktoru atributu[JSInvokable]. V následujícím příkladu DifferentMethodName je přiřazený identifikátor metody pro metodu ReturnArrayAsync :

[JSInvokable("DifferentMethodName")]

Při volání nebo DotNet.invokeMethodAsyncDotNet.invokeMethod (Blazor WebAssembly pouze) volání DifferentMethodName pro spuštění ReturnArrayAsync metody .NET:

• DotNet.invokeMethodAsync('BlazorSample', 'DifferentMethodName');
• DotNet.invokeMethod('BlazorSample', 'DifferentMethodName'); (Blazor WebAssembly pouze)

Poznámka

Příklad ReturnArrayAsync metody v této části vrátí výsledek Task bez použití explicitního jazyka C# async a await klíčových slov. Metody kódování s typickými await metodamiasync, které používají await klíčové slovo k vrácení hodnoty asynchronních operací.

ReturnArrayAsync metoda složená s async klíčovými await slovy:

[JSInvokable]
public static async Task<int[]> ReturnArrayAsync()
{
    return await Task.FromResult(new int[] { 1, 2, 3 });
}

Další informace naleznete v tématu Asynchronní programování pomocí async a await v průvodci jazykem C#.

Vyvolání metody instance .NET

Vyvolání metody .NET instance z JavaScriptu (JS):

• Předejte instanci .NET odkazem tak, že JS instanci zabalíte do DotNetObjectReference a zavoláte Create na ni.
• Vyvolá metodu instance .NET pomocí JSinvokeMethodAsync nebo invokeMethod (Blazor WebAssembly pouze) z předané DotNetObjectReference. Instanci .NET lze předat také jako argument při vyvolání jiných metod .NET z JS.
• Likvidujte DotNetObjectReference.

Následující části tohoto článku ukazují různé přístupy k vyvolání metody instance .NET:

• Příklady instancí komponent
• Příklady instancí třídy
• Pomocná třída metody .NET instance komponenty

Příklady instancí komponent

Následující sayHello1JS funkce přijme DotNetObjectReference metodu GetHelloMessage .NET komponenty a zavolá invokeMethodAsync ji.

Uvnitř koncové </body> značky wwwroot/index.html (Blazor WebAssembly) nebo Pages/_Host.cshtml (Blazor Server):

<script>
  window.sayHello1 = (dotNetHelper) => {
    return dotNetHelper.invokeMethodAsync('GetHelloMessage');
  };
</script>

Pro následující CallDotNetExample2 komponentu:

• Komponenta má metodu JS-invokable .NET s názvem GetHelloMessage.
• Trigger .NET instance method Když je tlačítko vybráno, JS funkce sayHello1 je volána s .DotNetObjectReference
• sayHello1:
  • Volání GetHelloMessage a příjem výsledku zprávy
  • Vrátí výsledek zprávy volající TriggerDotNetInstanceMethod metodě.
• Vrácená zpráva od sayHello1result uživatele se zobrazí.
• Chcete-li zabránit úniku paměti a povolit uvolňování paměti, je v metodě odstraněn odkaz na objekt .NET vytvořený DotNetObjectReference metodou Dispose .

Pages/CallDotNetExample2.razor:

@page "/call-dotnet-example-2"
@implements IDisposable
@inject IJSRuntime JS

<h1>Call .NET Example 2</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string name;
    private string result;
    private DotNetObjectReference<CallDotNetExample2> objRef;

    public async Task TriggerDotNetInstanceMethod()
    {
        objRef = DotNetObjectReference.Create(this);
        result = await JS.InvokeAsync<string>("sayHello1", objRef);
    }

    [JSInvokable]
    public string GetHelloMessage() => $"Hello, {name}!";

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

Předání argumentů metodě instance:

1. Přidejte parametry do vyvolání metody .NET. V následujícím příkladu se metodě předá název. Podle potřeby přidejte do seznamu další parametry.

   <script>
     window.sayHello2 = (dotNetHelper, name) => {
       return dotNetHelper.invokeMethodAsync('GetHelloMessage', name);
     };
   </script>
   

2. Zadejte seznam parametrů metodě .NET.

   Pages/CallDotNetExample3.razor:

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

<h1>Call .NET Example 3</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string name;
    private string result;
    private DotNetObjectReference<CallDotNetExample3> objRef;

    public async Task TriggerDotNetInstanceMethod()
    {
        objRef = DotNetObjectReference.Create(this);
        result = await JS.InvokeAsync<string>("sayHello2", objRef, name);
    }

    [JSInvokable]
    public string GetHelloMessage(string passedName) => $"Hello, {passedName}!";

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

Příklady instancí třídy

Následující sayHello1JS funkce:

• Volá metodu GetHelloMessage .NET na předaném DotNetObjectReference.
• Vrátí zprávu od GetHelloMessage volajícího sayHello1 .

Uvnitř koncové </body> značky wwwroot/index.html (Blazor WebAssembly) nebo Pages/_Host.cshtml (Blazor Server):

<script>
  window.sayHello1 = (dotNetHelper) => {
    return dotNetHelper.invokeMethodAsync('GetHelloMessage');
  };
</script>

Následující HelloHelper třída má metodu JS-invokable .NET s názvem GetHelloMessage. Při HelloHelper vytvoření se název ve Name vlastnosti použije k vrácení zprávy z GetHelloMessage.

HelloHelper.cs:

using Microsoft.JSInterop;

public class HelloHelper
{
    public HelloHelper(string name)
    {
        Name = name;
    }

    public string Name { get; set; }

    [JSInvokable]
    public string GetHelloMessage() => $"Hello, {Name}!";
}

Metoda CallHelloHelperGetHelloMessage v následující JsInteropClasses3 třídě vyvolá JS funkci sayHello1 s novou instancí HelloHelper.

JsInteropClasses3.cs:

using System;
using System.Threading.Tasks;
using Microsoft.JSInterop;

public class JsInteropClasses3 : IDisposable
{
    private readonly IJSRuntime js;
    private DotNetObjectReference<HelloHelper> objRef;

    public JsInteropClasses3(IJSRuntime js)
    {
        this.js = js;
    }

    public ValueTask<string> CallHelloHelperGetHelloMessage(string name)
    {
        objRef = DotNetObjectReference.Create(new HelloHelper(name));

        return js.InvokeAsync<string>("sayHello1", objRef);
    }

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

Chcete-li zabránit úniku paměti a povolit uvolňování paměti, je v metodě odstraněn odkaz na objekt .NET vytvořený DotNetObjectReference metodou Dispose .

Trigger .NET instance method Když je tlačítko vybráno v následující CallDotNetExample4 komponentě, JsInteropClasses3.CallHelloHelperGetHelloMessage volá se s hodnotou name.

Pages/CallDotNetExample4.razor:

@page "/call-dotnet-example-4"
@implements IDisposable
@inject IJSRuntime JS

<h1>Call .NET Example 4</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string name;
    private string result;
    private JsInteropClasses3 jsInteropClasses;

    private async Task TriggerDotNetInstanceMethod()
    {
        jsInteropClasses = new JsInteropClasses3(JS);
        result = await jsInteropClasses.CallHelloHelperGetHelloMessage(name);
    }

    public void Dispose()
    {
        jsInteropClasses?.Dispose();
    }
}

Následující obrázek znázorňuje vykreslovanou komponentu s názvem Amy Pond v Name poli. Po výběru Hello, Amy Pond! tlačítka se zobrazí v uživatelském rozhraní:

Předchozí vzor zobrazený ve JsInteropClasses3 třídě lze také implementovat zcela v komponentě.

Pages/CallDotNetExample5.razor:

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

<h1>Call .NET Example 5</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string name;
    private string result;
    private DotNetObjectReference<HelloHelper> objRef;

    public async Task TriggerDotNetInstanceMethod()
    {
        objRef = DotNetObjectReference.Create(new HelloHelper(name));
        result = await JS.InvokeAsync<string>("sayHello1", objRef);
    }

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

Chcete-li zabránit úniku paměti a povolit uvolňování paměti, je v metodě odstraněn odkaz na objekt .NET vytvořený DotNetObjectReference metodou Dispose .

Výstup zobrazený komponentou CallDotNetExample5 je Hello, Amy Pond! při zadání názvu Amy Pond v Name poli.

V předchozí CallDotNetExample5 komponentě je odkaz na objekt .NET uvolněn. Pokud třída nebo komponenta neodhodí , vyřaďte DotNetObjectReferenceji z klienta voláním dispose předaného DotNetObjectReference:

window.jsFunction = (dotNetHelper) => {
  dotNetHelper.invokeMethodAsync('{ASSEMBLY NAME}', '{.NET METHOD ID}');
  dotNetHelper.dispose();
}

V předchozím příkladu:

• Zástupný {ASSEMBLY NAME} symbol je název sestavení aplikace.
• Zástupný {.NET METHOD ID} symbol je identifikátor metody .NET.

Pomocná třída metody .NET instance komponenty

Pomocná třída může vyvolat metodu instance .NET jako Action. Pomocné třídy jsou užitečné v následujících scénářích:

• Když se na stejné stránce vykreslí několik komponent stejného typu.
• Blazor Server V aplikacích, kde více uživatelů současně používá stejnou komponentu.

V následujícím příkladu:

• Komponenta CallDotNetExample6 obsahuje několik ListItem komponent, což je sdílená komponenta ve složce aplikace Shared .
• Každá ListItem komponenta se skládá ze zprávy a tlačítka.
• ListItem Když je vybráno tlačítko komponenty, tato ListItemUpdateMessage metoda změní text položky seznamu a skryje tlačítko.

Následující MessageUpdateInvokeHelper třída udržuje metodu JS-invokable .NET, UpdateMessageCallerkterá vyvolá zadanou Action při vytvoření instance třídy. BlazorSample je název sestavení aplikace.

MessageUpdateInvokeHelper.cs:

using System;
using Microsoft.JSInterop;

public class MessageUpdateInvokeHelper
{
    private Action action;

    public MessageUpdateInvokeHelper(Action action)
    {
        this.action = action;
    }

    [JSInvokable("BlazorSample")]
    public void UpdateMessageCaller()
    {
        action.Invoke();
    }
}

Následující updateMessageCallerJS funkce vyvolá metodu UpdateMessageCaller .NET. BlazorSample je název sestavení aplikace.

Uvnitř koncové </body> značky wwwroot/index.html (Blazor WebAssembly) nebo Pages/_Host.cshtml (Blazor Server):

<script>
  window.updateMessageCaller = (dotNetHelper) => {
    dotNetHelper.invokeMethodAsync('BlazorSample', 'UpdateMessageCaller');
    dotNetHelper.dispose();
  }
</script>

Následující ListItem komponenta je sdílená komponenta, která se dá použít libovolný početkrát v nadřazené komponentě a vytvoří položky seznamu (<li>...</li>) pro seznam HTML (<ul>...</ul> nebo <ol>...</ol>). Každá ListItem instance komponenty vytvoří instanci MessageUpdateInvokeHelper s nastavenou metodou ActionUpdateMessage .

ListItem Když je vybráno tlačítko komponentyInteropCall, updateMessageCaller vyvolá se vytvořeným DotNetObjectReference pro MessageUpdateInvokeHelper instanci. To umožňuje rozhraní volat UpdateMessageCaller tuto ListItemMessageUpdateInvokeHelper instanci. Předaný DotNetObjectReference se vyhodí (JSdotNetHelper.dispose()).

Shared/ListItem.razor:

@inject IJSRuntime JS

<li>
    @message
    <button @onclick="InteropCall" style="display:@display">InteropCall</button>
</li>

@code {
    private string message = "Select one of these list item buttons.";
    private string display = "inline-block";
    private MessageUpdateInvokeHelper messageUpdateInvokeHelper;

    protected override void OnInitialized()
    {
        messageUpdateInvokeHelper = new MessageUpdateInvokeHelper(UpdateMessage);
    }

    protected async Task InteropCall()
    {
        await JS.InvokeVoidAsync("updateMessageCaller",
            DotNetObjectReference.Create(messageUpdateInvokeHelper));
    }

    private void UpdateMessage()
    {
        message = "UpdateMessage Called!";
        display = "none";
        StateHasChanged();
    }
}

StateHasChangedje volána k aktualizaci uživatelského rozhraní, když message je nastavena .UpdateMessage Pokud StateHasChanged není volána, nemá žádný způsob, jak zjistit, Blazor že by se uživatelské rozhraní mělo aktualizovat při Action vyvolání.

CallDotNetExample6 Následující nadřazená komponenta obsahuje čtyři položky seznamu, každou instanci ListItem komponenty.

Pages/CallDotNetExample6.razor:

@page "/call-dotnet-example-6"

<h1>Call .NET Example 6</h1>

<ul>
    <ListItem />
    <ListItem />
    <ListItem />
    <ListItem />
</ul>

Následující obrázek znázorňuje vykreslovanou CallDotNetExample6 nadřazenou komponentu po výběru druhého InteropCall tlačítka:

• Druhá ListItem komponenta zobrazila UpdateMessage Called! zprávu.
• Tlačítko InteropCall druhé ListItem komponenty není viditelné, protože vlastnost CSS display tlačítka je nastavena na none.

Umístění JavaScriptu

Načtěte kód JavaScriptu (JS) pomocí libovolného přístupu popsaného v článku přehleduJS spolupráce:

• Načtení skriptu ve značce <head> (obecně se nedoporučuje)
• Načtení skriptu ve značce <body>
• Načtení skriptu z externího souboru JavaScriptu (.js) umístěného stejně jako komponenta
• Načtení skriptu z externího souboru JS (.js)
• Vložení skriptu po spuštění architektury Blazor

Informace o izolace skriptů v JS modulech najdete v části javascriptové izolace modulů .

Upozornění

Neumisťujte <script> značku do souboru komponenty (.razor), protože <script> značku nelze dynamicky aktualizovat.

Vyhněte se cyklovým odkazům na objekty.

Objekty, které obsahují cyklický odkaz, nelze serializovat v klientovi pro následující objekty:

• Volání metody .NET
• Volání metod JavaScriptu z jazyka C#, pokud má návratový typ cyklický odkaz.

Omezení velikosti pro volání z interoperability JavaScriptu

Tato část platí jenom pro Blazor Server aplikace. Architektura Blazor WebAssemblyneukládá omezení velikosti vstupů a výstupů z interoperability JavaScriptuJS.

Volání Blazor Serverinteropu jsou omezená velikostí maximální velikosti příchozích SignalR zpráv povolených pro metody centra, která se vynucuje HubOptions.MaximumReceiveMessageSize (výchozí hodnota: 32 kBJS). JS pro zprávy .NET SignalR větší, než MaximumReceiveMessageSize vyvolá chybu. Architektura neukládá omezení velikosti SignalR zprávy z centra na klienta.

Pokud SignalR protokolování není nastavené na Ladění nebo Trasování, zobrazí se chyba velikosti zprávy jenom v konzole vývojářských nástrojů prohlížeče:

Chyba: Připojení se odpojilo s chybou Chyba: Server vrátil chybu při zavření: Připojení se zavřelo s chybou.

Pokud SignalR je protokolování na straně serveru nastavené na Ladění nebo Trasování, protokolování na straně serveru zobrazí InvalidDataException chybu velikosti zprávy.

appsettings.Development.json:

{
  "DetailedErrors": true,
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information",
      "Microsoft.AspNetCore.SignalR": "Debug"
    }
  }
}

Chyba:

System.IO.InvalidDataException: Byla překročena maximální velikost zprávy 32768B. Velikost zprávy je možné nakonfigurovat v AddHubOptions.

Zvyšte limit nastavením MaximumReceiveMessageSize v Startup.ConfigureServices:

services.AddServerSideBlazor()
    .AddHubOptions(options => options.MaximumReceiveMessageSize = 64 * 1024);

Zvýšení limitu SignalR velikosti příchozích zpráv má náklady na vyžadování dalších prostředků serveru a zpřístupňuje server zvýšeným rizikům od škodlivého uživatele. Kromě toho může čtení velkého množství obsahu do paměti jako řetězce nebo bajtová pole způsobit také přidělení, která fungují špatně s uvolňováním paměti, což vede k dalším sankcím za výkon.

Jednou z možností čtení velkých datových částí je odeslat obsah v menších blocích a zpracovat datovou část jako Stream. To se dá použít při čtení velkých JSdatových částí ON nebo pokud jsou data k dispozici jako JS nezpracované bajty. Příklad, který ukazuje odesílání velkých binárních datových částí, Blazor Server které používají techniky podobné InputFile komponentě, najdete v ukázkové aplikaci Binary Submit.

Poznámka

Odkazy na dokumentaci k referenčnímu zdroji .NET obvykle načítají výchozí větev úložiště, která představuje aktuální vývoj pro příští verzi .NET. Pokud chcete vybrat značku pro konkrétní verzi, použijte rozevírací seznam pro přepnutí větví nebo značek. Další informace najdete v tématu Jak vybrat značku verze zdrojového kódu ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Při vývoji kódu, který přenáší velké množství dat mezi JS aplikacemi a Blazor v Blazor Server aplikacích, zvažte následující pokyny:

• Rozdělte data na menší části a posílejte datové segmenty postupně, dokud server neobdrží všechna data.
• Nepřidělujte velké objekty v kódu jazyka JS C#.
• Při odesílání nebo příjmu dat neblokujte hlavní vlákno uživatelského rozhraní po dlouhou dobu.
• Bezplatná spotřebovaná paměť při dokončení nebo zrušení procesu
• Vynucujte pro účely zabezpečení následující další požadavky:
  • Deklarujte maximální velikost souboru nebo dat, které lze předat.
  • Deklarujte minimální rychlost nahrávání z klienta na server.
• Po přijetí dat serverem můžou být tato data:
  • Dočasně uložená v vyrovnávací paměti, dokud se neshromáždí všechny segmenty.
  • Spotřebováno okamžitě. Data se například dají uložit okamžitě v databázi nebo zapisovat na disk při přijetí jednotlivých segmentů.

Izolace JavaScriptu v modulech JavaScriptu

Blazor umožňuje izolaci JavaScriptu (JS) ve standardních modulech JavaScriptu (specifikace ECMAScript).

Izolace JS poskytuje následující výhody:

• Import JS už znečišťuje globální obor názvů.
• Uživatelé knihovny a komponent už nemusí importovat související JS.

Další informace najdete v tématu Volání funkcí JavaScriptu z metod .NET v ASP.NET Core Blazor.

Další materiály

• Volání funkcí JavaScriptu z metod .NET v ASP.NET Core Blazor
• InteropComponent.razor example (dotnet/AspNetCore GitHub repository main branch): main Větev představuje aktuální vývoj produktové jednotky pro příští verzi ASP.NET Core. Pokud chcete vybrat větev pro jinou verzi (například release/5.0), pomocí rozevíracího seznamu Přepnout větve nebo značky vyberte větev.
• Interakce s modelem DOM (Document Object Model)
• Blazor Ukázky úložiště GitHub (dotnet/blazor-samples)

Informace o volání JS funkcí z .NET naleznete v tématu Volání javascriptových funkcí z metod .NET v ASP.NET Core Blazor.

Vyvolání statické metody .NET

Pokud chcete vyvolat statickou metodu .NET z JavaScriptu (JS), použijte JS funkce:

• DotNet.invokeMethodAsync (Doporučeno): Asynchronní pro Blazor Server aplikace i Blazor WebAssembly aplikace.
• DotNet.invokeMethod: Synchronní pouze pro Blazor WebAssembly aplikace.

V následujícím příkladu:

• Zástupný {ASSEMBLY NAME} symbol je název sestavení aplikace.
• Zástupný {.NET METHOD ID} symbol je identifikátor metody .NET.
• Zástupný {ARGUMENTS} symbol je volitelný argument oddělený čárkami, které se mají předat metodě, z nichž každý musí být JSon-serializable.

DotNet.invokeMethodAsync('{ASSEMBLY NAME}', '{.NET METHOD ID}', {ARGUMENTS});

DotNet.invokeMethodAsyncJS Promise vrátí reprezentaci výsledku operace. DotNet.invokeMethod (Blazor WebAssembly pouze) vrátí výsledek operace.

Důležité

Asynchronní funkce (invokeMethodAsync) je upřednostňovaná před synchronní verzí (invokeMethod) a podporuje Blazor Server scénáře.

Metoda .NET musí být veřejná, statická a musí mít [JSInvokable] atribut.

V následujícím příkladu:

• Zástupný {<T>} symbol označuje návratový typ, který se vyžaduje jenom pro metody, které vracejí hodnotu.
• Zástupný {.NET METHOD ID} symbol je identifikátor metody.

@code {
    [JSInvokable]
    public static Task{<T>} {.NET METHOD ID}()
    {
        ...
    }
}

Poznámka

Volání otevřených obecných metod se nepodporuje se statickými metodami .NET, ale podporuje se metodami instance, které jsou popsány dále v tomto článku.

V následující CallDotNetExample1 komponentě vrátí int metoda jazyka ReturnArrayAsync C# pole. Atribut[JSInvokable] se použije na metodu, která metodu vyvolá JS.

Pages/CallDotNetExample1.razor:

@page "/call-dotnet-example-1"

<h1>Call .NET Example 1</h1>

<p>
    <button onclick="returnArrayAsync()">
        Trigger .NET static method
    </button>
</p>

@code {
    [JSInvokable]
    public static Task<int[]> ReturnArrayAsync()
    {
        return Task.FromResult(new int[] { 1, 2, 3 });
    }
}

Atribut <button> HTML elementu onclick je přiřazení obslužné rutiny události JavaScriptu onclick pro zpracování click událostí, nikoli Blazoratribut direktivy @onclick . Funkce returnArrayAsyncJS se přiřadí jako obslužná rutina.

Následující returnArrayAsyncJS funkce volá metodu ReturnArrayAsync .NET předchozí CallDotNetExample1 komponenty a zaprotokoluje výsledek do konzoly nástrojů webového vývojáře prohlížeče. BlazorSample je název sestavení aplikace.

Uvnitř koncové </body> značky wwwroot/index.html () nebo Pages/_Host.cshtml (Blazor WebAssemblyBlazor Server):

<script>
  window.returnArrayAsync = () => {
    DotNet.invokeMethodAsync('BlazorSample', 'ReturnArrayAsync')
      .then(data => {
        console.log(data);
      });
    };
</script>

Trigger .NET static method Po výběru tlačítka zobrazí výstup konzoly vývojářských nástrojů prohlížeče data pole. Formát výstupu se mírně liší mezi prohlížeči. Následující výstup ukazuje formát, který používá Microsoft Edge:

Array(3) [ 1, 2, 3 ]

Ve výchozím nastavení je identifikátor metody .NET pro JS volání název metody .NET, ale pomocí konstruktoru [JSInvokable] atributů můžete zadat jiný identifikátor. V následujícím příkladu DifferentMethodName je přiřazený identifikátor metody pro metodu ReturnArrayAsync :

[JSInvokable("DifferentMethodName")]

Volání metody .NET v volání DotNet.invokeMethodAsync nebo DotNet.invokeMethod (Blazor WebAssemblypouze)DifferentMethodNameReturnArrayAsync

• DotNet.invokeMethodAsync('BlazorSample', 'DifferentMethodName');
• DotNet.invokeMethod('BlazorSample', 'DifferentMethodName'); (Blazor WebAssembly pouze)

Poznámka

Příklad ReturnArrayAsync metody v této části vrátí výsledek Task bez použití explicitního jazyka C# async a await klíčových slov. Metody kódování s typickými await metodamiasync, které používají await klíčové slovo k vrácení hodnoty asynchronních operací.

ReturnArrayAsync metoda složená s async klíčovými await slovy:

[JSInvokable]
public static async Task<int[]> ReturnArrayAsync()
{
    return await Task.FromResult(new int[] { 1, 2, 3 });
}

Další informace najdete v tématu Asynchronní programování s asynchronním programem a čekáním v průvodci jazykem C#.

Vyvolání metody .NET instance

Vyvolání metody .NET instance z JavaScriptu (JS):

• Předejte instanci .NET odkazem tak, že JS zabalíte instanci do DotNetObjectReference a zavoláte Create ji.
• Vyvolání metody instance .NET z JSinvokeMethodAsync použití nebo invokeMethod (Blazor WebAssembly pouze) z předaného DotNetObjectReference. Instanci .NET lze předat také jako argument při vyvolání jiných metod .NET z JS.
• Likvidujte DotNetObjectReference.

Následující části tohoto článku ukazují různé přístupy k vyvolání metody instance .NET:

• Příklady instancí komponent
• Příklady instancí třídy
• Pomocná třída metody .NET instance komponenty

Příklady instancí komponent

Následující sayHello1JS funkce obdrží DotNetObjectReference a volá invokeMethodAsync metodu GetHelloMessage .NET komponenty.

Uvnitř koncové </body> značky wwwroot/index.html () nebo Pages/_Host.cshtml (Blazor WebAssemblyBlazor Server):

<script>
  window.sayHello1 = (dotNetHelper) => {
    return dotNetHelper.invokeMethodAsync('GetHelloMessage');
  };
</script>

Pro následující CallDotNetExample2 komponentu:

• Komponenta má metodu JS-invokable .NET s názvem GetHelloMessage.
• Trigger .NET instance method Když je tlačítko vybráno, JS funkce sayHello1 se volá s klávesou DotNetObjectReference.
• sayHello1:
  • Zavolá GetHelloMessage a obdrží výsledek zprávy.
  • Vrátí výsledek zprávy volající TriggerDotNetInstanceMethod metodě.
• Vrácená zpráva od sayHello1 uživatele result se zobrazí.
• Aby nedošlo k úniku paměti a povolte uvolňování paměti, je v metodě odstraněn Dispose odkaz na objekt .NET vytvořenýDotNetObjectReference.

Pages/CallDotNetExample2.razor:

@page "/call-dotnet-example-2"
@implements IDisposable
@inject IJSRuntime JS

<h1>Call .NET Example 2</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string name;
    private string result;
    private DotNetObjectReference<CallDotNetExample2> objRef;

    public async Task TriggerDotNetInstanceMethod()
    {
        objRef = DotNetObjectReference.Create(this);
        result = await JS.InvokeAsync<string>("sayHello1", objRef);
    }

    [JSInvokable]
    public string GetHelloMessage() => $"Hello, {name}!";

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

Předání argumentů metodě instance:

1. Přidejte parametry do vyvolání metody .NET. V následujícím příkladu se metodě předá název. Podle potřeby přidejte do seznamu další parametry.

   <script>
     window.sayHello2 = (dotNetHelper, name) => {
       return dotNetHelper.invokeMethodAsync('GetHelloMessage', name);
     };
   </script>
   

2. Zadejte seznam parametrů metodě .NET.

   Pages/CallDotNetExample3.razor:

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

<h1>Call .NET Example 3</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string name;
    private string result;
    private DotNetObjectReference<CallDotNetExample3> objRef;

    public async Task TriggerDotNetInstanceMethod()
    {
        objRef = DotNetObjectReference.Create(this);
        result = await JS.InvokeAsync<string>("sayHello2", objRef, name);
    }

    [JSInvokable]
    public string GetHelloMessage(string passedName) => $"Hello, {passedName}!";

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

Příklady instancí třídy

sayHello1JS Následující funkce:

• Volá metodu GetHelloMessage .NET na předané DotNetObjectReference.
• Vrátí zprávu od GetHelloMessage volajícího sayHello1 .

Uvnitř koncové </body> značky wwwroot/index.html () nebo Pages/_Host.cshtml (Blazor WebAssemblyBlazor Server):

<script>
  window.sayHello1 = (dotNetHelper) => {
    return dotNetHelper.invokeMethodAsync('GetHelloMessage');
  };
</script>

HelloHelper Následující třída má metodu JS-invokable .NET s názvem GetHelloMessage. Po HelloHelper vytvoření se název vlastnosti Name použije k vrácení zprávy z GetHelloMessage.

HelloHelper.cs:

using Microsoft.JSInterop;

public class HelloHelper
{
    public HelloHelper(string name)
    {
        Name = name;
    }

    public string Name { get; set; }

    [JSInvokable]
    public string GetHelloMessage() => $"Hello, {Name}!";
}

Metoda CallHelloHelperGetHelloMessage v následující JsInteropClasses3 třídě vyvolá JS funkci sayHello1 s novou instancí HelloHelper.

JsInteropClasses3.cs:

using System;
using System.Threading.Tasks;
using Microsoft.JSInterop;

public class JsInteropClasses3 : IDisposable
{
    private readonly IJSRuntime js;
    private DotNetObjectReference<HelloHelper> objRef;

    public JsInteropClasses3(IJSRuntime js)
    {
        this.js = js;
    }

    public ValueTask<string> CallHelloHelperGetHelloMessage(string name)
    {
        objRef = DotNetObjectReference.Create(new HelloHelper(name));

        return js.InvokeAsync<string>("sayHello1", objRef);
    }

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

Aby nedošlo k úniku paměti a povolte uvolňování paměti, je v metodě odstraněn Dispose odkaz na objekt .NET vytvořenýDotNetObjectReference.

Trigger .NET instance method Když je tlačítko vybráno v následující CallDotNetExample4 komponentě, JsInteropClasses3.CallHelloHelperGetHelloMessage je volána s hodnotou .name

Pages/CallDotNetExample4.razor:

@page "/call-dotnet-example-4"
@implements IDisposable
@inject IJSRuntime JS

<h1>Call .NET Example 4</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string name;
    private string result;
    private JsInteropClasses3 jsInteropClasses;

    private async Task TriggerDotNetInstanceMethod()
    {
        jsInteropClasses = new JsInteropClasses3(JS);
        result = await jsInteropClasses.CallHelloHelperGetHelloMessage(name);
    }

    public void Dispose()
    {
        jsInteropClasses?.Dispose();
    }
}

Následující obrázek znázorňuje vykreslovanou komponentu s názvem Amy Pond v Name poli. Po výběru Hello, Amy Pond! tlačítka se zobrazí v uživatelském rozhraní:

Předchozí vzor zobrazený ve JsInteropClasses3 třídě lze také implementovat zcela v komponentě.

Pages/CallDotNetExample5.razor:

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

<h1>Call .NET Example 5</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string name;
    private string result;
    private DotNetObjectReference<HelloHelper> objRef;

    public async Task TriggerDotNetInstanceMethod()
    {
        objRef = DotNetObjectReference.Create(new HelloHelper(name));
        result = await JS.InvokeAsync<string>("sayHello1", objRef);
    }

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

Aby nedošlo k úniku paměti a povolte uvolňování paměti, je v metodě odstraněn Dispose odkaz na objekt .NET vytvořenýDotNetObjectReference.

Výstup zobrazený komponentou CallDotNetExample5 je Hello, Amy Pond! , když je název Amy Pond zadaný v Name poli.

V předchozí CallDotNetExample5 komponentě je odkaz na objekt .NET odstraněn. Pokud třída nebo komponenta neodhodí DotNetObjectReference, odstraňte ji od klienta voláním dispose předaného DotNetObjectReference:

window.jsFunction = (dotNetHelper) => {
  dotNetHelper.invokeMethodAsync('{ASSEMBLY NAME}', '{.NET METHOD ID}');
  dotNetHelper.dispose();
}

V předchozím příkladu:

• Zástupný {ASSEMBLY NAME} symbol je název sestavení aplikace.
• Zástupný {.NET METHOD ID} symbol je identifikátor metody .NET.

Pomocná třída metody .NET instance komponenty

Pomocná třída může vyvolat metodu instance .NET jako Action. Pomocné třídy jsou užitečné v následujících scénářích:

• Když se na stejné stránce vykreslí několik komponent stejného typu.
• V aplikacích Blazor Server , kde více uživatelů současně používá stejnou komponentu.

V následujícím příkladu:

• Komponenta CallDotNetExample6 obsahuje několik ListItem komponent, což je sdílená komponenta ve složce aplikace Shared .
• Každá ListItem komponenta se skládá ze zprávy a tlačítka.
• ListItem Když je vybráno tlačítko komponenty, tato ListItemUpdateMessage metoda změní text položky seznamu a skryje tlačítko.

MessageUpdateInvokeHelper Následující třída udržuje metodu JS-invokable .NET, UpdateMessageCallerkterá vyvolá zadanou Action při vytvoření instance třídy. BlazorSample je název sestavení aplikace.

MessageUpdateInvokeHelper.cs:

using System;
using Microsoft.JSInterop;

public class MessageUpdateInvokeHelper
{
    private Action action;

    public MessageUpdateInvokeHelper(Action action)
    {
        this.action = action;
    }

    [JSInvokable("BlazorSample")]
    public void UpdateMessageCaller()
    {
        action.Invoke();
    }
}

updateMessageCallerJS Následující funkce vyvolá metodu UpdateMessageCaller .NET. BlazorSample je název sestavení aplikace.

Uvnitř koncové </body> značky wwwroot/index.html () nebo Pages/_Host.cshtml (Blazor WebAssemblyBlazor Server):

<script>
  window.updateMessageCaller = (dotNetHelper) => {
    dotNetHelper.invokeMethodAsync('BlazorSample', 'UpdateMessageCaller');
    dotNetHelper.dispose();
  }
</script>

Následující ListItem komponenta je sdílená komponenta, která se dá použít libovolný početkrát v nadřazené komponentě a vytvoří položky seznamu (<li>...</li>) pro seznam HTML (<ul>...</ul> nebo <ol>...</ol>). Každá ListItem instance komponenty vytvoří instanci MessageUpdateInvokeHelper s nastavenou metodou ActionUpdateMessage .

ListItem Když je vybráno tlačítko komponentyInteropCall, updateMessageCaller vyvolá se vytvořeným DotNetObjectReference pro MessageUpdateInvokeHelper instanci. To umožňuje rozhraní volat UpdateMessageCaller tuto ListItemMessageUpdateInvokeHelper instanci. Předaný DotNetObjectReference se vyhodí (JSdotNetHelper.dispose()).

Shared/ListItem.razor:

@inject IJSRuntime JS

<li>
    @message
    <button @onclick="InteropCall" style="display:@display">InteropCall</button>
</li>

@code {
    private string message = "Select one of these list item buttons.";
    private string display = "inline-block";
    private MessageUpdateInvokeHelper messageUpdateInvokeHelper;

    protected override void OnInitialized()
    {
        messageUpdateInvokeHelper = new MessageUpdateInvokeHelper(UpdateMessage);
    }

    protected async Task InteropCall()
    {
        await JS.InvokeVoidAsync("updateMessageCaller",
            DotNetObjectReference.Create(messageUpdateInvokeHelper));
    }

    private void UpdateMessage()
    {
        message = "UpdateMessage Called!";
        display = "none";
        StateHasChanged();
    }
}

StateHasChangedje volána k aktualizaci uživatelského rozhraní, když message je nastavena .UpdateMessage Pokud StateHasChanged není volána, nemá žádný způsob, jak zjistit, Blazor že by se uživatelské rozhraní mělo aktualizovat při Action vyvolání.

CallDotNetExample6 Následující nadřazená komponenta obsahuje čtyři položky seznamu, každou instanci ListItem komponenty.

Pages/CallDotNetExample6.razor:

@page "/call-dotnet-example-6"

<h1>Call .NET Example 6</h1>

<ul>
    <ListItem />
    <ListItem />
    <ListItem />
    <ListItem />
</ul>

Následující obrázek znázorňuje vykreslovanou CallDotNetExample6 nadřazenou komponentu po výběru druhého InteropCall tlačítka:

• Druhá ListItem komponenta zobrazila UpdateMessage Called! zprávu.
• Tlačítko InteropCall druhé ListItem komponenty není viditelné, protože vlastnost CSS display tlačítka je nastavena na none.

Umístění JavaScriptu

Načtěte kód JavaScriptu (JS) pomocí libovolného přístupu popsaného v článku přehleduJS spolupráce:

• Načtení skriptu ve značce <head> (obecně se nedoporučuje)
• Načtení skriptu ve značce <body>
• Načtení skriptu z externího souboru JS (.js)
• Vložení skriptu po spuštění architektury Blazor

Upozornění

Neumisťujte <script> značku do souboru komponenty (.razor), protože <script> značku nelze dynamicky aktualizovat.

Vyhněte se cyklovým odkazům na objekty.

Objekty, které obsahují cyklický odkaz, nelze serializovat v klientovi pro následující objekty:

• Volání metody .NET
• Volání metod JavaScriptu z jazyka C#, pokud má návratový typ cyklický odkaz.

Omezení velikosti pro volání z interoperability JavaScriptu

Tato část platí jenom pro Blazor Server aplikace. Architektura Blazor WebAssemblyneukládá omezení velikosti vstupů a výstupů z interoperability JavaScriptuJS.

Volání Blazor Serverinteropu jsou omezená velikostí maximální velikosti příchozích SignalR zpráv povolených pro metody centra, která se vynucuje HubOptions.MaximumReceiveMessageSize (výchozí hodnota: 32 kBJS). JS pro zprávy .NET SignalR větší, než MaximumReceiveMessageSize vyvolá chybu. Architektura neukládá omezení velikosti SignalR zprávy z centra na klienta.

Pokud SignalR protokolování není nastavené na Ladění nebo Trasování, zobrazí se chyba velikosti zprávy jenom v konzole vývojářských nástrojů prohlížeče:

Chyba: Připojení se odpojilo s chybou Chyba: Server vrátil chybu při zavření: Připojení se zavřelo s chybou.

Pokud SignalR je protokolování na straně serveru nastavené na Ladění nebo Trasování, protokolování na straně serveru zobrazí InvalidDataException chybu velikosti zprávy.

appsettings.Development.json:

{
  "DetailedErrors": true,
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information",
      "Microsoft.AspNetCore.SignalR": "Debug"
    }
  }
}

Chyba:

System.IO.InvalidDataException: Byla překročena maximální velikost zprávy 32768B. Velikost zprávy je možné nakonfigurovat v AddHubOptions.

Zvyšte limit nastavením MaximumReceiveMessageSize v Startup.ConfigureServices:

services.AddServerSideBlazor()
    .AddHubOptions(options => options.MaximumReceiveMessageSize = 64 * 1024);

Zvýšení limitu SignalR velikosti příchozích zpráv má náklady na vyžadování dalších prostředků serveru a zpřístupňuje server zvýšeným rizikům od škodlivého uživatele. Kromě toho může čtení velkého množství obsahu do paměti jako řetězce nebo bajtová pole způsobit také přidělení, která fungují špatně s uvolňováním paměti, což vede k dalším sankcím za výkon.

Jednou z možností čtení velkých datových částí je odeslat obsah v menších blocích a zpracovat datovou část jako Stream. To se dá použít při čtení velkých JSdatových částí ON nebo pokud jsou data k dispozici jako JS nezpracované bajty. Příklad, který ukazuje odesílání velkých binárních datových částí, Blazor Server které používají techniky podobné InputFile komponentě, najdete v ukázkové aplikaci Binary Submit.

Poznámka

Odkazy na dokumentaci k referenčnímu zdroji .NET obvykle načítají výchozí větev úložiště, která představuje aktuální vývoj pro příští verzi .NET. Pokud chcete vybrat značku pro konkrétní verzi, použijte rozevírací seznam pro přepnutí větví nebo značek. Další informace najdete v tématu Jak vybrat značku verze zdrojového kódu ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Při vývoji kódu, který přenáší velké množství dat mezi JS aplikacemi a Blazor v Blazor Server aplikacích, zvažte následující pokyny:

• Rozdělte data na menší části a posílejte datové segmenty postupně, dokud server neobdrží všechna data.
• Nepřidělujte velké objekty v kódu jazyka JS C#.
• Při odesílání nebo příjmu dat neblokujte hlavní vlákno uživatelského rozhraní po dlouhou dobu.
• Bezplatná spotřebovaná paměť při dokončení nebo zrušení procesu
• Vynucujte pro účely zabezpečení následující další požadavky:
  • Deklarujte maximální velikost souboru nebo dat, které lze předat.
  • Deklarujte minimální rychlost nahrávání z klienta na server.
• Po přijetí dat serverem můžou být tato data:
  • Dočasně uložená v vyrovnávací paměti, dokud se neshromáždí všechny segmenty.
  • Spotřebováno okamžitě. Data se například dají uložit okamžitě v databázi nebo zapisovat na disk při přijetí jednotlivých segmentů.

Další materiály

• Volání funkcí JavaScriptu z metod .NET v ASP.NET Core Blazor
• InteropComponent.razor example (dotnet/AspNetCore GitHub repository main branch): main Větev představuje aktuální vývoj produktové jednotky pro příští verzi ASP.NET Core. Pokud chcete vybrat větev pro jinou verzi (například release/5.0), pomocí rozevíracího seznamu Přepnout větve nebo značky vyberte větev.
• Interakce s modelem DOM (Document Object Model)
• Blazor Ukázky úložiště GitHub (dotnet/blazor-samples)

Informace o volání JS funkcí z .NET naleznete v tématu Volání javascriptových funkcí z metod .NET v ASP.NET Core Blazor.

Vyvolání statické metody .NET

Pokud chcete vyvolat statickou metodu .NET z JavaScriptu (JS), použijte JS funkce:

• DotNet.invokeMethodAsync (Doporučeno): Asynchronní pro Blazor Server aplikace i Blazor WebAssembly aplikace.
• DotNet.invokeMethod: Synchronní pouze pro Blazor WebAssembly aplikace.

Předejte název sestavení obsahující metodu, identifikátor statické metody .NET a všechny argumenty.

V následujícím příkladu:

• Zástupný {ASSEMBLY NAME} symbol je název sestavení aplikace.
• Zástupný {.NET METHOD ID} symbol je identifikátor metody .NET.
• Zástupný {ARGUMENTS} symbol je volitelný argument oddělený čárkami, které se mají předat metodě, z nichž každý musí být JSon-serializable.

DotNet.invokeMethodAsync('{ASSEMBLY NAME}', '{.NET METHOD ID}', {ARGUMENTS});

DotNet.invokeMethodAsyncJS Promise vrátí reprezentaci výsledku operace. DotNet.invokeMethod (Blazor WebAssembly pouze) vrátí výsledek operace.

Důležité

Asynchronní funkce (invokeMethodAsync) je upřednostňovaná před synchronní verzí (invokeMethod) a podporuje Blazor Server scénáře.

Metoda .NET musí být veřejná, statická a musí mít [JSInvokable] atribut.

V následujícím příkladu:

• Zástupný {<T>} symbol označuje návratový typ, který se vyžaduje jenom pro metody, které vracejí hodnotu.
• Zástupný {.NET METHOD ID} symbol je identifikátor metody.

@code {
    [JSInvokable]
    public static Task{<T>} {.NET METHOD ID}()
    {
        ...
    }
}

Poznámka

Volání otevřených obecných metod se nepodporuje se statickými metodami .NET, ale podporuje se s metodami instance. Další informace najdete v části Volání metod obecné třídy .NET .

V následující CallDotNetExample1 komponentě vrátí int metoda jazyka ReturnArrayAsync C# pole. Atribut[JSInvokable] se použije na metodu, která metodu vyvolá JS.

Pages/CallDotNetExample1.razor:

@page "/call-dotnet-example-1"

<h1>Call .NET Example 1</h1>

<p>
    <button onclick="returnArrayAsync()">
        Trigger .NET static method
    </button>
</p>

@code {
    [JSInvokable]
    public static Task<int[]> ReturnArrayAsync()
    {
        return Task.FromResult(new int[] { 1, 2, 3 });
    }
}

Atribut <button> HTML elementu onclick je přiřazení obslužné rutiny události JavaScriptu onclick pro zpracování click událostí, nikoli Blazoratribut direktivy @onclick . Funkce returnArrayAsyncJS se přiřadí jako obslužná rutina.

Následující returnArrayAsyncJS funkce volá metodu ReturnArrayAsync .NET předchozí CallDotNetExample1 komponenty a zaprotokoluje výsledek do konzoly nástrojů webového vývojáře prohlížeče. BlazorSample je název sestavení aplikace.

<script>
  window.returnArrayAsync = () => {
    DotNet.invokeMethodAsync('BlazorSample', 'ReturnArrayAsync')
      .then(data => {
        console.log(data);
      });
    };
</script>

Poznámka

Obecné pokyny k JS umístění a doporučení pro produkční aplikace najdete v tématu ASP.NET Core Blazor interoperabilita JavaScriptu (JSinterop)..

Trigger .NET static method Po výběru tlačítka zobrazí výstup konzoly vývojářských nástrojů prohlížeče data pole. Formát výstupu se mírně liší mezi prohlížeči. Následující výstup ukazuje formát, který používá Microsoft Edge:

Array(3) [ 1, 2, 3 ]

Ve výchozím nastavení je identifikátor metody .NET pro JS volání název metody .NET, ale pomocí konstruktoru [JSInvokable] atributů můžete zadat jiný identifikátor. V následujícím příkladu DifferentMethodName je přiřazený identifikátor metody pro metodu ReturnArrayAsync :

[JSInvokable("DifferentMethodName")]

Volání metody .NET v volání DotNet.invokeMethodAsync nebo DotNet.invokeMethod (Blazor WebAssemblypouze)DifferentMethodNameReturnArrayAsync

• DotNet.invokeMethodAsync('BlazorSample', 'DifferentMethodName');
• DotNet.invokeMethod('BlazorSample', 'DifferentMethodName'); (Blazor WebAssembly pouze)

Poznámka

Příklad ReturnArrayAsync metody v této části vrátí výsledek Task bez použití explicitního jazyka C# async a await klíčových slov. Metody kódování s typickými await metodamiasync, které používají await klíčové slovo k vrácení hodnoty asynchronních operací.

ReturnArrayAsync metoda složená s async klíčovými await slovy:

[JSInvokable]
public static async Task<int[]> ReturnArrayAsync()
{
    return await Task.FromResult(new int[] { 1, 2, 3 });
}

Další informace najdete v tématu Asynchronní programování s asynchronním programem a čekáním v průvodci jazykem C#.

Vyvolání metody .NET instance

Vyvolání metody .NET instance z JavaScriptu (JS):

• Předejte instanci .NET odkazem tak, že JS zabalíte instanci do DotNetObjectReference a zavoláte Create ji.
• Vyvolání metody instance .NET z JSinvokeMethodAsync použití nebo invokeMethod (Blazor WebAssembly pouze) z předaného DotNetObjectReference. Instanci .NET lze předat také jako argument při vyvolání jiných metod .NET z JS.
• Likvidujte DotNetObjectReference.

Následující části tohoto článku ukazují různé přístupy k vyvolání metody instance .NET:

• DotNetObjectReference Předání do jednotlivé funkce JavaScriptu
• DotNetObjectReference Předání třídy s více funkcemi JavaScriptu
• Volání metod obecné třídy .NET
• Příklady instancí třídy
• Pomocná třída metody .NET instance komponenty

DotNetObjectReference Předání do jednotlivé funkce JavaScriptu

Příklad v této části ukazuje, jak předat jednotlivou DotNetObjectReference funkci JavaScriptu (JS).

sayHello1JS Následující funkce přijímá DotNetObjectReference a volá invokeMethodAsync metodu GetHelloMessage .NET komponenty:

<script>
  window.sayHello1 = (dotNetHelper) => {
    return dotNetHelper.invokeMethodAsync('GetHelloMessage');
  };
</script>

Poznámka

Obecné pokyny k JS umístění a doporučení pro produkční aplikace najdete v tématu ASP.NET Core Blazor interoperabilita JavaScriptu (JSinterop)..

V předchozím příkladu je název dotNetHelper proměnné libovolný a lze ho změnit na libovolný upřednostňovaný název.

Pro následující CallDotNetExample2 komponentu:

• Komponenta má metodu JS-invokable .NET s názvem GetHelloMessage.
• Trigger .NET instance method Když je tlačítko vybráno, JS funkce sayHello1 se volá s klávesou DotNetObjectReference.
• sayHello1:
  • Zavolá GetHelloMessage a obdrží výsledek zprávy.
  • Vrátí výsledek zprávy volající TriggerDotNetInstanceMethod metodě.
• Vrácená zpráva od sayHello1 uživatele result se zobrazí.
• Aby nedošlo k úniku paměti a povolte uvolňování paměti, je v metodě odstraněn Dispose odkaz na objekt .NET vytvořenýDotNetObjectReference.

Pages/CallDotNetExample2.razor:

@page "/call-dotnet-example-2"
@implements IDisposable
@inject IJSRuntime JS

<h1>Call .NET Example 2</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string? name;
    private string? result;
    private DotNetObjectReference<CallDotNetExample2>? objRef;

    public async Task TriggerDotNetInstanceMethod()
    {
        objRef = DotNetObjectReference.Create(this);
        result = await JS.InvokeAsync<string>("sayHello1", objRef);
    }

    [JSInvokable]
    public string GetHelloMessage() => $"Hello, {name}!";

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

V předchozím příkladu je název dotNetHelper proměnné libovolný a lze ho změnit na libovolný upřednostňovaný název.

Předání argumentů metodě instance:

1. Přidejte parametry do vyvolání metody .NET. V následujícím příkladu se metodě předá název. Podle potřeby přidejte do seznamu další parametry.

   <script>
     window.sayHello2 = (dotNetHelper, name) => {
       return dotNetHelper.invokeMethodAsync('GetHelloMessage', name);
     };
   </script>
   

   V předchozím příkladu je název dotNetHelper proměnné libovolný a lze ho změnit na libovolný upřednostňovaný název.

2. Zadejte seznam parametrů metodě .NET.

   Pages/CallDotNetExample3.razor:

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

<h1>Call .NET Example 3</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string? name;
    private string? result;
    private DotNetObjectReference<CallDotNetExample3>? objRef;

    public async Task TriggerDotNetInstanceMethod()
    {
        objRef = DotNetObjectReference.Create(this);
        result = await JS.InvokeAsync<string>("sayHello2", objRef, name);
    }

    [JSInvokable]
    public string GetHelloMessage(string passedName) => $"Hello, {passedName}!";

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

V předchozím příkladu je název dotNetHelper proměnné libovolný a lze ho změnit na libovolný upřednostňovaný název.

DotNetObjectReference Předání třídy s více funkcemi JavaScriptu

Příklad v této části ukazuje, jak předat DotNetObjectReference třídu JavaScriptu (JS) s více funkcemi.

Vytvořte a předejte DotNetObjectReference metodu JSOnAfterRenderAsync životního cyklu do třídy pro více funkcí, které se mají použít. Ujistěte se, že kód .NET odstraní DotNetObjectReference, jak ukazuje následující příklad.

V následující CallDotNetExampleOneHelper komponentě Trigger JS function volá JS funkce tlačítek nastavením JSonclick vlastnosti, nikoliBlazor atributu direktivy @onclick .

Pages/CallDotNetExampleOneHelper.razor:

@page "/call-dotnet-example-one-helper"
@implements IDisposable
@inject IJSRuntime JS

<PageTitle>Call .NET Example</PageTitle>

<h1>Pass <code>DotNetObjectReference</code> to a JavaScript class</h1>

<p>
    <label>
        Message: <input @bind="name" />
    </label>
</p>

<p>
    <button onclick="GreetingHelpers.sayHello()">
        Trigger JS function <code>sayHello</code>
    </button>
</p>

<p>
    <button onclick="GreetingHelpers.welcomeVisitor()">
        Trigger JS function <code>welcomeVisitor</code>
    </button>
</p>

@code {
    private string? name;
    private DotNetObjectReference<CallDotNetExampleOneHelper>? dotNetHelper;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            dotNetHelper = DotNetObjectReference.Create(this);
            await JS.InvokeVoidAsync("GreetingHelpers.setDotNetHelper", 
                dotNetHelper);
        }
    }

    [JSInvokable]
    public string GetHelloMessage() => $"Hello, {name}!";

    [JSInvokable]
    public string GetWelcomeMessage() => $"Welcome, {name}!";

    public void Dispose()
    {
        dotNetHelper?.Dispose();
    }
}

V předchozím příkladu:

• JS je vložená IJSRuntime instance. IJSRuntime je registrován v Blazor rámci.
• Název dotNetHelper proměnné je libovolný a lze ho změnit na libovolný upřednostňovaný název.
• Komponenta musí explicitně likvidovat DotNetObjectReference povolení uvolňování paměti a zabránit úniku paměti.

<script>
  class GreetingHelpers {
    static dotNetHelper;

    static setDotNetHelper(value) {
      GreetingHelpers.dotNetHelper = value;
    }

    static async sayHello() {
      const msg = 
        await GreetingHelpers.dotNetHelper.invokeMethodAsync('GetHelloMessage');
      alert(`Message from .NET: "${msg}"`);
    }

    static async welcomeVisitor() {
      const msg = 
        await GreetingHelpers.dotNetHelper.invokeMethodAsync('GetWelcomeMessage');
      alert(`Message from .NET: "${msg}"`);
    }
  }

  window.GreetingHelpers = GreetingHelpers;
</script>

Poznámka

Obecné pokyny k JS umístění a doporučení pro produkční aplikace najdete v tématu ASP.NET Core Blazor interoperabilita JavaScriptu (JSinterop)..

V předchozím příkladu:

• Třída GreetingHelpers se přidá do objektu window , který globálně definuje třídu, která umožňuje Blazor vyhledat třídu pro JS interoperabilitu.
• Název dotNetHelper proměnné je libovolný a lze ho změnit na libovolný upřednostňovaný název.

Volání metod obecné třídy .NET

Funkce JavaScriptu (JS) můžou volat obecné metody třídy .NET , kde JS funkce volá metodu .NET obecné třídy.

V následující obecné třídě typu (GenericType<TValue>):

• Třída má parametr jednoho typu (TValue) s jednou obecnou Value vlastností.
• Třída má dvě ne generické metody označené atributem[JSInvokable], každý s parametrem obecného typu s názvem newValue:
  • Update synchronně aktualizuje hodnotu z ValuenewValue.
  • UpdateAsync asynchronně aktualizuje hodnotu Value od newValue po vytvoření očekávané úlohy, Task.Yield která asynchronně vrátí zpět do aktuálního kontextu při očekávání.
• Každá z metod třídy zapisuje typ TValue a hodnotu Value do konzoly. Zápis do konzoly je určen pouze pro demonstrační účely. Produkční aplikace se obvykle vyhýbají zápisu do konzoly ve prospěch protokolování aplikací. Další informace najdete v tématu ASP.NET Core Blazor protokolování a protokolování v .NET Core a ASP.NET Core.

Poznámka

Otevřené obecné typy a metody nezadávají typy pro zástupné symboly typů. Naopak zavřené obecné typy poskytují typy pro všechny zástupné symboly typů. Příklady v této části ukazují uzavřené obecné typy, ale vyvolání JS metod interop instance s otevřenými obecnými typy se podporuje. Použití otevřených obecných typů není podporováno pro vyvolání statické metody .NET, které byly popsány výše v tomto článku.

Další informace najdete v následujících článcích:

• Obecné třídy a metody (dokumentace k jazyku C#)
• Obecné třídy (Průvodce programováním v C#)
• Obecné typy v .NET (dokumentace k .NET)

GenericType.cs:

using Microsoft.JSInterop;

public class GenericType<TValue>
{
    public TValue? Value { get; set; }

    [JSInvokable]
    public void Update(TValue newValue)
    {
        Value = newValue;

        Console.WriteLine($"Update: GenericType<{typeof(TValue)}>: {Value}");
    }

    [JSInvokable]
    public async void UpdateAsync(TValue newValue)
    {
        await Task.Yield();
        Value = newValue;

        Console.WriteLine($"UpdateAsync: GenericType<{typeof(TValue)}>: {Value}");
    }
}

V následující invokeMethodsAsync funkci:

• Obecné typy třídy Update a UpdateAsync metody jsou volány s argumenty představující řetězce a čísla.
• Blazor WebAssembly aplikace podporují synchronní volání metod .NET s invokeMethod. syncInterop obdrží logickou hodnotu označující, jestli JS se v Blazor WebAssembly aplikaci vyskytuje interop. Kdy syncInterop je true, invokeMethod je bezpečně volána. Pokud je falsehodnota , syncInterop volá se pouze asynchronní funkceinvokeMethodAsync, protože JS interop se spouští v Blazor Server aplikaci.
• Pro demonstrační účely DotNetObjectReference se volání funkce ( nebo invokeMethodAsync), metoda .NET volá (invokeMethodUpdate nebo UpdateAsync) a argument se zapíše do konzoly. Argumenty používají náhodné číslo k povolení odpovídajícího JS volání metody .NET volání metody .NET (také zapsáno do konzoly na straně .NET). Produkční kód obvykle nenapisuje do konzoly, a to buď na klientovi, nebo na serveru. Produkční aplikace obvykle spoléhají na protokolování aplikací. Další informace najdete v tématu ASP.NET Core Blazor protokolování a protokolování v .NET Core a ASP.NET Core.

<script>
  const randomInt = () => Math.floor(Math.random() * 99999);

  window.invokeMethodsAsync = async (syncInterop, dotNetHelper1, dotNetHelper2) => {
    var n = randomInt();
    console.log(`JS: invokeMethodAsync:Update('string ${n}')`);
    await dotNetHelper1.invokeMethodAsync('Update', `string ${n}`);

    n = randomInt();
    console.log(`JS: invokeMethodAsync:UpdateAsync('string ${n}')`);
    await dotNetHelper1.invokeMethodAsync('UpdateAsync', `string ${n}`);

    if (syncInterop) {
      n = randomInt();
      console.log(`JS: invokeMethod:Update('string ${n}')`);
      dotNetHelper1.invokeMethod('Update', `string ${n}`);
    }

    n = randomInt();
    console.log(`JS: invokeMethodAsync:Update(${n})`);
    await dotNetHelper2.invokeMethodAsync('Update', n);

    n = randomInt();
    console.log(`JS: invokeMethodAsync:UpdateAsync(${n})`);
    await dotNetHelper2.invokeMethodAsync('UpdateAsync', n);

    if (syncInterop) {
      n = randomInt();
      console.log(`JS: invokeMethod:Update(${n})`);
      dotNetHelper2.invokeMethod('Update', n);
    }
  };
</script>

Poznámka

Obecné pokyny k JS umístění a doporučení pro produkční aplikace najdete v tématu ASP.NET Core Blazor interoperabilita JavaScriptu (JSinterop)..

V následující komponentě GenericsExample:

• Funkce JSinvokeMethodsAsync se volá při Invoke Interop výběru tlačítka.
• Vytvoří se pár DotNetObjectReference typů a předá JS funkci pro instance GenericType jako string a .int

Pages/GenericsExample.razor:

@page "/generics-example"
@using System.Runtime.InteropServices
@inject IJSRuntime JS

<p>
    <button @onclick="InvokeInterop">Invoke Interop</button>
</p>

<ul>
    <li>genericType1: @genericType1?.Value</li>
    <li>genericType2: @genericType2?.Value</li>
</ul>

@code {
    private GenericType<string> genericType1 = new() { Value = "string 0" };
    private GenericType<int> genericType2 = new() { Value = 0 };

    public async Task InvokeInterop()
    {
        var syncInterop = 
            RuntimeInformation.IsOSPlatform(OSPlatform.Create("BROWSER"));

        await JS.InvokeVoidAsync(
            "invokeMethodsAsync",
            syncInterop,
            DotNetObjectReference.Create(genericType1),
            DotNetObjectReference.Create(genericType2));
    }
}

V předchozím příkladu JS je vložená IJSRuntime instance. IJSRuntime je registrován v Blazor rámci.

Následující příklad ukazuje typický výstup předchozího příkladu, když Invoke Interop je tlačítko vybráno v Blazor WebAssembly aplikaci:

JS: invokeMethodAsync:Update('string 37802')
.NET: Aktualizace: GenericType<System.String>: řetězec 37802
JS: invokeMethodAsync:UpdateAsync('string 53051')
JS: invokeMethod:Update('string 26784')
.NET: Aktualizace: GenericType<System.String>: řetězec 26784
JS: invokeMethodAsync:Update(14107)
.NET: Aktualizace: GenericType<System.Int32>: 14107
JS: invokeMethodAsync:UpdateAsync(48995)
JS: invokeMethod:Update(12872)
.NET: Aktualizace: GenericType<System.Int32>: 12872
.NET: UpdateAsync: GenericType<System.String>: řetězec 53051
.NET: UpdateAsync: GenericType<System.Int32>: 48995

Pokud je předchozí příklad implementovaný v Blazor Server aplikaci, synchronní volání se invokeMethod vyhnete. Asynchronní funkce (invokeMethodAsync) je upřednostňovaná před synchronní verzí (invokeMethod) ve Blazor Server scénářích.

Typický výstup Blazor Server aplikace:

JS: invokeMethodAsync:Update('string 34809')
.NET: Aktualizace: GenericType<System.String>: řetězec 34809
JS: invokeMethodAsync:UpdateAsync('string 93059')
JS: invokeMethodAsync:Update(41997)
.NET: Aktualizace: GenericType<System.Int32>: 41997
JS: invokeMethodAsync:UpdateAsync(24652)
.NET: UpdateAsync: GenericType<System.String>: string 93059
.NET: UpdateAsync: GenericType<System.Int32>: 24652

Předchozí příklady výstupu ukazují, že asynchronní metody se provádějí a provádějí v libovolném pořadí v závislosti na několika faktorech, včetně plánování vláken a rychlosti provádění metody. Pro asynchronní volání metod není možné spolehlivě předpovědět pořadí dokončení.

Příklady instancí třídy

sayHello1JS Následující funkce:

• Volá metodu GetHelloMessage .NET na předané DotNetObjectReference.
• Vrátí zprávu od GetHelloMessage volajícího sayHello1 .

<script>
  window.sayHello1 = (dotNetHelper) => {
    return dotNetHelper.invokeMethodAsync('GetHelloMessage');
  };
</script>

Poznámka

Obecné pokyny k JS umístění a doporučení pro produkční aplikace najdete v tématu ASP.NET Core Blazor interoperabilita JavaScriptu (JSinterop)..

V předchozím příkladu je název dotNetHelper proměnné libovolný a lze ho změnit na libovolný upřednostňovaný název.

HelloHelper Následující třída má metodu JS-invokable .NET s názvem GetHelloMessage. Po HelloHelper vytvoření se název vlastnosti Name použije k vrácení zprávy z GetHelloMessage.

HelloHelper.cs:

using Microsoft.JSInterop;

public class HelloHelper
{
    public HelloHelper(string? name)
    {
        Name = name ?? "No Name";
    }

    public string? Name { get; set; }

    [JSInvokable]
    public string GetHelloMessage() => $"Hello, {Name}!";
}

Metoda CallHelloHelperGetHelloMessage v následující JsInteropClasses3 třídě vyvolá JS funkci sayHello1 s novou instancí HelloHelper.

JsInteropClasses3.cs:

using Microsoft.JSInterop;

public class JsInteropClasses3 : IDisposable
{
    private readonly IJSRuntime js;
    private DotNetObjectReference<HelloHelper>? objRef;

    public JsInteropClasses3(IJSRuntime js)
    {
        this.js = js;
    }

    public ValueTask<string> CallHelloHelperGetHelloMessage(string? name)
    {
        objRef = DotNetObjectReference.Create(new HelloHelper(name));

        return js.InvokeAsync<string>("sayHello1", objRef);
    }

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

V předchozím příkladu je název dotNetHelper proměnné libovolný a lze ho změnit na libovolný upřednostňovaný název.

Aby nedošlo k úniku paměti a povolte uvolňování paměti, je v metodě odstraněn Dispose odkaz na objekt .NET vytvořenýDotNetObjectReference.

Trigger .NET instance method Když je tlačítko vybráno v následující CallDotNetExample4 komponentě, JsInteropClasses3.CallHelloHelperGetHelloMessage je volána s hodnotou .name

Pages/CallDotNetExample4.razor:

@page "/call-dotnet-example-4"
@implements IDisposable
@inject IJSRuntime JS

<h1>Call .NET Example 4</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string? name;
    private string? result;
    private JsInteropClasses3? jsInteropClasses;

    private async Task TriggerDotNetInstanceMethod()
    {
        jsInteropClasses = new JsInteropClasses3(JS);
        result = await jsInteropClasses.CallHelloHelperGetHelloMessage(name);
    }

    public void Dispose()
    {
        jsInteropClasses?.Dispose();
    }
}

Následující obrázek znázorňuje vykreslovanou komponentu s názvem Amy Pond v Name poli. Po výběru Hello, Amy Pond! tlačítka se zobrazí v uživatelském rozhraní:

Předchozí vzor zobrazený ve JsInteropClasses3 třídě lze také implementovat zcela v komponentě.

Pages/CallDotNetExample5.razor:

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

<h1>Call .NET Example 5</h1>

<p>
    <label>
        Name: <input @bind="name" />
    </label>
</p>

<p>
    <button @onclick="TriggerDotNetInstanceMethod">
        Trigger .NET instance method
    </button>
</p>

<p>
    @result
</p>

@code {
    private string? name;
    private string? result;
    private DotNetObjectReference<HelloHelper>? objRef;

    public async Task TriggerDotNetInstanceMethod()
    {
        objRef = DotNetObjectReference.Create(new HelloHelper(name));
        result = await JS.InvokeAsync<string>("sayHello1", objRef);
    }

    public void Dispose()
    {
        objRef?.Dispose();
    }
}

V předchozím příkladu je název dotNetHelper proměnné libovolný a lze ho změnit na libovolný upřednostňovaný název.

Chcete-li zabránit úniku paměti a povolit uvolňování paměti, je v metodě odstraněn odkaz na objekt .NET vytvořený DotNetObjectReference metodou Dispose .

Výstup zobrazený komponentou CallDotNetExample5 je Hello, Amy Pond! při zadání názvu Amy Pond v Name poli.

V předchozí CallDotNetExample5 komponentě je odkaz na objekt .NET uvolněn. Pokud třída nebo komponenta neodhodí , vyřaďte DotNetObjectReferenceji z klienta voláním dispose předaného DotNetObjectReference:

window.jsFunction = (dotNetHelper) => {
  dotNetHelper.invokeMethodAsync('{ASSEMBLY NAME}', '{.NET METHOD ID}');
  dotNetHelper.dispose();
}

V předchozím příkladu:

• Název dotNetHelper proměnné je libovolný a lze ho změnit na libovolný upřednostňovaný název.
• Zástupný {ASSEMBLY NAME} symbol je název sestavení aplikace.
• Zástupný {.NET METHOD ID} symbol je identifikátor metody .NET.

Pomocná třída metody .NET instance komponenty

Pomocná třída může vyvolat metodu instance .NET jako Action. Pomocné třídy jsou užitečné v následujících scénářích:

• Když se na stejné stránce vykreslí několik komponent stejného typu.
• Blazor Server V aplikacích, kde více uživatelů současně používá stejnou komponentu.

V následujícím příkladu:

• Komponenta CallDotNetExample6 obsahuje několik ListItem komponent, což je sdílená komponenta ve složce aplikace Shared .
• Každá ListItem komponenta se skládá ze zprávy a tlačítka.
• ListItem Když je vybráno tlačítko komponenty, tato ListItemUpdateMessage metoda změní text položky seznamu a skryje tlačítko.

Následující MessageUpdateInvokeHelper třída udržuje metodu JS-invokable .NET, UpdateMessageCallerkterá vyvolá zadanou Action při vytvoření instance třídy. BlazorSample je název sestavení aplikace.

MessageUpdateInvokeHelper.cs:

using Microsoft.JSInterop;

public class MessageUpdateInvokeHelper
{
    private Action action;

    public MessageUpdateInvokeHelper(Action action)
    {
        this.action = action;
    }

    [JSInvokable("BlazorSample")]
    public void UpdateMessageCaller()
    {
        action.Invoke();
    }
}

Následující updateMessageCallerJS funkce vyvolá metodu UpdateMessageCaller .NET. BlazorSample je název sestavení aplikace.

<script>
  window.updateMessageCaller = (dotNetHelper) => {
    dotNetHelper.invokeMethodAsync('BlazorSample', 'UpdateMessageCaller');
    dotNetHelper.dispose();
  }
</script>

Poznámka

Obecné pokyny k JS umístění a našim doporučením pro produkční aplikace najdete v tématu ASP.NET Core Blazor interoperabilita JavaScriptu (JSinterop).

V předchozím příkladu je název dotNetHelper proměnné libovolný a lze ho změnit na libovolný upřednostňovaný název.

Následující ListItem komponenta je sdílená komponenta, která se dá použít libovolný početkrát v nadřazené komponentě a vytvoří položky seznamu (<li>...</li>) pro seznam HTML (<ul>...</ul> nebo <ol>...</ol>). Každá ListItem instance komponenty vytvoří instanci MessageUpdateInvokeHelper s nastavenou Action metodou UpdateMessage .

ListItem Když je vybráno tlačítko komponentyInteropCall, updateMessageCaller vyvolá se s vytvořenou DotNetObjectReferenceMessageUpdateInvokeHelper instancí. To umožňuje rozhraní volat UpdateMessageCaller tuto ListItemMessageUpdateInvokeHelper instanci. Předaný DotNetObjectReference se vyřadí (JSdotNetHelper.dispose()).

Shared/ListItem.razor:

@inject IJSRuntime JS

<li>
    @message
    <button @onclick="InteropCall" style="display:@display">InteropCall</button>
</li>

@code {
    private string message = "Select one of these list item buttons.";
    private string display = "inline-block";
    private MessageUpdateInvokeHelper? messageUpdateInvokeHelper;

    protected override void OnInitialized()
    {
        messageUpdateInvokeHelper = new MessageUpdateInvokeHelper(UpdateMessage);
    }

    protected async Task InteropCall()
    {
        if (messageUpdateInvokeHelper is not null)
        {
            await JS.InvokeVoidAsync("updateMessageCaller",
                DotNetObjectReference.Create(messageUpdateInvokeHelper));
        }
    }

    private void UpdateMessage()
    {
        message = "UpdateMessage Called!";
        display = "none";
        StateHasChanged();
    }
}

StateHasChanged je volána k aktualizaci uživatelského rozhraní, když message je nastavena UpdateMessage. Pokud StateHasChanged není volána, nemá žádný způsob, jak zjistit, Blazor že by se uživatelské rozhraní mělo aktualizovat při Action vyvolání.

Následující CallDotNetExample6 nadřazená komponenta obsahuje čtyři položky seznamu, každou instanci ListItem komponenty.

Pages/CallDotNetExample6.razor:

@page "/call-dotnet-example-6"

<h1>Call .NET Example 6</h1>

<ul>
    <ListItem />
    <ListItem />
    <ListItem />
    <ListItem />
</ul>

Následující obrázek znázorňuje vykreslovanou nadřazenou CallDotNetExample6 komponentu po výběru druhého InteropCall tlačítka:

• ListItem Druhá komponenta zobrazila UpdateMessage Called! zprávu.
• Tlačítko InteropCall druhé ListItem komponenty není viditelné, protože vlastnost CSS display tlačítka je nastavena na none.

Synchronní JS interoperabilita v Blazor WebAssembly aplikacích

Tato část platí jenom pro Blazor WebAssembly aplikace.

Volání zprostředkovatele komunikace JS jsou ve výchozím nastavení asynchronní, bez ohledu na to, jestli volaný kód je synchronní nebo asynchronní. Volání jsou ve výchozím nastavení asynchronní, aby se zajistilo, že komponenty jsou kompatibilní jak mezi modely hostování Blazor, tak Blazor Server a Blazor WebAssembly. U Blazor Servervšech JS volání zprostředkovatele komunikace musí být asynchronní, protože se odesílají přes síťové připojení.

Pokud víte, že vaše aplikace běží Blazor WebAssemblyjen někdy, můžete se rozhodnout provádět synchronní JS volání zprostředkovatele komunikace. To má trochu menší režii než provádění asynchronních volání a může vést k menšímu počtu cyklů vykreslování, protože při čekání na výsledky neexistuje žádný přechodný stav.

Pokud chcete v aplikacích provést synchronní volání z JavaScriptu na .NET Blazor WebAssembly , použijte DotNet.invokeMethod místo DotNet.invokeMethodAsync.

Synchronní volání fungují v následujících případech:

• Aplikace běží na Blazor WebAssembly, ne Blazor Server.
• Volaná funkce vrátí synchronně hodnotu. Funkce není metodou async a nevrací .NET Task ani JavaScript Promise.

Umístění JavaScriptu

Načtěte kód JavaScriptu (JS) pomocí některého z přístupů popsaných v článku přehleduJS zprostředkovatele komunikace:

• Načtení skriptu ve značce <head> (obecně se nedoporučuje)
• Načtení skriptu ve značce <body>
• Načtení skriptu z externího souboru JS (.js)
• Vložení skriptu po spuštění architektury Blazor

Informace o izolování skriptů v modulech najdete v JSčásti o izolaci JavaScriptu v modulech JavaScriptu.

Upozornění

Nevložte <script> značku do souboru komponenty (.razor), protože <script> značku nejde dynamicky aktualizovat.

Izolace JavaScriptu v modulech JavaScriptu

Blazor umožňuje izolaci JavaScriptu (JS) ve standardních modulech JavaScriptu (specifikace ECMAScript).

Izolace JS poskytuje následující výhody:

• Import JS už znečišťuje globální obor názvů.
• Uživatelé knihovny a komponent už nemusí importovat související JS.

Další informace najdete v tématu Volání funkcí JavaScriptu z metod .NET v ASP.NET Core Blazor.

Vyhněte se cyklických odkazům na objekty.

Objekty, které obsahují cyklické odkazy, nelze serializovat v klientovi pro jednu z těchto objektů:

• Volání metody .NET
• Volání javascriptové metody z jazyka C#, pokud má návratový typ cyklický odkaz.

Podpora pole bajtů

Blazor podporuje optimalizovanou bajtůovou matici JavaScriptu (JS), která brání kódování a dekódování bajtů do Base64. Následující příklad používá JS zprostředkovatele komunikace k předání bajtového pole do .NET.

sendByteArrayJS Zadejte funkci. Funkce se volá tlačítkem v komponentě a nevrací hodnotu:

<script>
  window.sendByteArray = () => {
    const data = new Uint8Array([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]);
    DotNet.invokeMethodAsync('BlazorSample', 'ReceiveByteArray', data)
      .then(str => {
        alert(str);
      });
  };
</script>

Poznámka

Obecné pokyny k JS umístění a našim doporučením pro produkční aplikace najdete v tématu ASP.NET Core Blazor interoperabilita JavaScriptu (JSinterop).

Pages/CallDotNetExample7.razor:

@page "/call-dotnet-example-7"
@using System.Text

<h1>Call .NET Example 7</h1>

<p>
    <button onclick="sendByteArray()">Send Bytes</button>
</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 {
    [JSInvokable]
    public static Task<string> ReceiveByteArray(byte[] receivedBytes)
    {
        return Task.FromResult(
            Encoding.UTF8.GetString(receivedBytes, 0, receivedBytes.Length));
    }
}

Informace o použití bajtového pole při volání JavaScriptu z .NET naleznete v tématu Volání funkcí JavaScriptu z metod .NET v ASP.NET Core Blazor.

Streamování z JavaScriptu do .NET

Blazor podporuje streamování dat přímo z JavaScriptu do .NET. Streamy se požadují pomocí Microsoft.JSInterop.IJSStreamReference rozhraní.

Microsoft.JSInterop.IJSStreamReference.OpenReadStreamAsyncStream vrátí a použije následující parametry:

• maxAllowedSize: Maximální počet bajtů povolených pro operaci čtení z JavaScriptu, což je výchozí hodnota 512 000 bajtů, pokud není zadána.
• cancellationToken: A CancellationToken pro zrušení čtení.

V JavaScriptu:

function streamToDotNet() {
  return new Uint8Array(10000000);
}

V kódu jazyka C#:

var dataReference = 
    await JS.InvokeAsync<IJSStreamReference>("streamToDotNet");
using var dataReferenceStream = 
    await dataReference.OpenReadStreamAsync(maxAllowedSize: 10_000_000);

var outputPath = Path.Combine(Path.GetTempPath(), "file.txt");
using var outputFileStream = File.OpenWrite(outputPath);
await dataReferenceStream.CopyToAsync(outputFileStream);

V předchozím příkladu:

• JS je injektovaná IJSRuntime instance. IJSRuntime je registrován v Blazor rámci.
• Zapisuje dataReferenceStream se na disk (file.txt) v cestě k dočasné složce aktuálního uživatele (GetTempPath).

Volání funkcí JavaScriptu z metod .NET v ASP.NET Core Blazor pokrývá zpětnou operaci, streamování z .NET do JavaScriptu pomocí DotNetStreamReference.

Blazor ASP.NET Core nahrávání souborů popisuje, jak nahrát soubor do Blazorsouboru .

Omezení velikosti u volání interoperability JavaScriptu

Tato část platí jenom pro Blazor Server aplikace. V Blazor WebAssemblyarchitektuře se neomezuje velikost vstupů a výstupů interoperability JavaScriptuJS.

Volání Blazor Serverzprostředkovatele komunikace jsou omezená velikostí maximální velikosti příchozích SignalR zpráv povolených pro metody centra, která se vynucuje HubOptions.MaximumReceiveMessageSize (výchozí hodnota: 32 kBJS). JS zprávy .NET SignalR větší než MaximumReceiveMessageSize vyvolá chybu. Architektura neukládá omezení velikosti SignalR zprávy z centra na klienta.

Pokud SignalR protokolování není nastavené na Ladění nebo Trasování, zobrazí se chyba velikosti zprávy pouze v konzole vývojářských nástrojů prohlížeče:

Chyba: Připojení se odpojilo s chybou Chyba: Server vrátil chybu při zavření: Připojení se zavřelo s chybou.

Pokud SignalR je protokolování na straně serveru nastavené na Ladění nebo Trasování, protokolování na straně serveru zobrazí InvalidDataException chybu velikosti zprávy.

appsettings.Development.json:

{
  "DetailedErrors": true,
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information",
      "Microsoft.AspNetCore.SignalR": "Debug"
    }
  }
}

Chyba:

System.IO.InvalidDataException: Byla překročena maximální velikost zprávy 32768B. Velikost zprávy je možné nakonfigurovat v AddHubOptions.

Zvyšte limit nastavením MaximumReceiveMessageSize v Program.cs. Následující příklad nastaví maximální velikost zprávy příjmu na 64 kB (64 * 1024):

builder.Services.AddServerSideBlazor()
    .AddHubOptions(options => options.MaximumReceiveMessageSize = 64 * 1024);

Zvýšení limitu SignalR velikosti příchozích zpráv má náklady na vyžadování dalších prostředků serveru a zpřístupňuje server zvýšeným rizikům od škodlivého uživatele. Kromě toho může čtení velkého množství obsahu do paměti jako řetězce nebo bajtová pole způsobit také přidělení, která fungují špatně s uvolňováním paměti, což vede k dalším sankcím za výkon.

Při vývoji kódu, který přenáší velké množství dat mezi JS aplikacemi a Blazor v Blazor Server aplikacích, zvažte následující pokyny:

• Využijte nativní podporu komunikace streamování k přenosu dat větších než SignalR limit velikosti příchozích zpráv:
  • Volání funkcí JavaScriptu z metod .NET v ASP.NET Core Blazor
  • Volání metod .NET z funkcí JavaScriptu v ASP.NET Core Blazor
• Obecné tipy:
  • Nepřidělujte velké objekty v kódu jazyka JS C#.
  • Bezplatná spotřebovaná paměť při dokončení nebo zrušení procesu
  • Vynucujte pro účely zabezpečení následující další požadavky:
    • Deklarujte maximální velikost souboru nebo dat, které lze předat.
    • Deklarujte minimální rychlost nahrávání z klienta na server.
  • Po přijetí dat serverem můžou být tato data:
    • Dočasně uložená v vyrovnávací paměti, dokud se neshromáždí všechny segmenty.
    • Spotřebováno okamžitě. Data se například dají uložit okamžitě v databázi nebo zapisovat na disk při přijetí jednotlivých segmentů.

Další materiály

• Volání funkcí JavaScriptu z metod .NET v ASP.NET Core Blazor
• InteropComponent.razor example (dotnet/AspNetCore GitHub repository main branch): main Větev představuje aktuální vývoj produktové jednotky pro příští verzi ASP.NET Core. Pokud chcete vybrat větev pro jinou verzi (například release/5.0), pomocí rozevíracího seznamu Přepnout větve nebo značky vyberte větev.
• Interakce s modelem DOM (Document Object Model)
• Blazor Ukázky úložiště GitHub (dotnet/blazor-samples)