ASP.NET Core ile JavaScript [JSImport]/[JSExport] birlikte çalışma Blazor

Bu makalede, .NET 7 veya üzerini benimseyen uygulamalar için yayımlanan JavaScript () birlikte çalışma API'sini kullanarak istemci tarafı bileşenlerinde JavaScriptJS (JS) [JSImport]/[JSExport] ile nasıl etkileşim kurulacakları açıklanmaktadır.

Blazor arabirimine göre kendi JS birlikte çalışma mekanizmasını IJSRuntime sağlar. Blazor'nin JS birlikte çalışma özelliği, işleme modları ve uygulamalar için Blazor Hybrid tekdüzen olarak desteklenirBlazor. IJSRuntimeayrıca kitaplık yazarlarının ekosistem genelinde Blazor paylaşım için birlikte çalışma kitaplıkları oluşturmasına JS olanak tanır ve içinde Blazorbirlikte çalışma için JS önerilen yaklaşım olmaya devam eder. Aşağıdaki makalelere bakın:

• ASP.NET Core Blazor'da .NET yöntemlerinden JavaScript işlevlerini çağırma
• ASP.NET Core Blazor'da JavaScript işlevlerinden .NET yöntemlerini çağırma

Bu makalede, WebAssembly'de yürütülen istemci tarafı bileşenlerine özgü alternatif JS bir birlikte çalışma yaklaşımı açıklanmaktadır. Bu yaklaşımlar yalnızca istemci tarafı WebAssembly'de çalıştırmayı beklediğiniz durumlarda uygundur. Kitaplık yazarları, uygulamanın webassembly'deOperatingSystem.IsBrowser () çalışıp çalışmadığını denetleyerek birlikte çalışma özelliğini iyileştirmek JS için bu yaklaşımları kullanabilir. Bu makalede açıklanan yaklaşımlar, .NET 7 veya sonraki bir sürüme geçirildiğinde kullanılmayan özetlenmemiş JS birlikte çalışma API'sini değiştirmek için kullanılmalıdır.

Not

Bu makale, istemci tarafı bileşenlerinde birlikte çalışma konusuna odaklanır JS . JavaScript uygulamalarında .NET'i çağırma yönergeleri için bkz . JavaScript'ten .NET çalıştırma.

Eski JavaScript birlikte çalışma API'si

API kullanılarak IJSUnmarshalledRuntime özetlenmemiş JS birlikte çalışma, .NET 7 veya sonraki sürümlerde ASP.NET Core'da kullanımdan kaldırıldı. Eski API'yi değiştirmek için bu makaledeki yönergeleri izleyin.

Önkoşullar

Sistemde zaten yüklü değilse veya sistemde en son sürüm yüklü değilse .NET 7 veya üzerini indirip yükleyin.

Ad Alanı

JS Bu makalede açıklanan birlikte çalışma API'si, ad alanı içindeki System.Runtime.InteropServices.JavaScript öznitelikler tarafından denetlenmektedir.

Güvenli olmayan blokları etkinleştirme

AllowUnsafeBlocks Roslyn derleyicisindeki kod oluşturucunun birlikte çalışma için JS işaretçileri kullanmasına izin veren uygulamanın proje dosyasında özelliğini etkinleştirin:

<PropertyGroup>
  <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
</PropertyGroup>

Uyarı

Birlikte çalışma API'sinin JS etkinleştirilmesi AllowUnsafeBlocksgerekir. Güvenlik ve kararlılık risklerine neden olabilecek .NET uygulamalarında kendi güvenli olmayan kodunuzu uygularken dikkatli olun. Daha fazla bilgi için bkz . Güvenli olmayan kod, işaretçi türleri ve işlev işaretçileri.

.NET’ten JavaScript’i çağırma

Bu bölümde .NET'ten işlevlerin nasıl çağrılacakları JS açıklanmaktadır.

Aşağıdaki CallJavaScript1 bileşeninde:

• CallJavaScript1 Modülü, ile JSHost.ImportAsyncbirlikte bulunan JS dosyadan zaman uyumsuz olarak içeri aktarılır.
• İçeri aktarılan getMessageJS işlev tarafından GetWelcomeMessageçağrılır.
• Döndürülen karşılama iletisi dizesi kullanıcı arabiriminde alanı aracılığıyla message görüntülenir.

CallJavaScript1.razor:

@page "/call-javascript-1"
@rendermode InteractiveWebAssembly
@using System.Runtime.InteropServices.JavaScript

<h1>
    JS <code>[JSImport]</code>/<code>[JSExport]</code> Interop 
    (Call JS Example 1)
</h1>

@(message is not null ? message : string.Empty)

@code {
    private string? message;

    protected override async Task OnInitializedAsync()
    {
        await JSHost.ImportAsync("CallJavaScript1", 
            "../Components/Pages/CallJavaScript1.razor.js");

        message = GetWelcomeMessage();
    }
}

Not

Birlikte çalışma işleminin JS yalnızca istemcide işlenen bir bileşen tarafından çağrıldığından emin olmak için ile OperatingSystem.IsBrowser koşullu iade kodu ekleyin. Bu, bu JS birlikte çalışma API'sinin sağladığı kodu yürütemez ve sunucu tarafı bileşenlerini hedefleyen kitaplıklar/NuGet paketleri için önemlidir.

C# dilinden çağırmak üzere bir JS işlevi içeri aktarmak için, işlevin [JSImport] imzası ile eşleşen bir C# yöntemi imzasının özniteliğiniJS kullanın. özniteliğinin [JSImport] ilk parametresi içeri aktaracak işlevin JS adı, ikinci parametre ise modülün JSadıdır.

Aşağıdaki örnekte adlı getMessageCallJavaScript1modül JS için bir string döndüren bir işlevdir. C# yöntemi imzası eşleşir: İşleve JS parametre geçirilmemektedir ve JS işlev bir stringdöndürür. JS işlevi tarafından C# kodunda çağrılırGetWelcomeMessage.

CallJavaScript1.razor.cs:

using System.Runtime.InteropServices.JavaScript;
using System.Runtime.Versioning;

namespace BlazorSample.Components.Pages;

[SupportedOSPlatform("browser")]
public partial class CallJavaScript1
{
    [JSImport("getMessage", "CallJavaScript1")]
    internal static partial string GetWelcomeMessage();
}

Önceki kısmi sınıf için CallJavaScript1 uygulamanın ad alanı şeklindedir BlazorSample. Bileşenin ad alanı şeklindedir BlazorSample.Components.Pages. Bir yerel test uygulamasında önceki bileşeni kullanıyorsanız, ad alanını uygulamayla eşleşecek şekilde güncelleştirin. Örneğin ad alanı, uygulamanın ad ContosoApp.Components.Pages alanı ise olur ContosoApp. Daha fazla bilgi için bkz . ASP.NET Çekirdek Razor bileşenleri.

İçeri aktarılan yöntem imzasında, çalışma zamanı tarafından otomatik olarak hazırlanmış parametreler ve dönüş değerleri için .NET türlerini kullanabilirsiniz. İçeri aktarılan yöntem parametrelerinin nasıl düzenlendiğini denetlemek için kullanın JSMarshalAsAttribute<T> . Örneğin, veya olarak System.Runtime.InteropServices.JavaScript.JSType.NumberSystem.Runtime.InteropServices.JavaScript.JSType.BigIntsıralamayı long seçebilirsiniz. Geri çağırmaları, çağrılabilen işlevler olarak sıralanmış parametreler olarak geçirebilirsinizActionFunc<TResult>/.JS Hem hem de JS yönetilen nesne başvurularını geçirebilirsiniz ve bunlar proxy nesneleri olarak sıralanır ve ara sunucu çöp toplanana kadar nesneyi sınır boyunca canlı tutar. Ayrıca, bir sonuçla Task zaman uyumsuz yöntemleri içeri ve dışarı aktarabilirsiniz. Bu yöntemler, promise olarak JSsıralanır. Sıralanmış türlerin çoğu, bu makalenin devamında JavaScript'ten .NET çağırma bölümünde ele alınan hem içeri hem de dışarı aktarılan yöntemler üzerinde parametre olarak ve dönüş değerleri olarak her iki yönde de çalışır.

Aşağıdaki tabloda desteklenen tür eşlemeleri gösterilir.

.NET	JavaScript	Nullable	Task➔Promise	JSMarshalAs Isteğe bağlı	Array of
Boolean	Boolean	✅Destekleniyor	✅Destekleniyor	✅Destekleniyor	Desteklenmiyor
Byte	Number	✅Destekleniyor	✅Destekleniyor	✅Destekleniyor	✅Destekleniyor
Char	String	✅Destekleniyor	✅Destekleniyor	✅Destekleniyor	Desteklenmiyor
Int16	Number	✅Destekleniyor	✅Destekleniyor	✅Destekleniyor	Desteklenmiyor
Int32	Number	✅Destekleniyor	✅Destekleniyor	✅Destekleniyor	✅Destekleniyor
Int64	Number	✅Destekleniyor	✅Destekleniyor	Desteklenmiyor	Desteklenmiyor
Int64	BigInt	✅Destekleniyor	✅Destekleniyor	Desteklenmiyor	Desteklenmiyor
Single	Number	✅Destekleniyor	✅Destekleniyor	✅Destekleniyor	Desteklenmiyor
Double	Number	✅Destekleniyor	✅Destekleniyor	✅Destekleniyor	✅Destekleniyor
IntPtr	Number	✅Destekleniyor	✅Destekleniyor	✅Destekleniyor	Desteklenmiyor
DateTime	Date	✅Destekleniyor	✅Destekleniyor	Desteklenmiyor	Desteklenmiyor
DateTimeOffset	Date	✅Destekleniyor	✅Destekleniyor	Desteklenmiyor	Desteklenmiyor
Exception	Error	Desteklenmiyor	✅Destekleniyor	✅Destekleniyor	Desteklenmiyor
JSObject	Object	Desteklenmiyor	✅Destekleniyor	✅Destekleniyor	✅Destekleniyor
String	String	Desteklenmiyor	✅Destekleniyor	✅Destekleniyor	✅Destekleniyor
Object	Any	Desteklenmiyor	✅Destekleniyor	Desteklenmiyor	✅Destekleniyor
Span<Byte>	MemoryView	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor
Span<Int32>	MemoryView	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor
Span<Double>	MemoryView	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor
ArraySegment<Byte>	MemoryView	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor
ArraySegment<Int32>	MemoryView	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor
ArraySegment<Double>	MemoryView	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor
Task	Promise	Desteklenmiyor	Desteklenmiyor	✅Destekleniyor	Desteklenmiyor
Action	Function	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor
Action<T1>	Function	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor
Action<T1, T2>	Function	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor
Action<T1, T2, T3>	Function	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor
Func<TResult>	Function	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor
Func<T1, TResult>	Function	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor
Func<T1, T2, TResult>	Function	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor
Func<T1, T2, T3, TResult>	Function	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor	Desteklenmiyor

Tür eşlemesi ve marshalled değerleri için aşağıdaki koşullar geçerlidir:

• Sütun, Array of .NET türünün olarak JSArraysıralanabilir olup olmadığını gösterir. Örnek: C# int[] (Int32) ile eşlenen JSArrayNumbers.
• C# değerine yanlış türde bir JS değer geçirirken, çerçeve çoğu durumda bir özel durum oluşturur. Çerçeve, içinde JSderleme zamanı türü denetimi gerçekleştirmez.
• JSObject, Exceptionve TaskArraySegment oluşturun GCHandle ve bir ara sunucu oluşturun. Geliştirici kodunda elden çıkarmayı tetikleyebilir veya .NET çöp toplamanın (GC) nesneleri daha sonra atmasına izin vekleyebilirsiniz. Bu türler önemli performans yükü taşır.
• Array: Dizi hazırlama, veya .NET'te JS dizinin bir kopyasını oluşturur.
• MemoryView
  • MemoryView, ve ArraySegmentsıralamak için .NET WebAssembly çalışma zamanına Span yönelik bir JS sınıftır.
  • Bir diziyi hazırlamanın aksine, veya SpanArraySegment sıralamak temel belleğin bir kopyasını oluşturmaz.
  • MemoryView yalnızca .NET WebAssembly çalışma zamanı tarafından düzgün bir şekilde örneklenebilir. Bu nedenle, bir JS işlevi veya ArraySegmentparametresine Span sahip bir .NET yöntemi olarak içeri aktarmak mümkün değildir.
  • MemoryView için Span oluşturulan yalnızca birlikte çalışma çağrısı süresi için geçerlidir. Birlikte çalışma çağrısından sonra kalıcı olmayan çağrı yığınında ayrıldığı gibi Span , döndüren Spanbir .NET yöntemini dışarı aktarmak mümkün değildir.
  • MemoryView bir ArraySegment için oluşturulan birlikte çalışma çağrısından sonra hayatta kalır ve bir arabelleği paylaşmak için yararlıdır. bir için ArraySegment oluşturulan üzerinde MemoryView çağrısı dispose() proxy'yi atıp temel alınan .NET dizisini kaldırıyor. için MemoryViewbir try-finally blokta çağırmanızı dispose() öneririz.

özniteliğindeki [JSImport] modül adı ve ile bileşenindeki JSHost.ImportAsync modülü yükleme çağrısının eşleşmesi ve uygulamada benzersiz olması gerekir. NuGet paketinde dağıtım için bir kitaplık yazarken, modül adlarında ön ek olarak NuGet paketi ad alanını kullanmanızı öneririz. Aşağıdaki örnekte modül adı paketi ve kullanıcı iletisi birlikte çalışma sınıflarının (UserMessages) klasörünü yansıtırContoso.InteropServices.JavaScript:

[JSImport("getMessage", 
    "Contoso.InteropServices.JavaScript.UserMessages.CallJavaScript1")]

Genel ad alanında erişilebilen işlevler, işlev adında önek globalThis kullanılarak ve modül adı sağlanmadan [JSImport] özniteliği kullanılarak içeri aktarılabilir. Aşağıdaki örnekte ön console.log ek olarak verilmiştir globalThis. İçeri aktarılan işlev C# yöntemi tarafından çağrılır ve C# Log dize iletisini (message) kabul eder ve C# dizesini için console.logolarak JSString derler:

[JSImport("globalThis.console.log")]
internal static partial void Log([JSMarshalAs<JSType.String>] string message);

Standart bir JavaScript ES6 modülündeki betikleri bir bileşenle birlikte konumlandırılmış veya bir JS dosyadaki diğer JavaScript statik varlıklarıyla (örneğin, wwwroot/js/{FILE NAME}.jsJS statik varlıkların uygulamanın wwwroot klasöründeki adlı js bir klasörde tutulduğu ve {FILE NAME} yer tutucunun dosya adı olduğu) dışarı aktarın.

Aşağıdaki örnekte, adlı getMessage bir JS işlev, Portekizce olarak "Hello from !" adlı bir karşılama iletisi döndüren birlikte bulunan JS bir dosyadan Blazordışarı aktarılır:

CallJavaScript1.razor.js:

export function getMessage() {
  return 'Olá do Blazor!';
}

JavaScript’ten .NET’i çağırma

Bu bölümde , 'den JS.NET yöntemlerinin nasıl çağrılacakları açıklanmaktadır.

Aşağıdaki CallDotNet1 bileşen, hoş geldiniz iletisi dizesini işlemek için DOM ile doğrudan etkileşim kuran çağrıları JS çağırır:

• ModülCallDotNetJS, bu bileşen için birlikte bulunan JS dosyadan zaman uyumsuz olarak içeri aktarılır.
• İçeri aktarılan setMessageJS işlev tarafından SetWelcomeMessageçağrılır.
• Döndürülen karşılama iletisi kullanıcı arabiriminde tarafından alanı aracılığıyla message görüntülenirsetMessage.

Önemli

Bu bölümün örneğinde birlikte çalışma, JS bileşeni içinde OnAfterRenderişlendikten sonra bir DOM öğesini yalnızca gösterim amacıyla kapatmak için kullanılır. Normalde, dom'un sesini yalnızca nesnesi ile JS etkileşime geçmediği zaman ile Blazorkapatmanız gerekir. Bu bölümde gösterilen yaklaşım, bir bileşende Razor üçüncü taraf JS kitaplığının kullanıldığı, bileşenin birlikte çalışma yoluyla JS kitaplıkla JS etkileşime geçtiği, üçüncü taraf JS kitaplığının DOM'un bir bölümüyle etkileşime geçtiği ve Blazor DOM'un bu bölümündeki DOM güncelleştirmeleriyle doğrudan ilgili olmadığı durumlara benzer. Daha fazla bilgi için bkz. ASP.NET Core Blazor JavaScript birlikte çalışabilirliği (JSbirlikte çalışma).

CallDotNet1.razor:

@page "/call-dotnet-1"
@rendermode InteractiveWebAssembly
@using System.Runtime.InteropServices.JavaScript

<h1>
    JS <code>[JSImport]</code>/<code>[JSExport]</code> Interop 
    (Call .NET Example 1)
</h1>

<p>
    <span id="result">.NET method not executed yet</span>
</p>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSHost.ImportAsync("CallDotNet1", 
                "../Components/Pages/CallDotNet1.razor.js");

            SetWelcomeMessage();
        }
    }
}

.NET yöntemini içinden JSçağrılabilecek şekilde dışarı aktarmak için özniteliğini [JSExport]kullanın.

Aşağıdaki örnekte:

• SetWelcomeMessageadlı setMessagebir JS işlevi çağırır. İşlev, JS karşılama iletisini GetMessageFromDotnet almak için .NET'i çağırır ve kullanıcı arabiriminde iletiyi görüntüler.
• GetMessageFromDotnet, Portekizce olarak "Hello from Blazor!" adlı bir karşılama iletisi döndüren özniteliğine sahip [JSExport] bir .NET yöntemidir.

CallDotNet1.razor.cs:

using System.Runtime.InteropServices.JavaScript;
using System.Runtime.Versioning;

namespace BlazorSample.Components.Pages;

[SupportedOSPlatform("browser")]
public partial class CallDotNet1
{
    [JSImport("setMessage", "CallDotNet1")]
    internal static partial void SetWelcomeMessage();

    [JSExport]
    internal static string GetMessageFromDotnet()
    {
        return "Olá do Blazor!";
    }
}

Önceki kısmi sınıf için CallDotNet1 uygulamanın ad alanı şeklindedir BlazorSample. Bileşenin ad alanı şeklindedir BlazorSample.Components.Pages. Yerel bir test uygulamasında önceki bileşeni kullanıyorsanız, uygulamanın ad alanını uygulamayla eşleşecek şekilde güncelleştirin. Örneğin, bileşen ad alanı, uygulamanın ad ContosoApp.Components.Pages alanı ise olur ContosoApp. Daha fazla bilgi için bkz . ASP.NET Çekirdek Razor bileşenleri.

Aşağıdaki örnekte, adlı setMessage bir JS işlev birlikte bulunan JS bir dosyadan içeri aktarılır.

setMessage yöntemi:

• Dışarı aktarılan .NET yöntemlerini çağırmak için WebAssembly .NET çalışma zamanı örneğini kullanıma sunma çağrıları globalThis.getDotnetRuntime(0) .
• Uygulama derlemesinin JS dışarı aktarmalarını alır. Aşağıdaki örnekte uygulamanın derlemesinin adıdır BlazorSample.
• BlazorSample.Components.Pages.CallDotNet1.GetMessageFromDotnet Dışarı aktarmalardan yöntemini çağırır (exports). Döndürülen değer(hoş geldiniz iletisi) bileşenin CallDotNet1<span> metnine atanır. Uygulamanın ad alanı , BlazorSamplebileşenin CallDotNet1 ad alanı ise olur BlazorSample.Components.Pages.

CallDotNet1.razor.js:

export async function setMessage() {
  const { getAssemblyExports } = await globalThis.getDotnetRuntime(0);
  var exports = await getAssemblyExports("BlazorSample.dll");

  document.getElementById("result").innerText = 
    exports.BlazorSample.Components.Pages.CallDotNet1.GetMessageFromDotnet();
}

Not

Dışarı aktarmaları almak için çağrı getAssemblyExports yapmak, uygulama genelinde kullanılabilirlik için bir JavaScript başlatıcısında gerçekleşebilir.

Birden çok modül içeri aktarma çağrısı

Modül JS yüklendikten sonra, kullanıcı uygulamayı el ile yeniden yüklemeden uygulama tarayıcı penceresinde veya sekmesinde çalıştığı sürece modülün JS işlevleri uygulamanın bileşenleri ve sınıfları tarafından kullanılabilir. JSHost.ImportAsync aşağıdaki durumlarda önemli bir performans cezası olmadan aynı modülde birden çok kez çağrılabilir:

• Kullanıcı bir modülü içeri aktarmak için çağıran JSHost.ImportAsync bir bileşeni ziyaret eder, bileşenden uzaklaşır ve ardından aynı modül içeri aktarma için yeniden çağrılan JSHost.ImportAsync bileşene döner.
• Aynı modül farklı bileşenler tarafından kullanılır ve tarafından bileşenlerin her birine yüklenir JSHost.ImportAsync .

Bileşenler arasında tek bir JavaScript modülü kullanma

Bu bölümdeki yönergeleri takip etmeden önce, birlikte çalışma hakkında [JSImport]/[JSExport] genel yönergeler sağlayan bu makalenin JavaScript'i .NET'ten çağırma ve JavaScript'ten .NET'i çağırma bölümlerini okuyun.

Bu bölümdeki örnekte, istemci tarafı uygulamasında paylaşılan JS modülden birlikte çalışma özelliğinin nasıl kullanılacağı JS gösterilmektedir. Bu bölümdeki yönergeler sınıf kitaplıkları (RCL) için Razor geçerli değildir.

Aşağıdaki bileşenler, sınıflar, C# yöntemleri ve JS işlevler kullanılır:

• Interopclass (Interop.cs): adlı Interopmodülün [JSImport] ve [JSExport] öznitelikleriyle birlikte içeri ve dışarı JS aktarmayı ayarlar.
  • GetWelcomeMessage: İçeri aktarılan getMessageJS işlevi çağıran .NET yöntemi.
  • SetWelcomeMessage: İçeri aktarılan setMessageJS işlevi çağıran .NET yöntemi.
  • GetMessageFromDotnet: dosyasından JSçağrıldığında bir hoş geldiniz iletisi dizesi döndüren dışarı aktarılan bir C# yöntemi.
• wwwroot/js/interop.js file: İşlevleri JS içerir.
  • getMessage: Bir bileşende C# kodu tarafından çağrıldığında bir karşılama iletisi döndürür.
  • setMessage: C# yöntemini çağırır GetMessageFromDotnet ve döndürülen karşılama iletisini bir DOM <span> öğesine atar.
• Program.csmodülünden wwwroot/js/interop.jsyüklemek için çağrılarJSHost.ImportAsync.
• CallJavaScript2 bileşen (CallJavaScript2.razor): Çağrılar GetWelcomeMessage ve döndürülen karşılama iletisini bileşenin kullanıcı arabiriminde görüntüler.
• CallDotNet2 bileşen (CallDotNet2.razor): çağrıları SetWelcomeMessage.

Interop.cs:

using System.Runtime.InteropServices.JavaScript;
using System.Runtime.Versioning;

namespace BlazorSample.JavaScriptInterop;

[SupportedOSPlatform("browser")]
public partial class Interop
{
    [JSImport("getMessage", "Interop")]
    internal static partial string GetWelcomeMessage();

    [JSImport("setMessage", "Interop")]
    internal static partial void SetWelcomeMessage();

    [JSExport]
    internal static string GetMessageFromDotnet()
    {
        return "Olá do Blazor!";
    }
}

Yukarıdaki örnekte uygulamanın ad alanı ve BlazorSampleC# birlikte çalışma sınıflarının tam ad alanı şeklindedir BlazorSample.JavaScriptInterop.

wwwroot/js/interop.js:

export function getMessage() {
  return 'Olá do Blazor!';
}

export async function setMessage() {
  const { getAssemblyExports } = await globalThis.getDotnetRuntime(0);
  var exports = await getAssemblyExports("BlazorSample.dll");

  document.getElementById("result").innerText =
    exports.BlazorSample.JavaScriptInterop.Interop.GetMessageFromDotnet();
}

Ad alanını System.Runtime.InteropServices.JavaScript dosyanın en üstünde Program.cs kullanılabilir hale getirin:

using System.Runtime.InteropServices.JavaScript;

Modülü Program.cs daha önce WebAssemblyHost.RunAsync şu şekilde yükleyin:

if (OperatingSystem.IsBrowser())
{
    await JSHost.ImportAsync("Interop", "../js/interop.js");
}

CallJavaScript2.razor:

@page "/call-javascript-2"
@rendermode InteractiveWebAssembly
@using BlazorSample.JavaScriptInterop

<h1>
    JS <code>[JSImport]</code>/<code>[JSExport]</code> Interop 
    (Call JS Example 2)
</h1>

@(message is not null ? message : string.Empty)

@code {
    private string? message;

    protected override void OnInitialized()
    {
        message = Interop.GetWelcomeMessage();
    }
}

CallDotNet2.razor:

@page "/call-dotnet-2"
@rendermode InteractiveWebAssembly
@using BlazorSample.JavaScriptInterop

<h1>
    JS <code>[JSImport]</code>/<code>[JSExport]</code> Interop  
    (Call .NET Example 2)
</h1>

<p>
    <span id="result">.NET method not executed</span>
</p>

@code {
    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            Interop.SetWelcomeMessage();
        }
    }
}

Önemli

Bu bölümün örneğinde birlikte çalışma, JS bileşeni içinde OnAfterRenderişlendikten sonra bir DOM öğesini yalnızca gösterim amacıyla kapatmak için kullanılır. Normalde, dom'un sesini yalnızca nesnesi ile JS etkileşime geçmediği zaman ile Blazorkapatmanız gerekir. Bu bölümde gösterilen yaklaşım, bir bileşende Razor üçüncü taraf JS kitaplığının kullanıldığı, bileşenin birlikte çalışma yoluyla JS kitaplıkla JS etkileşime geçtiği, üçüncü taraf JS kitaplığının DOM'un bir bölümüyle etkileşime geçtiği ve Blazor DOM'un bu bölümündeki DOM güncelleştirmeleriyle doğrudan ilgili olmadığı durumlara benzer. Daha fazla bilgi için bkz. ASP.NET Core Blazor JavaScript birlikte çalışabilirliği (JSbirlikte çalışma).

Ek kaynaklar

• API belgeleri
  • [JSImport] Öznitelik
  • [JSExport] Öznitelik
• JavaScript'ten .NET çalıştırma
• dotnet/runtime GitHub deposunda:
  • .NET WebAssembly çalışma zamanı
  • dotnet.d.ts file (.NET WebAssembly çalışma zamanı yapılandırması)