JavaScript アプリと SPA フレームワークで Razor コンポーネントを使用する

この記事では、JavaScript から Razor コンポーネントをレンダリングし、Blazor カスタム要素を使用し、Angular および React コンポーネントを生成する方法について説明します。

Angular サンプル アプリ

• CustomElementsBlazorSample (Blazor Server) (javiercn/CustomElementsBlazorSample、ブランチ: blazor-server): Blazor Server は .NET 8 でサポートされています。 この .NET 7 サンプルを .NET 8 に移行するには、「ASP.NET Core 7.0 から 8.0 への移行」を参照してください。
• CustomElementsBlazorSample (Blazor WebAssembly) (javiercn/CustomElementsBlazorSample、ブランチ: blazor-wasm): この.NET 7 サンプルを .NET 8 へ移行するには、ASP.NET Core 7.0 から 8.0 への移行をご覧ください。

JavaScript から Razor コンポーネントをレンダリングする

Razor コンポーネントは、既存の JavaScript (JS) アプリの JS から動的にレンダリングできます。

このセクションの例では、次の Razor コンポーネントを JS を使ってページにレンダリングします。

Quote.razor:

<div class="m-5 p-5">
    <h2>Quote</h2>
    <p>@Text</p>
</div>

@code {
    [Parameter]
    public string? Text { get; set; }
}

Program ファイルに、コンポーネントの場所の名前空間を追加します。

アプリのルート コンポーネント コレクションで RegisterForJavaScript を呼び出し、Razor コンポーネントを JS レンダリング用のルート コンポーネントとして登録します。

RegisterForJavaScript には、初期化ロジックを実行する JS 関数の名前 (javaScriptInitializer) を受け取るオーバーロードが含まれています。 この JS 関数は、Blazor アプリの起動直後、コンポーネントがレンダリングされる前に、コンポーネント登録ごとに 1 回呼び出されます。 この関数は、JS テクノロジとの統合のために使用できます。たとえば、HTML カスタム要素や JS ベースの SPA フレームワークなどです。

1 つ以上の初期化子関数を作成し、さまざまなコンポーネント登録によって呼び出すことができます。 一般的なユース ケースは、複数のコンポーネントに対して同じ初期化子関数を再利用することです。これは、初期化子関数がカスタム要素や、別の JS ベースの SPA フレームワークとの統合を構成している場合に想定されます。

次の例では、識別子として "quote" を持つ前の Quote コンポーネントの動的登録を示します。

• Blazor Server アプリで、Program ファイル内の AddServerSideBlazor への呼び出しを変更します。

  builder.Services.AddServerSideBlazor(options =>
  {
      options.RootComponents.RegisterForJavaScript<Quote>(identifier: "quote", 
          javaScriptInitializer: "initializeComponent");
  });
  

• Blazor WebAssembly アプリで、クライアント側の Program ファイル内の RootComponents で RegisterForJavaScript を呼び出します。

  builder.RootComponents.RegisterForJavaScript<Quote>(identifier: "quote", 
      javaScriptInitializer: "initializeComponent");
  

name および parameters 関数パラメーターを持つ初期化子関数を window オブジェクトにアタッチします。 次の initializeComponent 関数は、デモのために、登録されているコンポーネントの名前とパラメーターをログします。

wwwroot/jsComponentInitializers.js:

window.initializeComponent = (name, parameters) => {
  console.log({ name: name, parameters: parameters });
}

登録された識別子を使って JS からコンテナー要素にコンポーネントをレンダリングし、必要に応じてコンポーネント パラメーターを渡します。

次に例を示します。

• showQuote 関数が呼び出されると、Quote コンポーネント (quote 識別子) が quoteContainer 要素にレンダリングされます。
• 引用文字列がコンポーネントの Text パラメーターに渡されます。

wwwroot/scripts.js:

window.showQuote = async () => {
  let targetElement = document.getElementById('quoteContainer');
  await Blazor.rootComponents.add(targetElement, 'quote', 
  {
    text: "Crow: I have my doubts that this movie is actually 'starring' " +
      "anybody. More like, 'camera is generally pointed at.'"
  });
}

const btn = document.querySelector("#showQuoteBtn");
btn.addEventListener("click", showQuote);

Blazor スクリプトが読み込まれたら、前のスクリプトを JS アプリに読み込みます。

<script src="_framework/{BLAZOR SCRIPT}"></script>
<script src="jsComponentInitializers.js"></script>
<script src="scripts.js"></script>

前の例では、{BLAZOR SCRIPT} プレースホルダーが Blazor スクリプトです。

HTML で、ターゲット コンテナー要素 (quoteContainer) を配置します。 このセクションのデモでは、ボタンによって showQuoteJS 関数を呼び出すことで Quote コンポーネントのレンダリングがトリガーされます。

<button id="showQuoteBtn">Show Quote</button>

<div id="quoteContainer"></div>

コンポーネントがレンダリングされる前の初期化時に、ブラウザーの開発者ツール コンソールでは、initializeComponent が呼び出されたときに Quote コンポーネントの識別子 (name) とパラメーター (parameters) がログされます。

Object { name: "quote", parameters: (1) […] }
  name: "quote"
  parameters: Array [ {…} ]
    0: Object { name: "Text", type: "string" }
    length: 1

Show Quote ボタンを選択すると、Quote コンポーネントがレンダリングされ、Text に格納されている引用が表示されます。

引用 ©1988-1999 Satellite of Love LLC: Mystery Science Theater 3000 (Trace Beaulieu (Crow))

const rootComponent = await window.Blazor.rootComponents.add(...);

...

rootComponent.dispose();

前述の例では、showQuote()JS 関数が呼び出されたときにルート コンポーネントを動的にレンダリングします。 Blazor の起動時にルート コンポーネントをコンテナー要素にレンダリングするには、次の例に示すように、JavaScript 初期化子を使用してそのコンポーネントをレンダリングします。

次の例は、前述の例、Quote コンポーネントの使用、Program ファイルでのルート コンポーネントの登録、jsComponentInitializers.js の初期化の上に構築されています。 showQuote() 関数 (と script.js ファイル) は使用されません。

HTML で、ターゲット コンテナー要素 (この例では quoteContainer2) を配置します。

<div id="quoteContainer2"></div>

JavaScript 初期化子を使用して、ルート コンポーネントをターゲット コンテナー要素に追加します。

wwwroot/{PACKAGE ID/ASSEMBLY NAME}.lib.module.js:

export function afterStarted(blazor) {
  let targetElement = document.getElementById('quoteContainer2');
  blazor.rootComponents.add(targetElement, 'quote',
    {
      text: "Crow: I have my doubts that this movie is actually 'starring' " +
          "anybody. More like, 'camera is generally pointed at.'"
    });
}

追加機能を備えた高度な例については、ASP.NET Core リファレンス ソース (dotnet/aspnetcore GitHub リポジトリ) の BasicTestApp の例を参照してください。

• JavaScriptRootComponents.razor
• wwwroot/js/jsRootComponentInitializers.js
• wwwroot/index.html

Blazor カスタム要素

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount() => currentCount++;
}

using Microsoft.AspNetCore.Components.Web;

using BlazorSample.Pages;

builder.Services.AddServerSideBlazor(options =>
{
    options.RootComponents.RegisterCustomElement<Counter>("my-counter");
});

using Microsoft.AspNetCore.Components.Web;

using BlazorSample.Pages;

builder.RootComponents.RegisterCustomElement<Counter>("my-counter");

<my-counter></my-counter>

@page "/counter"

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    [Parameter]
    public int IncrementAmount { get; set; } = 1;

    private void IncrementCount()
    {
        currentCount += IncrementAmount;
    }
}

<my-counter increment-amount="10"></my-counter>

const elem = document.querySelector("my-counter");
elem.incrementAmount = 10;

<script src="/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script>

<my-counter increment-amount={incrementAmount}></my-counter>

Angular コンポーネントと React コンポーネントを生成する

Angular や React などの Web フレームワークの Razor コンポーネントから、フレームワーク固有の JavaScript (JS) コンポーネントを生成します。 この機能は .NET には含まれていませんが、JS から Razor コンポーネントをレンダリングするサポートによって有効になります。 GitHub の JS コンポーネント生成サンプルは、Razor コンポーネントから Angular コンポーネントと React コンポーネントを生成する方法を示しています。 詳細については、GitHub サンプル アプリの README.md ファイルを参照してください。