ASP.NET Core `[JSImport]` を使用した JavaScript /`[JSExport]`Blazor 相互運用

Note

これは、この記事の最新バージョンではありません。現在のリリースについては、この記事の .NET 10 バージョンを参照してください。

警告

このバージョンの ASP.NET Core はサポート対象から除外されました。詳細については、 .NET および .NET Core サポートポリシーを参照してください。現在のリリースについては、この記事の .NET 10 バージョンを参照してください。

この記事では、JavaScript (JS) JS[JSImport]/ 相互運用 API を使用して、クライアント側コンポーネントで JtaavaScript ([JSExport]) と対話する方法について説明します。詳細と例については、「.NET WebAssembly の JavaScript `[JSImport]`/`[JSExport]` 相互運用機能」をご覧ください。

その他のガイダンスについては、.NET ランタイム () GitHub リポジトリの dotnet/runtimeガイダンスを参照してください。

Blazor は、JS インターフェイスに基づく独自の IJSRuntime 相互運用メカニズムを提供します。 Blazor の JS 相互運用機能は、Blazor レンダーモードと Blazor Hybrid アプリ間で一様にサポートされています。また、IJSRuntime は、ライブラリ作成者が JS エコシステム全体で共有するための Blazor 相互運用ライブラリを構築することも可能にしており、引き続き JS での Blazor 相互運用に推奨されるアプローチです。次の記事をご覧ください。

この記事では、WebAssembly で実行されるクライアント側コンポーネントに固有の、代替の JS 相互運用アプローチについて説明します。これらのアプローチは、クライアント側の WebAssembly でのみ実行することを想定している場合に適しています。ライブラリ作成者は、これらのアプローチを使用して、コード実行中にアプリがブラウザーの WebAssembly で実行されているかどうかを確認する (JS) ことで OperatingSystem.IsBrowser 相互運用を最適化できます。この記事で説明している方法は、.NET 7 以降に移行するときに、古いマーシャリング解除された JS 相互運用 API を置き換えるために使う必要があります。

Note

この記事では、クライアント側コンポーネントの JS 相互運用を重点的に説明します。 JavaScript アプリでの .NET の呼び出しに関するガイダンスについては、「JavaScript `[JSImport]`/`[JSExport]` と WebAssembly Browser App プロジェクトとの相互運用」をご覧ください。

廃止された JavaScript 相互運用 API

JS API を使用してマーシャリングが解除された IJSUnmarshalledRuntime 相互運用は、.NET 7 以降の ASP.NET Core では廃止されています。この記事のガイダンスに従って、古い API を置き換えます。

前提条件

Visual Studio 2022 と ASP.NET と Web 開発ワークロード。

[JSImport] プロジェクトテンプレートから生成された/ アプリに [JSExport]Blazor WebAssemblyBlazor WebAssembly 相互運用機能を実装する予定がある場合は、これ以上のツールは必要ありません。

WebAssembly Browser または WebAssembly Console アプリのプロジェクトテンプレートを使用する場合は、次のコマンドを使用して Microsoft.NET.Runtime.WebAssembly.Templates NuGet パッケージをインストールします。

dotnet new install Microsoft.NET.Runtime.WebAssembly.Templates

詳細については、「JavaScript `[JSImport]`/`[JSExport]` とWebAssembly Browser アプリプロジェクトの相互運用」をご覧ください。

名前空間

この記事で説明する JS 相互運用 API (JSHost.ImportAsync) は、System.Runtime.InteropServices.JavaScript 名前空間の属性によって制御されます。

アンセーフブロックを有効にする

アプリのプロジェクトファイルで AllowUnsafeBlocks プロパティを有効にします。これにより、Roslyn コンパイラのコードジェネレーターで JS 相互運用のポインターを使用できます。

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

警告

JS 相互運用 API では、AllowUnsafeBlocks を有効にする必要があります。 .NET アプリで独自のアンセーフコードを実装する場合は注意してください。セキュリティと安定性のリスクを招く可能性があります。詳細については、「アンセーフコード、ポインター型、関数ポインター」を参照してください。

Razor クラスライブラリ (RCL) の併置された JS はサポートされていません

一般に、JS ベースの IJSRuntime 相互運用 (JS) Blazor の場所のサポートは、この記事で説明する [JSImport]/ 相互運用にも存在します。サポートされていない唯一の JS 場所機能は、"JSクラスライブラリ (RCL) に併置された Razor" です。

RCL に併置された JS を使用する代わりに、RCL の JS フォルダーに wwwroot ファイルを配置し、RCL 静的アセットの通常のパスを使用して参照します。

_content/{PACKAGE ID}/{PATH}/{FILE NAME}.js

{PACKAGE ID} プレースホルダーは、RCL のパッケージ識別子 (クラスライブラリのライブラリ名) です。
{PATH} プレースホルダーはファイルへのパスです。
{FILE NAME} プレースホルダーはファイル名です。

RCL に併置された JS は、[JSImport]/[JSExport] 相互運用ではサポートされていませんが、次のいずれかの方法または両方を使用して、JS ファイルを整理しておくことができます。

JS ファイルに、JS が使用されるコンポーネントと同じように名前を付けます。 CallJavaScriptFromLib という名前の RCL 内のコンポーネントの場合 (CallJavaScriptFromLib.razor)、CallJavaScriptFromLib.js フォルダー内の wwwroot ファイルに名前を付けます。
コンポーネント固有の JS ファイルを RCL の Components フォルダー内の wwwroot フォルダーに配置し、次のようにファイルのパスに "Components" を使用します: _content/{PACKAGE ID}/Components/CallJavaScriptFromLib.js。

.NET から JavaScript を呼び出す

このセクションでは、.NET から JS 関数を呼び出す方法について説明します。

次の CallJavaScript1 コンポーネントでは、以下のことを行います。

CallJavaScript1 モジュールが、JS を使用して、から非同期的にインポートされます。
インポートされた getMessageJS 関数が、GetWelcomeMessage によって呼び出されます。
返されたウェルカムメッセージ文字列が、message フィールドを介して UI に表示されます。

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

@page "/call-javascript-1"
@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", 
            "../Pages/CallJavaScript1.razor.js");

        message = GetWelcomeMessage();
    }
}

Note

OperatingSystem.IsBrowser 相互運用がクライアントにレンダリングされたコンポーネントによってのみ呼び出されるように、JS を使用してコードに条件付きチェックを含めます。これは、サーバー側コンポーネントを対象とするライブラリ/NuGet パッケージにとって重要です。サーバー側コンポーネントはこの JS 相互運用 API によって提供されるコードを実行できません。

C# からそれを呼び出す JS 関数をインポートするには、[JSImport] 関数のシグネチャに一致する C# メソッドシグネチャでを使用します。 [JSImport] 属性の最初のパラメーターは、インポートする JS 関数の名前で、2 番目のパラメーターは JS モジュールの名前です。

次の例で、getMessage は、JS というモジュールの string を返す CallJavaScript1 関数です。 C# メソッドシグネチャが一致します。JS 関数にパラメーターが渡されておらず、JS 関数は string を返します。 JS 関数は C# コードで、GetWelcomeMessage によって呼び出されます。

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

上記の CallJavaScript1 部分クラスのアプリの名前空間は BlazorSample です。コンポーネントの名前空間は BlazorSample.Components.Pages です。ローカルテストアプリで上記のコンポーネントを使用している場合は、アプリに一致するように名前空間を更新します。たとえば、アプリの名前空間が ContosoApp.Components.Pages である場合、名前空間は ContosoApp です。詳細については、「ASP.NET Core Razor コンポーネント」を参照してください。

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

namespace BlazorSample.Pages;

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

上記の CallJavaScript1 部分クラスのアプリの名前空間は BlazorSample です。コンポーネントの名前空間は BlazorSample.Pages です。ローカルテストアプリで上記のコンポーネントを使用している場合は、アプリに一致するように名前空間を更新します。たとえば、アプリの名前空間が ContosoApp.Pages である場合、名前空間は ContosoApp です。詳細については、「ASP.NET Core Razor コンポーネント」を参照してください。

インポートされたメソッドシグネチャでは、パラメーターと戻り値に .NET 型を使用でき、これはランタイムによって自動的にマーシャリングされます。インポートされたメソッドパラメーターのマーシャリング方法を制御するには、JSMarshalAsAttribute<T> を使用します。たとえば、long を System.Runtime.InteropServices.JavaScript.JSType.Number または System.Runtime.InteropServices.JavaScript.JSType.BigInt としてマーシャリングするように選択できます。 Action / Func<TResult> コールバックをパラメーターとして渡すことができます。これは呼び出し可能な JS 関数としてマーシャリングされます。 JS とマネージドオブジェクト参照の両方を渡すことができ、それらはプロキシオブジェクトとしてマーシャリングされ、プロキシがガベージコレクションされるまでオブジェクトが境界を越えて維持されます。 Task の結果によって非同期メソッドをインポートおよびエクスポートすることもできます。これは JS Promise としてマーシャリングされます。マーシャリングされた型のほとんどは、インポートされたメソッドとエクスポートされたメソッドの両方で、パラメーターとしても戻り値としても、両方向で動作します。これについては、この記事の後半の「JavaScript からの .NET の呼び出し」セクションで説明しています。

その他の型マッピング情報と例については、「.NET WebAssembly の JavaScript `[JSImport]`/`[JSExport]` 相互運用」をご覧ください。

[JSImport] 属性のモジュール名と、JSHost.ImportAsync を使用してコンポーネントにモジュールを読み込む呼び出しは一致していて、アプリで一意である必要があります。 NuGet パッケージでデプロイ用のライブラリを作成する場合は、モジュール名のプレフィックスとして NuGet パッケージ名前空間を使用することが推奨されます。次の例では、モジュール名は Contoso.InteropServices.JavaScript パッケージとユーザーメッセージ相互運用クラス (UserMessages) のフォルダーを反映しています。

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

グローバル名前空間でアクセスできる関数をインポートするには、関数名に globalThis プレフィックスを使い、モジュール名を指定せずに [JSImport] 属性を使います。次の例では、console.log の前に globalThis を付けています。インポートされた関数は C# Log メソッドによって呼び出されます。C# 文字列メッセージ (message) を受け取り、C# 文字列を JS の Stringconsole.log にマーシャリングします。

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

ファイル内でコンポーネントと併置されているか、他の JavaScript 静的資産と共に配置されている標準 JSからスクリプトをエクスポートします (たとえば wwwroot/js/{FILE NAME}.js。ここで JS 静的資産はアプリの js フォルダー内の wwwroot というフォルダーに保持され、{FILE NAME} プレースホルダーはファイル名です)。

次の例では、JS という getMessage 関数が、ポルトガル語で "Hello from JS!" というウェルカムメッセージを返す、併置された Blazor ファイルからエクスポートされます。

CallJavaScript1.razor.js:

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

JavaScript から .NET を呼び出す

このセクションでは、JS から .NET メソッドを呼び出す方法について説明します。

次の CallDotNet1 コンポーネントは、DOM と直接対話してウェルカムメッセージ文字列をレンダリングする JS を呼び出します。

CallDotNet JS モジュールは、このコンポーネントの併置された JS ファイルから非同期的にインポートされます。
インポートされた setMessageJS 関数が、SetWelcomeMessage によって呼び出されます。
返されたウェルカムメッセージが、setMessage によって、message フィールドを介して UI に表示されます。

重要

このセクションの例では、JS でコンポーネントがレンダリングされた後に、純粋にデモンストレーション目的で DOM 要素を変更するために、OnAfterRender 相互運用を使用しています。一般に、JS によって DOM を変更する必要があるのは、オブジェクトが Blazor と対話しない場合だけです。このセクションに示すアプローチは、JS コンポーネントでサードパーティ Razor ライブラリを使用する場合と似ています。コンポーネントは JS 相互運用を介して JS ライブラリと対話し、サードパーティ JS ライブラリは DOM の一部と対話し、Blazor は DOM のその部分への DOM の更新に直接関与しません。詳しくは、「ASP.NET Core Blazor JavaScript の相互運用性 (JS 相互運用)」をご覧ください。

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

@page "/call-dotnet-1"
@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", 
                "../Pages/CallDotNet1.razor.js");

            SetWelcomeMessage();
        }
    }
}

.NET メソッドをエクスポートして、JS から呼び出せるようにするには、[JSExport] 属性を使用します。

次に例を示します。

SetWelcomeMessage は、JS という名前の setMessage 関数を呼び出します。 JS 関数は .NET を呼び出して、GetMessageFromDotnet からウェルカムメッセージを受け取り、UI にメッセージを表示します。
GetMessageFromDotnet は、ポルトガル語のウェルカムメッセージ "Hello from [JSExport]!" を返す Blazor 属性を持つ .NET メソッドです。

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() => "Olá do Blazor!";
}

上記の CallDotNet1 部分クラスのアプリの名前空間は BlazorSample です。コンポーネントの名前空間は BlazorSample.Components.Pages です。ローカルテストアプリで上記のコンポーネントを使用している場合は、アプリに一致するようにアプリの名前空間を更新します。たとえば、アプリの名前空間が ContosoApp.Components.Pages の場合、コンポーネントの名前空間は ContosoApp です。詳細については、「ASP.NET Core Razor コンポーネント」を参照してください。

次の例では、JS という setMessage 関数が併置された JS ファイルからインポートされます。

setMessage メソッド:

globalThis.getDotnetRuntime(0) を呼び出して、エクスポートされた .NET メソッドを呼び出すための WebAssembly .NET ランタイムインスタンスを公開します。
アプリアセンブリの JS エクスポートを取得します。次の例のアプリのアセンブリの名前は BlazorSample です。
エクスポート (BlazorSample.Components.Pages.CallDotNet1.GetMessageFromDotnet) から exports メソッドを呼び出します。戻り値 (ウェルカムメッセージ) が、CallDotNet1 コンポーネントの <span> テキストに割り当てられます。アプリの名前空間は BlazorSample で、CallDotNet1 コンポーネントの名前空間は 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();
}

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

namespace BlazorSample.Pages;

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

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

上記の CallDotNet1 部分クラスのアプリの名前空間は BlazorSample です。コンポーネントの名前空間は BlazorSample.Pages です。ローカルテストアプリで上記のコンポーネントを使用している場合は、アプリに一致するようにアプリの名前空間を更新します。たとえば、アプリの名前空間が ContosoApp.Pages の場合、コンポーネントの名前空間は ContosoApp です。詳細については、「ASP.NET Core Razor コンポーネント」を参照してください。

次の例では、JS という setMessage 関数が併置された JS ファイルからインポートされます。

setMessage メソッド:

globalThis.getDotnetRuntime(0) を呼び出して、エクスポートされた .NET メソッドを呼び出すための WebAssembly .NET ランタイムインスタンスを公開します。
アプリアセンブリの JS エクスポートを取得します。次の例のアプリのアセンブリの名前は BlazorSample です。
エクスポート (BlazorSample.Pages.CallDotNet1.GetMessageFromDotnet) から exports メソッドを呼び出します。戻り値 (ウェルカムメッセージ) が、CallDotNet1 コンポーネントの <span> テキストに割り当てられます。アプリの名前空間は BlazorSample で、CallDotNet1 コンポーネントの名前空間は BlazorSample.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.Pages.CallDotNet1.GetMessageFromDotnet();
}

Note

エクスポートを取得するための getAssemblyExports の呼び出しは、アプリ全体での可用性のため、JavaScript 初期化子で行うことができます。

複数のモジュールインポート呼び出し

JS モジュールが読み込まれた後、ユーザーがアプリを手動で再読み込みしなくても、ブラウザーウィンドウやタブでアプリが実行されている限り、モジュールの JS 関数をアプリのコンポーネントとクラスで使用できます。 JSHost.ImportAsync は、次の場合に、パフォーマンスが大幅に低下することなく、同じモジュールで複数回呼び出すことができます。

ユーザーは、JSHost.ImportAsync を呼び出すコンポーネントにアクセスして、モジュールをインポートし、コンポーネントから移動して、さらに同じモジュールインポートに対して JSHost.ImportAsync が再度呼び出されるコンポーネントに戻ります。
同じモジュールが異なるコンポーネントで使用され、各コンポーネントに JSHost.ImportAsync によって読み込まれます。

コンポーネント間で単一の JavaScript モジュールを使用する

このセクションのガイダンスに従う前に、[JSImport] 相互運用に関する一般的なガイダンスを提供している、この記事の「/」と「[JSExport]」セクションを参照してください。

このセクションの例では、クライアント側アプリで共有 JS モジュールから JS 相互運用を使用する方法を示します。このセクションのガイダンスは、Razor クラスライブラリ (RCL) には適用されません。

次のコンポーネント、クラス、C# メソッド、および JS 関数が使用されます。

Interop クラス (Interop.cs): JS というモジュールに [JSImport] 属性と [JSExport] 属性を使用してインポートおよびエクスポート Interop 相互運用を設定します。
- GetWelcomeMessage: インポートされた getMessageJS 関数を呼び出す .NET メソッド。
- SetWelcomeMessage: インポートされた setMessageJS 関数を呼び出す .NET メソッド。
- GetMessageFromDotnet: JS から呼び出されたときにウェルカムメッセージ文字列を返すエクスポートされた C# メソッド。
wwwroot/js/interop.js ファイル: JS 関数が含まれています。
- getMessage: コンポーネントで C# コードによって呼び出されたときにウェルカムメッセージを返します。
- setMessage: GetMessageFromDotnet C# メソッドを呼び出し、返されたウェルカムメッセージを DOM <span> 要素に割り当てます。
Program.cs は、JSHost.ImportAsync を呼び出して、wwwroot/js/interop.js からモジュールを読み込みます。
CallJavaScript2 コンポーネント (CallJavaScript2.razor): GetWelcomeMessage を呼び出して、返されたウェルカムメッセージをコンポーネントの UI に表示します。
CallDotNet2 コンポーネント (CallDotNet2.razor): 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() => "Olá do Blazor!";
}

上記の例では、アプリの名前空間は BlazorSample で、C# 相互運用クラスの完全な名前空間は 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();
}

System.Runtime.InteropServices.JavaScript 名前空間を Program.cs ファイルの先頭で使用できるようにします。

using System.Runtime.InteropServices.JavaScript;

Program.cs が呼び出される前に、WebAssemblyHost.RunAsync にモジュールを読み込みます。

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

@page "/call-javascript-2"
@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();
        }
    }
}

@page "/call-dotnet-2"
@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();
        }
    }
}

重要

その他のリソース

.NET WebAssembly での JavaScript `[JSImport]`/`[JSExport]` 相互運用
WebAssembly Browser App プロジェクトでの JavaScript `[Import]`/`[Export]` 相互運用
API ドキュメント
- [JSImport] 属性
- [JSExport] 属性
dotnet/runtime GitHub リポジトリ内:

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-01-09

次の方法で共有

ASP.NET Core [JSImport] を使用した JavaScript /[JSExport]Blazor 相互運用

廃止された JavaScript 相互運用 API

前提条件

名前空間

アンセーフ ブロックを有効にする

Razor クラス ライブラリ (RCL) の併置された JS はサポートされていません

.NET から JavaScript を呼び出す

JavaScript から .NET を呼び出す

複数のモジュール インポート呼び出し

コンポーネント間で単一の JavaScript モジュールを使用する

その他のリソース

フィードバック

その他のリソース

ASP.NET Core `[JSImport]` を使用した JavaScript /`[JSExport]`Blazor 相互運用

アンセーフブロックを有効にする

Razor クラスライブラリ (RCL) の併置された JS はサポートされていません

複数のモジュールインポート呼び出し