ASP.NET Core'daki JavaScript işlevlerinden .NET yöntemlerini çağırma Blazor

Bu makalede JavaScript'ten (JS) .NET yöntemlerini çağırma açıklanmaktadır.

.NET'ten JS JavaScript işlevlerinin nasıl çağrılacağı hakkında bilgi için bkz. ASP.NET Core'da .NET yöntemlerinden JavaScript işlevlerini çağırmaBlazor.

Statik bir .NET yöntemi çağırma

JavaScript()JS uygulamasından statik bir .NET yöntemi çağırmak için şu işlevleri kullanın JS :

• DotNet.invokeMethodAsync (önerilen): Sunucu tarafı ve istemci tarafı bileşenler için eşzamansız.
• DotNet.invokeMethod: Yalnızca istemci tarafı bileşenleri için eşzamanlı.

Yöntemi içeren derlemenin adını, statik .NET yönteminin tanımlayıcısını ve tüm bağımsız değişkenleri geçirin.

Aşağıdaki örnekte:

• Yer {PACKAGE ID/ASSEMBLY NAME} tutucu, bir uygulamanın kitaplık veya derleme adı için projenin paket kimliğidir (<PackageId> proje dosyasında).
• {.NET METHOD ID} yer tutucusu, .NET yöntem tanımlayıcısıdır.
• {ARGUMENTS} yer tutucusu, yönteme geçirilecek, virgülle ayrılmış isteğe bağlı bağımsız değişkenleri ifade eder; bunların her biri JSON olarak serileştirilebilir olmalıdır.

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

DotNet.invokeMethodAsync işlemin sonucunu temsil eden bir JS Promise döndürür. DotNet.invokeMethod (istemci tarafı bileşenleri) işlemin sonucunu döndürür.

Important

Sunucu tarafı bileşenler için, eşzamanlı sürüm (invokeMethod) yerine eşzamansız fonksiyonu (invokeMethodAsync) öneririz.

.NET yöntemi genel, statik ve özniteliğine [JSInvokable]sahip olmalıdır.

Aşağıdaki örnekte:

• {<T>} yer tutucusu, yalnızca bir değer döndüren yöntemler için gerekli olan geri dönüş türünü gösterir.
• {.NET METHOD ID} yer tutucusu, yöntem tanımlayıcısıdır.

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

Note

Açık genel yöntemlerin çağrılması statik .NET yöntemleriyle desteklenmez, ancak örnek yöntemleriyle desteklenir. Daha fazla bilgi için .NET genel sınıf yöntemlerini çağırma bölümüne bakın.

Aşağıdaki bileşende ReturnArrayAsync C# yöntemi bir int dizi döndürür. [JSInvokable] özniteliği yönteme uygulanır; bu da yöntemin JS tarafından çağrılabilmesini sağlar.

CallDotnet1.razor:

@page "/call-dotnet-1"
@implements IAsyncDisposable
@inject IJSRuntime JS

<PageTitle>Call .NET 1</PageTitle>

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

<p>
    <button id="btn">Trigger .NET static method</button>
</p>

<p>
    See the result in the developer tools console.
</p>

@code {
    private IJSObjectReference? module;

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

            await module.InvokeVoidAsync("addHandlers");
        }
    }

    [JSInvokable]
    public static Task<int[]> ReturnArrayAsync() =>
        Task.FromResult(new int[] { 11, 12, 13 });

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

CallDotnet1.razor.js:

export function returnArrayAsync() {
  DotNet.invokeMethodAsync('BlazorSample', 'ReturnArrayAsync')
    .then(data => {
      console.log(data);
    });
}

export function addHandlers() {
  const btn = document.getElementById("btn");
  btn.addEventListener("click", returnArrayAsync);
}

addHandlers JS işlevi düğmeye bir click olay ekler. returnArrayAsync JS İşlev işleyici olarak atanır.

returnArrayAsync JS işlevi, sonucu tarayıcının ReturnArrayAsync web geliştirici araçları konsoluna kaydeden bileşenin .NET yöntemini çağırır. BlazorSample uygulamanın derleme adıdır.

Note

JS konumu hakkında genel yönergeler ve üretim uygulamalarına yönelik önerilerimiz için bkz. ASP.NET Core Blazor uygulamalarında JavaScript konumu.

Trigger .NET static method Düğme seçildiğinde, tarayıcının geliştirici araçları konsol çıkışı dizi verilerini görüntüler. Çıkışın biçimi tarayıcılar arasında biraz farklılık gösterir. Aşağıdaki çıkışta Microsoft Edge tarafından kullanılan biçim gösterilmektedir:

Array(3) [ 11, 12, 13 ]

invokeMethodAsync işlevini çağırırken, verileri bağımsız değişkenler olarak geçirerek bir .NET yöntemine aktarın.

.NET'e veri geçirmeyi göstermek için, JS içinde çağrılan ReturnArrayAsync yöntemine bir başlangıç konumu geçirin:

export function returnArrayAsync() {
  DotNet.invokeMethodAsync('BlazorSample', 'ReturnArrayAsync', 14)
    .then(data => {
      console.log(data);
    });
}

Bileşenin çağrılabilen ReturnArrayAsync yöntemi başlangıç konumunu alır ve diziyi ondan oluşturur. Dizi, konsola yazdırılmak üzere döndürülür:

[JSInvokable]
public static Task<int[]> ReturnArrayAsync(int startPosition) => 
    Task.FromResult(Enumerable.Range(startPosition, 3).ToArray());

Uygulama yeniden derlenip tarayıcı yenilendikten sonra, düğme seçildiğinde tarayıcının konsolunda aşağıdaki çıkış görüntülenir:

Array(3) [ 14, 15, 16 ]

JS çağrısı için .NET yöntem tanımlayıcısı, .NET yöntem adıdır; ancak [JSInvokable] özniteliği oluşturucusunu kullanarak farklı bir tanımlayıcı belirtebilirsiniz. Aşağıdaki örnekte, DifferentMethodName yöntemi için atanan yöntem tanımlayıcısı verilmiştir ReturnArrayAsync :

[JSInvokable("DifferentMethodName")]

DotNet.invokeMethodAsync (sunucu tarafı veya istemci tarafı bileşenleri) ya da DotNet.invokeMethod (yalnızca istemci tarafı bileşenleri) çağrısında, ReturnArrayAsync .NET yöntemini yürütmek için DifferentMethodName çağrısı yapın:

• DotNet.invokeMethodAsync('BlazorSample', 'DifferentMethodName');
• DotNet.invokeMethod('BlazorSample', 'DifferentMethodName'); (yalnızca istemci tarafı bileşenleri)

Note

Bu bölümdeki ReturnArrayAsync yöntem örneği, açık C# async ve await anahtar sözcüklerini kullanmadan bir Task sonucunu döndürür. ile asyncawait kodlama yöntemleri, zaman uyumsuz işlemlerin değerini döndürmek için anahtar sözcüğünü await kullanan yöntemlerin tipik bir örneğidir.

async ve await anahtar sözcükleriyle oluşturulmuş ReturnArrayAsync yöntemi:

[JSInvokable]
public static async Task<int[]> ReturnArrayAsync() => 
    await Task.FromResult(new int[] { 11, 12, 13 });

Daha fazla bilgi için C# kılavuzundaki Async ve await ile zaman uyumsuz programlama başlıklı konuya bakın.

.NET'e geçirmek için JavaScript nesnesi ve veri başvuruları oluşturma

.NET'e geçirilebilmesi için bir JS nesne başvurusu oluşturmak üzere DotNet.createJSObjectReference(jsObject) çağrısı yapın; burada jsObject, JS nesne başvurusunu oluşturmak için kullanılan JS Object'tir. Aşağıdaki örnek, serileştirilemeyen window nesnesine bir başvuruyu .NET'e geçirir; .NET de bunu ReceiveWindowObject C# yönteminde bir IJSObjectReference olarak alır:

DotNet.invokeMethodAsync('{PACKAGE ID/ASSEMBLY NAME}', 'ReceiveWindowObject', 
  DotNet.createJSObjectReference(window));

[JSInvokable]
public static void ReceiveWindowObject(IJSObjectReference objRef)
{
    ...
}

Yukarıdaki örnekte yer tutucu, {PACKAGE ID/ASSEMBLY NAME} bir uygulamanın kitaplık veya derleme adı için projenin paket kimliğidir (<PackageId> proje dosyasında).

Note

Yukarıdaki örnekte, JS içinde window nesnesine yönelik bir başvuru tutulmadığından JSObjectReference öğesinin temizlenmesi gerekmez.

Bir JSObjectReference başvurusunu saklamak, istemcide JS bellek sızıntısını önlemek için bunun serbest bırakılmasını gerektirir. Aşağıdaki örnek, önceki kodu JSObjectReference başvurusunu alacak şekilde yeniden düzenler; ardından bu başvuruyu serbest bırakmak için DotNet.disposeJSObjectReference() çağrısı yapar:

var jsObjectReference = DotNet.createJSObjectReference(window);

DotNet.invokeMethodAsync('{PACKAGE ID/ASSEMBLY NAME}', 'ReceiveWindowObject', jsObjectReference);

DotNet.disposeJSObjectReference(jsObjectReference);

Yukarıdaki örnekte yer tutucu, {PACKAGE ID/ASSEMBLY NAME} bir uygulamanın kitaplık veya derleme adı için projenin paket kimliğidir (<PackageId> proje dosyasında).

JS akış başvurusu oluşturmak için DotNet.createJSStreamReference(streamReference) çağrısı yapın; böylece bu başvuru .NET'e geçirilebilir. Burada streamReference, JS akış başvurusunu oluşturmak için kullanılan bir ArrayBuffer, Blob veya Uint8Array ya da Float32Array gibi herhangi bir türlendirilmiş dizidir.

Örnek .NET yöntemini çağırma

JavaScript'ten bir örnek .NET yöntemi çağırmak için (JS):

• .NET örneğini, onu bir DotNetObjectReference içinde sarmalayıp üzerinde Create çağırarak, JS öğesine başvuru olarak geçirin.

• Geçirilen DotNetObjectReference içinden, invokeMethodAsync kullanarak (önerilen) veya invokeMethod ile (yalnızca istemci tarafı bileşenlerde) JS üzerinden bir .NET örnek metodunu çağırın. .NET örnek yönteminin tanımlayıcısını ve varsa bağımsız değişkenleri geçirin. .NET örneği, JS içinden diğer .NET yöntemleri çağrılırken argüman olarak da geçirilebilir.

  Aşağıdaki örnekte:

  • dotNetHelper bir DotNetObjectReference' dir.
  • {.NET METHOD ID} yer tutucusu, .NET yöntem tanımlayıcısıdır.
  • {ARGUMENTS} yer tutucusu, yönteme geçirilecek, virgülle ayrılmış isteğe bağlı bağımsız değişkenleri ifade eder; bunların her biri JSON olarak serileştirilebilir olmalıdır.

  dotNetHelper.invokeMethodAsync('{.NET METHOD ID}', {ARGUMENTS});
  

  Note

  invokeMethodAsync ve invokeMethod bir örnek yöntemini çağırırken derleme adı parametresini kabul etmeyin.

  invokeMethodAsync işlemin sonucunu temsil eden bir JS Promise döndürür. invokeMethod (yalnızca istemci tarafı bileşenleri) işlemin sonucunu döndürür.

  Important

  Sunucu tarafı bileşenler için, eşzamanlı sürüm (invokeMethod) yerine eşzamansız fonksiyonu (invokeMethodAsync) öneririz.

• DotNetObjectReference öğesini atın.

Bu makalenin aşağıdaki bölümlerinde bir örnek .NET yöntemini çağırmaya yönelik çeşitli yaklaşımlar gösterilmektedir:

• Bir DotNetObjectReference öğesini tek bir JavaScript işlevine iletme
• Bir DotNetObjectReference öğesini, birden çok JavaScript fonksiyonu olan bir sınıfa geçirme
• .NET genel sınıf yöntemlerini çağırma
• Sınıf örneği örnekleri
• Bileşen örneği .NET yöntemi yardımcı sınıfı

JavaScript tarafından çağrılabilen .NET yöntemlerini kırpmaktan kaçının

Bu bölüm, önceden derleme (AOT) derlemesi ve çalışma zamanı yeniden bağlantısının etkinleştirildiği istemci tarafı uygulamaları için geçerlidir.

Aşağıdaki bölümlerdeki örneklerin bazıları, özniteliğiyle [JSInvokable] işaretlenmiş JavaScript tarafından çağrılabilen .NET yönteminin bileşen olmayan Razor bir sınıfın üyesi olduğu sınıf örneği yaklaşımını temel alır. Bu tür .NET yöntemleri bir Razor bileşende yer aldığında, çalışma zamanı yeniden bağlama/kırpmasından korunurlar. .NET yöntemlerini Razor bileşenlerinin dışındaki kırpmaya karşı korumak için, aşağıdaki örnekte gösterildiği gibi, yöntemleri sınıfın oluşturucusuna DynamicDependency özniteliğini uygulayarak gerçekleştirin:

using System.Diagnostics.CodeAnalysis;
using Microsoft.JSInterop;

public class ExampleClass {

    [DynamicDependency(nameof(ExampleJSInvokableMethod))]
    public ExampleClass()
    {
    }

    [JSInvokable]
    public string ExampleJSInvokableMethod()
    {
        ...
    }
}

Daha fazla bilgi için bkz. .NET kitaplıklarını kırpmaya hazırlama: DynamicDependency.

Bir DotNetObjectReference öğesini ayrı bir JavaScript işlevine iletme

Bu bölümdeki örnekte, tek bir DotNetObjectReference JavaScript (JS) işlevine nasıl geçiş yapılacağını gösterilmektedir.

Aşağıdaki sayHello1JS işlevi, bir DotNetObjectReference alır ve bir bileşenin GetHelloMessage .NET yöntemini çağırmak için invokeMethodAsync'ü çağırır:

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

Note

JS konumu hakkında genel yönergeler ve üretim uygulamalarına yönelik önerilerimiz için bkz. ASP.NET Core Blazor uygulamalarında JavaScript konumu.

Yukarıdaki örnekte değişken adı dotNetHelper rastgeledir ve tercih edilen herhangi bir adla değiştirilebilir.

Aşağıdaki bileşen için:

• Bileşenin, GetHelloMessage adlı JS çağrılabilir .NET yöntemi vardır.
• Trigger .NET instance method düğmesi seçildiğinde, JSsayHello1 fonksiyonu DotNetObjectReference ile çağrılır.
• sayHello1:
  • GetHelloMessage çağrısı yapar ve ileti sonucunu alır.
  • çağrı TriggerDotNetInstanceMethod yöntemine ileti sonucunu döndürür.
• 'den sayHello1result döndürülen ileti kullanıcıya görüntülenir.
• Bellek sızıntısını önlemek ve çöp toplamaya izin vermek için, DotNetObjectReference tarafından oluşturulan .NET nesne başvurusu Dispose yönteminde bertaraf edilir.

CallDotnet2.razor:

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

<PageTitle>Call .NET 2</PageTitle>

<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<CallDotnet2>? objRef;

    protected override void OnInitialized() =>
        objRef = DotNetObjectReference.Create(this);

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

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

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

Yukarıdaki örnekte değişken adı dotNetHelper rastgeledir ve tercih edilen herhangi bir adla değiştirilebilir.

Argümanları bir örnek metoduna geçirmek için aşağıdaki yönergeleri kullanın:

.NET yöntemi çağırmasına parametreler ekleyin. Aşağıdaki örnekte yöntemine bir ad geçirilir. Gerektiğinde listeye ek parametreler ekleyin.

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

Yukarıdaki örnekte değişken adı dotNetHelper rastgeledir ve tercih edilen herhangi bir adla değiştirilebilir.

.NET yöntemine parametre listesini sağlayın.

CallDotnet3.razor:

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

<PageTitle>Call .NET 3</PageTitle>

<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<CallDotnet3>? objRef;

    protected override void OnInitialized() => 
        objRef = DotNetObjectReference.Create(this);

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

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

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

Yukarıdaki örnekte değişken adı dotNetHelper rastgeledir ve tercih edilen herhangi bir adla değiştirilebilir.

DotNetObjectReference öğesini birden çok JavaScript işlevine sahip bir sınıfa geçirin

Bu bölümdeki örnekte, birden çok işleve sahip bir DotNetObjectReference JavaScript (JS) sınıfına nasıl geçiş yapılacağını gösterilmektedir.

Bir DotNetObjectReference oluşturup birden çok işlev tarafından kullanılmak üzere OnAfterRenderAsync yaşam döngüsü yönteminden bir JS sınıfına geçirin. Aşağıdaki örnekte gösterildiği gibi, .NET kodunun DotNetObjectReference nesnesini bertaraf ettiğinden emin olun.

Aşağıdaki bileşende, Trigger JS function düğmeleri, JSonclick özelliğini ayarlayarak JS işlevlerini çağırır; Blazor'in @onclick yönerge özniteliğiyle değil.

CallDotNetExampleOneHelper.razor:

@page "/call-dotnet-example-one-helper"
@implements IAsyncDisposable
@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 id="sayHelloBtn">
        Trigger JS function <code>sayHello</code>
    </button>
</p>

<p>
    <button id="welcomeVisitorBtn">
        Trigger JS function <code>welcomeVisitor</code>
    </button>
</p>

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

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

            dotNetHelper = DotNetObjectReference.Create(this);
            await module.InvokeVoidAsync("GreetingHelpers.setDotNetHelper", 
                dotNetHelper);

            await module.InvokeVoidAsync("addHandlers");
        }
    }

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

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

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

        dotNetHelper?.Dispose();
    }
}

Yukarıdaki örnekte:

• JS eklenen IJSRuntime bir örnektir. IJSRuntime, Blazor çerçevesi tarafından kaydedilir.
• Değişken adı dotNetHelper rastgeledir ve tercih edilen herhangi bir adla değiştirilebilir.
• Bileşen, çöp toplamaya izin vermek ve bellek sızıntısını önlemek için DotNetObjectReference öğesini açıkça serbest bırakmalıdır.
• Blazor'in SignalR devresinin kaybolması durumunda, JSDisconnectedException modülün bertarafı sırasında sıkışıp kalır. Önceki kod bir Blazor WebAssembly uygulamasında kullanılıyorsa, kaybedilecek bir SignalR bağlantısı yoktur; bu nedenle try-catch bloğunu kaldırabilir ve modülü serbest bırakan satırı (await module.DisposeAsync();) bırakabilirsiniz. Daha fazla bilgi için bkz. ASP.NET Core Blazor JavaScript birlikte çalışabilirliği (JSbirlikte çalışma).

CallDotNetExampleOneHelper.razor.js:

export 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}"`);
  }
}

export function addHandlers() {
  const sayHelloBtn = document.getElementById("sayHelloBtn");
  sayHelloBtn.addEventListener("click", GreetingHelpers.sayHello);

  const welcomeVisitorBtn = document.getElementById("welcomeVisitorBtn");
  welcomeVisitorBtn.addEventListener("click", GreetingHelpers.welcomeVisitor);
}

Yukarıdaki örnekte değişken adı dotNetHelper rastgeledir ve tercih edilen herhangi bir adla değiştirilebilir.

Note

JS konumu hakkında genel yönergeler ve üretim uygulamalarına yönelik önerilerimiz için bkz. ASP.NET Core Blazor uygulamalarında JavaScript konumu.

.NET genel sınıf yöntemlerini çağırma

JavaScript (JS) fonksiyonları, .NET jenerik sınıf yöntemlerini çağırabilir; burada bir JS fonksiyonu, jenerik bir sınıfın .NET yöntemini çağırır.

Aşağıdaki genel tür sınıfında (GenericType<TValue>):

• Bu sınıfın, tek bir generic Value özelliğine sahip tek bir tür parametresi (TValue) vardır.
• sınıfında özniteliğiyle [JSInvokable]işaretlenmiş iki genel olmayan yöntem vardır ve her biri adlı newValuegenel tür parametresine sahiptir:
  • Update, Value değerini newValue üzerinden eşzamanlı olarak günceller.
  • UpdateAsynczaman uyumsuz olarak beklenen bir görev Value oluşturduktan sonra değerinin değerini newValueTask.Yield, beklenen zaman uyumsuz olarak geçerli bağlama geri döndürecek şekilde güncelleştirir.
• Sınıf yöntemlerinin her biri, TValue öğesinin türünü ve Value öğesinin değerini konsola yazar. Konsola yazmak yalnızca gösterim amaçlıdır. Üretim uygulamaları genellikle konsola yazmak yerine uygulama günlüklemesini tercih eder. Daha fazla bilgi için bkz. ASP.NET Core Blazor günlüğü ve .NET ve ASP.NET Core'da günlüğe kaydetme.

Note

Açık genel türler ve yöntemler , tür yer tutucuları için türleri belirtmez. Buna karşılık, kapalı genel türler tüm tür yer tutucuları için tür sağlar. Bu bölümdeki örnekler kapalı genel türleri göstermektedir, ancak açık genel türlerle JS birlikte çalışma örnek yöntemlerini çağırmak desteklenir. Bu makalenin önceki bölümlerinde açıklanan statik .NET yöntemi çağrıları için açık genel türlerin kullanılması desteklenmez.

Daha fazla bilgi için aşağıdaki makaleleri inceleyin:

• Genel sınıflar ve yöntemler (C# belgeleri)
• Genel Sınıflar (C# Programlama Kılavuzu)
• .NET'teki genel değerler (.NET belgeleri)

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 Task UpdateAsync(TValue newValue)
    {
        await Task.Yield();
        Value = newValue;

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

Aşağıdaki invokeMethodsAsync işlevde:

• Genel tür sınıfının Update ve UpdateAsync yöntemleri, dizeleri ve sayıları temsil eden bağımsız değişkenlerle çağrılır.
• İstemci tarafı bileşenleri, .NET yöntemlerinin invokeMethod ile eşzamanlı olarak çağrılmasını destekler. syncInterop , JS birlikte çalışma işleminin istemcide gerçekleşip gerçekleşmediğini belirten bir boole değeri alır. syncInterop, true olduğunda, invokeMethod güvenle çağrılır. syncInterop değerinin false olması durumunda, JS birlikte çalışabilirliği sunucu tarafı bir bileşende yürütüldüğünden yalnızca zaman uyumsuz invokeMethodAsync işlevi çağrılır.
• Gösterim amacıyla, DotNetObjectReference işlev çağrısı (invokeMethod veya invokeMethodAsync), (Update veya UpdateAsync) adlı .NET yöntemi ve bağımsız değişken konsola yazılır. Argümanlar, JS işlev çağrısının .NET yöntem çağrısıyla eşleştirilmesini sağlamak için rastgele bir sayı kullanır (bu sayı .NET tarafında da konsola yazdırılır). Üretim kodu genellikle istemcide veya sunucuda konsola yazmaz. Üretim uygulamaları genellikle uygulama günlüğü kaydına güvenir. Daha fazla bilgi için bkz. ASP.NET Core Blazor günlüğü ve .NET ve ASP.NET Core'da günlüğe kaydetme.

<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>

Note

JS konumu hakkında genel yönergeler ve üretim uygulamalarına yönelik önerilerimiz için bkz. ASP.NET Core Blazor uygulamalarında JavaScript konumu.

Aşağıdaki GenericsExample bileşeninde:

• Invoke Interop düğmesi seçildiğinde, JS işlevi invokeMethodsAsync çağrılır.
• Bir çift DotNetObjectReference türü oluşturulur ve GenericType örnekleri için, bir string ve bir int olarak JS işlevine aktarılır.

GenericsExample.razor:

@page "/generics-example"
@implements IDisposable
@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 };
    private DotNetObjectReference<GenericType<string>>? objRef1;
    private DotNetObjectReference<GenericType<int>>? objRef2;

    protected override void OnInitialized()
    {
        objRef1 = DotNetObjectReference.Create(genericType1);
        objRef2 = DotNetObjectReference.Create(genericType2);
    }

    public async Task InvokeInterop()
    {
        var syncInterop = OperatingSystem.IsBrowser();

        await JS.InvokeVoidAsync(
            "invokeMethodsAsync", syncInterop, objRef1, objRef2);
    }

    public void Dispose()
    {
        objRef1?.Dispose();
        objRef2?.Dispose();
    }
}

Yukarıdaki örnekte, JS eklenen IJSRuntime bir örnektir. IJSRuntime, Blazor çerçevesi tarafından kaydedilir.

Aşağıda, istemci tarafındaki bir bileşende Invoke Interop düğmesi seçildiğinde önceki örneğin tipik çıktısı gösterilmektedir:

JS: invokeMethodAsync:Update('string 37802')
.NET: Güncelleme: GenericType<System.String>: string 37802
JS: invokeMethodAsync:UpdateAsync('string 53051')
JS: invokeMethod:Update('string 26784')
.NET: Güncelleme: GenericType<System.String>: string 26784
JS: invokeMethodAsync:Update(14107)
.NET: Güncelleme: GenericType<System.Int32>: 14107
JS: invokeMethodAsync:UpdateAsync(48995)
JS: invokeMethod:Update(12872)
.NET: Güncelleme: GenericType<System.Int32>: 12872
.NET: UpdateAsync: GenericType<System.String>: string 53051
.NET: UpdateAsync: GenericType<System.Int32>: 48995

Önceki örnek bir sunucu tarafı bileşeninde uygulanırsa, invokeMethod ile yapılan eşzamanlı çağrılardan kaçınılır. Sunucu tarafı bileşenler için, eşzamanlı sürüm (invokeMethod) yerine eşzamansız fonksiyonu (invokeMethodAsync) öneririz.

Sunucu tarafı bileşeninin tipik çıkışı:

JS: invokeMethodAsync:Update('string 34809')
.NET: Güncelleştirme: GenericType<System.String>: dize 34809
JS: invokeMethodAsync:UpdateAsync('string 93059')
JS: invokeMethodAsync:Update(41997)
.NET: Güncelleme: GenericType<System.Int32>: 41997
JS: invokeMethodAsync:UpdateAsync(24652)
.NET: UpdateAsync: GenericType<System.String>: string 93059
.NET: UpdateAsync: GenericType<System.Int32>: 24652

Yukarıdaki çıkış örnekleri, zaman uyumsuz yöntemlerin iş parçacığı zamanlama ve yöntem yürütme hızı gibi çeşitli faktörlere bağlı olarak rastgele bir sırada yürütüldüğünü ve tamamlandığını gösterir. Zaman uyumsuz yöntem çağrıları için tamamlanma sırasını güvenilir bir şekilde tahmin etmek mümkün değildir.

Sınıf örneği örnekleri

Aşağıdaki sayHello1JS işlev:

• İletilen DotNetObjectReference üzerinde GetHelloMessage .NET yöntemini çağırır.
• GetHelloMessage öğesinden gelen iletiyi sayHello1 çağıranına döndürür.

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

Note

JS konumu hakkında genel yönergeler ve üretim uygulamalarına yönelik önerilerimiz için bkz. ASP.NET Core Blazor uygulamalarında JavaScript konumu.

Yukarıdaki örnekte değişken adı dotNetHelper rastgeledir ve tercih edilen herhangi bir adla değiştirilebilir.

Aşağıdaki HelloHelper sınıfında, GetHelloMessage adlı, JS tarafından çağrılabilir bir .NET yöntemi vardır. HelloHelper oluşturulduğunda, GetHelloMessage içinden bir ileti döndürmek için Name özelliğindeki ad kullanılır.

HelloHelper.cs:

using Microsoft.JSInterop;

namespace BlazorSample;

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

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

Aşağıdaki JsInteropClasses3 sınıfındaki CallHelloHelperGetHelloMessage yöntemi, HelloHelper’ün yeni bir örneğiyle JS işlevini sayHello1 çağırır.

JsInteropClasses3.cs:

using Microsoft.JSInterop;

namespace BlazorSample;

public class JsInteropClasses3(IJSRuntime js)
{
    private readonly IJSRuntime js = js;

    public async ValueTask<string> CallHelloHelperGetHelloMessage(string? name)
    {
        using var objRef = DotNetObjectReference.Create(new HelloHelper(name));
        return await js.InvokeAsync<string>("sayHello1", objRef);
    }
}

Bellek sızıntısını önlemek ve çöp toplamanın gerçekleşmesine olanak tanımak için, DotNetObjectReference tarafından oluşturulan .NET nesne başvurusu, nesne başvurusu using var söz dizimiyle kapsam dışına çıktığında dispose edilir.

Aşağıdaki bileşende Trigger .NET instance method düğmesi seçildiğinde, JsInteropClasses3.CallHelloHelperGetHelloMessagename değeriyle çağrılır.

CallDotnet4.razor:

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

<PageTitle>Call .NET 4</PageTitle>

<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;

    protected override void OnInitialized() => 
        jsInteropClasses = new JsInteropClasses3(JS);

    private async Task TriggerDotNetInstanceMethod()
    {
        if (jsInteropClasses is not null)
        {
            result = await jsInteropClasses.CallHelloHelperGetHelloMessage(name);
        }
    }
}

Aşağıdaki görüntü, Name alanında adı Amy Pond olan işlenen bileşeni göstermektedir. Düğme seçildikten sonra, kullanıcı arayüzünde Hello, Amy Pond! görüntülenir:

JsInteropClasses3 sınıfında gösterilen önceki desen de tamamen bir bileşen içinde uygulanabilir.

CallDotnet5.razor:

@page "/call-dotnet-5"
@inject IJSRuntime JS

<PageTitle>Call .NET 5</PageTitle>

<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;

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

Bellek sızıntısını önlemek ve çöp toplamanın gerçekleşmesine olanak tanımak için, DotNetObjectReference tarafından oluşturulan .NET nesne başvurusu, nesne başvurusu using var söz dizimiyle kapsam dışına çıktığında dispose edilir.

Bileşen tarafından görüntülenen çıktı, Amy Pond adı name alanına girildiğinde Hello, Amy Pond! olur.

Önceki bileşende .NET nesne başvurusu serbest bırakılır. Bir sınıf veya bileşen DotNetObjectReference öğesini serbest bırakmazsa, geçirilen DotNetObjectReference üzerinde dispose çağrısı yaparak bunu istemci tarafından serbest bırakın:

window.{JS FUNCTION NAME} = (dotNetHelper) => {
  dotNetHelper.invokeMethodAsync('{.NET METHOD ID}');
  dotNetHelper.dispose();
}

Yukarıdaki örnekte:

• {JS FUNCTION NAME} yer tutucu, JS işlevinin adıdır.
• Değişken adı dotNetHelper rastgeledir ve tercih edilen herhangi bir adla değiştirilebilir.
• {.NET METHOD ID} yer tutucusu, .NET yöntem tanımlayıcısıdır.

Bileşen örneği .NET yöntemi yardımcı sınıfı

Yardımcı sınıf bir .NET örnek yöntemini olarak Actionçağırabilir. Yardımcı sınıfları, statik .NET yöntemlerinin kullanılamadığı senaryolarda kullanışlıdır:

• Aynı türde birkaç bileşen aynı sayfada görüntülendiğinde.
• Aynı bileşeni aynı anda kullanan birden çok kullanıcı içeren sunucu tarafı uygulamalarda.

Aşağıdaki örnekte:

• Bileşen çeşitli ListItem1 bileşenler içerir.
• Her ListItem1 bileşen bir ileti ve bir düğmeden oluşur.
• Bir ListItem1 bileşen düğmesi seçildiğinde, bu ListItem1UpdateMessage yöntem liste öğesi metnini değiştirir ve düğmeyi gizler.

Aşağıdaki MessageUpdateInvokeHelper sınıfı, sınıf örneği oluşturulduğunda belirtilen Action öğesini çağırmak için JS tarafından çağrılabilen .NET yöntemi UpdateMessageCaller öğesini barındırır.

MessageUpdateInvokeHelper.cs:

using Microsoft.JSInterop;

namespace BlazorSample;

public class MessageUpdateInvokeHelper(Action action)
{
    private readonly Action action = action;

    [JSInvokable]
    public void UpdateMessageCaller() => action.Invoke();
}

Aşağıdaki updateMessageCallerJS işlev .NET yöntemini çağırır UpdateMessageCaller .

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

Note

JS konumu hakkında genel yönergeler ve üretim uygulamalarına yönelik önerilerimiz için bkz. ASP.NET Core Blazor uygulamalarında JavaScript konumu.

Yukarıdaki örnekte değişken adı dotNetHelper rastgeledir ve tercih edilen herhangi bir adla değiştirilebilir.

Aşağıdaki ListItem1 bileşen, bir üst bileşende birkaç kez kullanılabilen ve bir HTML listesi ( veya <li>...</li>) için liste öğeleri (<ul>...</ul><ol>...</ol>) oluşturan paylaşılan bir bileşendir. Her ListItem1 bileşen örneği, UpdateMessage yöntemine ayarlanmış bir Action ile bir MessageUpdateInvokeHelper örneği oluşturur.

Bir ListItem1 bileşeninin InteropCall düğmesi seçildiğinde, MessageUpdateInvokeHelper örneği için oluşturulan DotNetObjectReference ile updateMessageCaller çağrılır. Bu, çerçevenin söz konusu ListItem1 öğesinin MessageUpdateInvokeHelper örneği üzerinde UpdateMessageCaller çağırmasına izin verir. Geçirilen DotNetObjectReference, JS (dotNetHelper.dispose()) içinde bertaraf edilir.

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

UpdateMessage içinde message ayarlandığında, kullanıcı arabirimini güncellemek için StateHasChanged çağrılır. StateHasChanged çağrılmazsa, BlazorAction çağrıldığında kullanıcı arayüzünün güncellenmesi gerektiğini bilmesinin hiçbir yolu yoktur.

Aşağıdaki üst bileşen, her biri ListItem1 bileşeninin bir örneği olan dört liste öğesi içerir.

CallDotnet6.razor:

@page "/call-dotnet-6"

<PageTitle>Call .NET 6</PageTitle>

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

<ul>
    <ListItem1 />
    <ListItem1 />
    <ListItem1 />
    <ListItem1 />
</ul>

Aşağıdaki görüntü, ikinci InteropCall düğmesi seçildikten sonra oluşturulan üst bileşeni göstermektedir:

• İkinci ListItem1 bileşen UpdateMessage Called! iletisini görüntüledi.
• İkinci ListItem1 bileşeninin InteropCall düğmesi görünmüyor, çünkü düğmenin CSS display özelliği none olarak ayarlanmış.

Bir öğe özelliğine atanan, DotNetObjectReference içinden çağrılan bileşen örneği .NET yöntemi

bir DotNetObjectReference HTML öğesinin özelliğine atanma, bileşen örneğinde .NET yöntemlerinin çağrılmalarına izin verir:

• Bir öğe referansı yakalanır (ElementReference).
• Bileşenin OnAfterRender{Async} yönteminde, öğe başvurusu ve bileşen örneği olarak bir JSJavaScript (DotNetObjectReference) işlevi çağrılır. JS işlevi, DotNetObjectReference öğesini bir özellikteki öğeye ekler.
• JS içinde bir öğe olayı çağrıldığında (örneğin, onclick), öğenin ekli DotNetObjectReference'si bir .NET yöntemini çağırmak için kullanılır.

Bileşen örneği .NET yöntemi yardımcı sınıfı bölümünde açıklanan yaklaşıma benzer şekilde, bu yaklaşım statik .NET yöntemlerinin kullanılamadığı senaryolarda kullanışlıdır:

• Aynı türde birkaç bileşen aynı sayfada görüntülendiğinde.
• Aynı bileşeni aynı anda kullanan birden çok kullanıcı içeren sunucu tarafı uygulamalarda.
• .NET yöntemi, bir JS olayından (örneğin, onclick) çağrılır; bir Blazor olayından (örneğin, @onclick) değil.

Aşağıdaki örnekte:

• Bileşen, paylaşılan bir bileşen olan çeşitli ListItem2 bileşenler içerir.
• Her bir ListItem2 bileşeni, bir liste öğesi iletisi <span> ve görüntüleme için inline-block olarak ayarlanmış bir display CSS özelliğine sahip ikinci bir <span> öğesinden oluşur.
• Bir ListItem2 bileşen listesindeki öğe seçildiğinde, bu ListItem2'nin UpdateMessage yöntemi ilk <span> içindeki liste öğesi metnini değiştirir ve display özelliğini none olarak ayarlayarak ikinci <span>'ü gizler.

Aşağıdaki assignDotNetHelperJS işlevi, DotNetObjectReference öğesini dotNetHelper adlı bir özelliğe atar. Aşağıdaki interopCallJS işlevi, geçirilen öğe için DotNetObjectReference kullanarak UpdateMessage adlı bir .NET yöntemini çağırır.

ListItem2.razor.js:

export function assignDotNetHelper(element, dotNetHelper) {
  element.dotNetHelper = dotNetHelper;
}

export async function interopCall(element) {
  await element.dotNetHelper.invokeMethodAsync('UpdateMessage');
}

Note

JS konumu hakkında genel yönergeler ve üretim uygulamalarına yönelik önerilerimiz için bkz. ASP.NET Core Blazor uygulamalarında JavaScript konumu.

Yukarıdaki örnekte değişken adı dotNetHelper rastgeledir ve tercih edilen herhangi bir adla değiştirilebilir.

Aşağıdaki ListItem2 bileşen, bir üst bileşende birkaç kez kullanılabilen ve bir HTML listesi ( veya <li>...</li>) için liste öğeleri (<ul>...</ul><ol>...</ol>) oluşturan paylaşılan bir bileşendir.

Her ListItem2 bileşen örneği, OnAfterRenderAsync içindeki assignDotNetHelperJS işlevini bir öğe başvurusu (liste öğesinin ilk <span> öğesi) ve DotNetObjectReference olarak bileşen örneği ile çağırır.

Bir ListItem2 bileşeninin iletisi <span> seçildiğinde, <span> öğesi bir parametre olarak geçirilerek (this) interopCall çağrılır; bu da UpdateMessage .NET yöntemini çağırır. UpdateMessage içinde, message ayarlandığında ve ikinci <span> öğesinin display özelliği güncellendiğinde kullanıcı arabirimini güncellemek için StateHasChanged çağrılır. Çağrılmazsa StateHasChanged , Blazor yöntem çağrıldığında kullanıcı arabiriminin güncelleştirilmesi gerektiğini bilmenin hiçbir yolu yoktur.

Bileşen kaldırıldığında DotNetObjectReference da kaldırılır.

ListItem2.razor:

@inject IJSRuntime JS
@implements IAsyncDisposable

<li>
    <span style="font-weight:bold;color:@color" @ref="elementRef"
        @onclick="CallJSToInvokeDotnet">
        @message
    </span>
    <span style="display:@display">
        Not Updated Yet!
    </span>
</li>

@code {
    private IJSObjectReference? module;
    private DotNetObjectReference<ListItem2>? objRef;
    private ElementReference elementRef;
    private string display = "inline-block";
    private string message = "Select one of these list items.";
    private string color = "initial";

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

            objRef = DotNetObjectReference.Create(this);
            await module.InvokeVoidAsync("assignDotNetHelper", elementRef, objRef);
        }
    }

    public async Task CallJSToInvokeDotnet()
    {
        if (module is not null)
        {
            await module.InvokeVoidAsync("interopCall", elementRef);
        }
    }

    [JSInvokable]
    public void UpdateMessage()
    {
        message = "UpdateMessage Called!";
        display = "none";
        color = "MediumSeaGreen";
        StateHasChanged();
    }

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

        objRef?.Dispose();
    }
}

Aşağıdaki üst bileşen, her biri ListItem2 bileşeninin bir örneği olan dört liste öğesi içerir.

CallDotnet7.razor:

@page "/call-dotnet-7"

<PageTitle>Call .NET 7</PageTitle>

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

<ul>
    <ListItem2 />
    <ListItem2 />
    <ListItem2 />
    <ListItem2 />
</ul>

İstemci tarafı bileşenlerinde eşzamanlı JS birlikte çalışabilirlik

Bu bölüm yalnızca istemci tarafı bileşenleri için geçerlidir.

JS birlikte çalışabilirlik çağrıları, çağrılan kodun eşzamanlı veya eşzamansız olup olmamasından bağımsız olarak eşzamansızdır. Çağrılar, bileşenlerin sunucu tarafı ve istemci tarafı işleme modları arasında uyumlu olduğundan emin olmak için zaman uyumsuz olarak yapılır. Sunucuda, tüm JS birlikte çalışabilirlik çağrıları, ağ bağlantısı üzerinden gönderildikleri için eşzamansız olmalıdır.

Bileşeninizin yalnızca WebAssembly üzerinde çalıştığını kesin olarak biliyorsanız, eşzamanlı JS birlikte çalışma çağrıları yapmayı seçebilirsiniz. Bu, zaman uyumsuz çağrılar yapmaktan biraz daha az ek yük oluşturur ve sonuçlar beklenirken ara bir durum olmadığından daha az yeniden işleme döngüsüne yol açabilir.

İstemci tarafı bileşeninde JavaScript'ten .NET'e eşzamanlı bir çağrı yapmak için DotNet.invokeMethodAsync yerine DotNet.invokeMethod kullanın.

Zaman uyumlu çağrılar şu durumlarda çalışır:

• Bileşen yalnızca WebAssembly'de yürütülmeye yönelik olarak işlenir.
• Çağrılan işlev zaman uyumlu olarak bir değer döndürür. İşlev bir async yöntem değildir ve .NET Task veya JavaScript Promisedöndürmez.

JavaScript konumu

JavaScript konumu hakkındaki makalede açıklanan yaklaşımlardan herhangi birini kullanarak JavaScriptJS kodunu yükleyin:

• <head> işaretlemesinde komut dosyası yükleme (Genel olarak önerilmez)
• <body> biçimlendirmesi içinde bir betiği yükleyin
• Bileşenle aynı konumda yer alan dış JavaScript dosyasından (.js) betik yükleme
• Dış JavaScript dosyasından (.js) betik yükleme
• Başlamadan önce veya sonra Blazor betik ekleme

JS öğesini yüklemek için JS modüllerinin kullanımı, bu makaledeki JavaScript modüllerinde JavaScript yalıtımı bölümünde açıklanmaktadır.

Warning

Etiket dinamik olarak güncelleştirilemediğinden, yalnızca bileşenin statik sunucu tarafı işlemeyi (statik SSR) benimsemesi garanti edilirse bir bileşen dosyasına (<script>) etiket yerleştirin.razor.<script>

JavaScript modüllerinde JavaScript yalıtımı

Blazor, standart JavaScript modüllerinde JavaScript (JS) yalıtımı sağlar (ECMAScript belirtimi). JavaScript modülü yükleme işlemi, diğer web uygulaması türleriyle aynı şekilde Blazor çalışır ve modüllerin uygulamanızda nasıl tanımlandığını özelleştirebilirsiniz. JavaScript modüllerini kullanma kılavuzu için bkz . MDN Web Belgeleri: JavaScript modülleri.

JS yalıtımı aşağıdaki avantajları sağlar:

• İçeri aktarılan JS artık genel ad alanını kirletmez.
• Kitaplık ve bileşenlerin kullanıcılarının ilgili JS'yi içeri aktarması gerekmez.

Daha fazla bilgi için bkz. ASP.NET Core Blazor'da .NET yöntemlerinden JavaScript işlevlerini çağırma.

işleciyle import() dinamik içeri aktarma, ASP.NET Core ve Blazorile desteklenir:

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

Önceki örnekte, {CONDITION} yer tutucusu, modülün yüklenip yüklenmemesi gerektiğini belirlemek için kullanılan koşullu bir denetimi temsil eder.

Tarayıcı uyumluluğu için bkz . Kullanabilir miyim: JavaScript modülleri: dinamik içeri aktarma.

Döngüsel nesne başvurularından kaçının

Döngüsel başvurular içeren nesneler, aşağıdakilerden hiçbiri için istemci tarafında seri hale getirilemez:

• .NET yöntemi çağrıları.
• Dönüş türü döngüsel başvurulara sahip olduğunda JavaScript yöntemi C# dilinden çağrılar.

Bayt dizisi desteği

Blazor, bayt dizilerini Base64'e kodlayıp Base64'ten çözmeyi önleyen, en iyi duruma getirilmiş bayt dizisi JavaScript (JS) birlikte çalışabilirliğini destekler. Aşağıdaki örnek, .NET'e bir bayt dizisi geçirmek için JS birlikte çalışabilirliğini kullanır.

Bir sendByteArrayJS işlev sağlayın. İşlev, bileşendeki bir düğme tarafından çağrıda invokeMethodAsync derleme adı parametresini içeren statik olarak çağrılır ve bir değer döndürmez:

CallDotnet8.razor.js:

export function 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, 0x61, 0x69, 0x6e, 0x2e, 0x20, 0x4e,
    0x6f, 0x74, 0x20, 0x74, 0x6f, 0x20, 0x66, 0x72, 0x65, 0x74, 0x2e]);
  DotNet.invokeMethodAsync('BlazorSample', 'ReceiveByteArray', data)
    .then(str => {
      alert(str);
    });
}

export function addHandlers() {
  const btn = document.getElementById("btn");
  btn.addEventListener("click", sendByteArray);
}

Note

JS konumu hakkında genel yönergeler ve üretim uygulamalarına yönelik önerilerimiz için bkz. ASP.NET Core Blazor uygulamalarında JavaScript konumu.

CallDotnet8.razor:

@page "/call-dotnet-8"
@using System.Text
@implements IAsyncDisposable
@inject IJSRuntime JS

<PageTitle>Call .NET 8</PageTitle>

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

<p>
    <button id="btn">Send Bytes</button>
</p>

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

@code {
    private IJSObjectReference? module;

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

            await module.InvokeVoidAsync("addHandlers");
        }
    }

    [JSInvokable]
    public static Task<string> ReceiveByteArray(byte[] receivedBytes) => 
        Task.FromResult(Encoding.UTF8.GetString(receivedBytes, 0, 
            receivedBytes.Length));

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

.NET'ten JavaScript çağırırken bayt dizisi kullanma hakkında bilgi için bkz . ASP.NET Core'da Blazor.NET yöntemlerinden JavaScript işlevlerini çağırma.

JavaScript'ten .NET'e akış

Blazor doğrudan JavaScript'ten .NET'e veri akışını destekler. Akışlar, Microsoft.JSInterop.IJSStreamReference arabirimi aracılığıyla istenir.

Microsoft.JSInterop.IJSStreamReference.OpenReadStreamAsync ve Stream döndürür ve aşağıdaki parametreleri kullanır:

• maxAllowedSize: JavaScript'ten okuma işlemi için izin verilen bayt sayısı üst sınırı; belirtilmezse varsayılan olarak 512.000 bayt olur.
• cancellationToken: Okuma işlemini iptal etme için A CancellationToken .

JavaScript'te:

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

C# kodunda:

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);

Yukarıdaki örnekte:

• JS eklenen IJSRuntime bir örnektir. IJSRuntime, Blazor çerçevesi tarafından kaydedilir.
• dataReferenceStream, geçerli kullanıcının geçici klasör yolunda (file.txt) diske (GetTempPath) yazılır.

ASP.NET Core'da .NET yöntemlerinden JavaScript işlevlerini çağırma Blazor, DotNetStreamReference kullanarak .NET'ten JavaScript'e akışla ters işlemi ele alır.

ASP.NET Core Blazor dosya yüklemeleri, Blazor içinde dosya yüklemenin nasıl yapılacağını ele alır. Sunucu tarafı bileşeninde <textarea> verilerini akış olarak ileten bir form örneği için bkz. ASP.NET Core Blazor formlarında sorun giderme.

JavaScript [JSImport]/[JSExport] birlikte çalışma

Bu bölüm istemci tarafı bileşenleri için geçerlidir.

Blazor'in, IJSRuntime arabirimine dayalı JS birlikte çalışma mekanizmasını kullanarak istemci tarafı bileşenlerde JavaScript ile (JS) etkileşim kurmaya alternatif olarak, .NET 7 veya sonraki sürümleri hedefleyen uygulamalar için JS[JSImport]/[JSExport] birlikte çalışma API'si kullanılabilir.

Daha fazla bilgi için bkz.: ASP.NET Core ile JavaScript JSImport/JSExport birlikte çalışabilirliği Blazor.

JavaScript birlikte çalışma nesnesi başvurularının elden çıkarılması

JavaScript (JS) birlikte çalışabilirlik makaleleri boyunca verilen örnekler, tipik nesne temizleme örüntülerini gösterir:

• Bu makalede açıklandığı gibi, JS içinden .NET çağırırken, .NET bellek sızıntısını önlemek için oluşturulan DotNetObjectReference öğesini .NET tarafından veya JS tarafından dispose edin.

• ASP.NET Core'daki .NET yöntemlerinden JavaScript işlevlerini çağırma Blazor bölümünde açıklandığı gibi, .NET'ten JS çağrılırken, JS belleğinde sızıntı oluşmasını önlemek için oluşturulan tüm IJSObjectReference/IJSInProcessObjectReference/JSObjectReference öğelerini .NET'ten veya JS tarafından elden çıkarın.

JS birlikte çalışabilirlik nesne başvuruları, başvuruyu oluşturan JS birlikte çalışabilirlik çağrısının tarafında bir tanımlayıcıyla anahtarlanan bir eşleme olarak uygulanır. Nesne atma işlemi .NET'ten veya JS taraftan başlatıldığında, Blazor girdiyi eşlemeden kaldırır ve nesneye başka güçlü bir başvuru olmadığı sürece nesne çöp olarak toplanabilir.

En azından, .NET tarafından yönetilen bellekte bellek sızıntısını önlemek için .NET tarafında oluşturulan nesneleri her zaman bertaraf edin.

Bileşenin kaldırılması sırasında DOM temizleme görevleri

Daha fazla bilgi için bkz. ASP.NET Core Blazor JavaScript birlikte çalışabilirliği (JSbirlikte çalışma).

Devre olmadan JavaScript birlikte çalışma çağrıları

Daha fazla bilgi için bkz. ASP.NET Core Blazor JavaScript birlikte çalışabilirliği (JSbirlikte çalışma).

Ek kaynaklar

• ASP.NET Core Blazor'da .NET yöntemlerinden JavaScript işlevlerini çağırma
• InteropComponent.razor example (dotnet/AspNetCore GitHub depo main dalı): Dal, main ürün biriminin ASP.NET Core'un bir sonraki sürümü için geçerli geliştirmesini temsil eder. Farklı bir sürüm için dal seçmek üzere (örneğin, release/{VERSION}, burada {VERSION} yer tutucusu sürüm numarasını temsil eder), dalı seçmek için Dalları veya etiketleri değiştir açılır listesini kullanın. Artık mevcut olmayan bir dal için, API'yi bulmak için Etiketler sekmesini kullanın (örneğin, v7.0.0).
• DOM ile etkileşim
• Blazor örnekler GitHub deposu (dotnet/blazor-samples) (nasıl indirilir)
• ASP.NET Core Blazor uygulamalarındaki hataları işleme (JavaScript birlikte çalışma bölümü)
• Tehdit azaltma: Tarayıcıdan çağrılan .NET yöntemleri