ASP.NET Core のコンポーネント タグ ヘルパー

前提条件

構成に関するセクションのガイダンスに、次のいずれかにおいても従います。

  • Blazor Server: ルーティング可能なコンポーネントとルーティング不可能な Razor コンポーネントを Pages および MVC アプリに Razor 統合します。
  • Blazor WebAssembly: ホストされているBlazor WebAssemblyソリューションのコンポーネントを Pages および MVC アプリにRazor統合Razorします。

Prerender の 「構成 」セクションのガイダンスに従って 、コア Razor コンポーネント ASP.NET 統合 します。

コンポーネント タグ ヘルパー

ページまたはビューからコンポーネントをレンダリングするには、コンポーネント タグ ヘルパー (<component> タグ) を使用します。

注意

Razor コンポーネントをホストされている Blazor WebAssembly アプリの Razor Pages と MVC アプリに統合する場合、ASP.NET Core.NET 5.0 以降がサポートされています。

RenderMode によって、コンポーネントに対して以下の構成が行われます。

  • ページに事前レンダリングするかどうか。
  • ページに静的 HTML としてレンダリングするかどうか。または、ユーザー エージェントから Blazor アプリをブートストラップするために必要な情報が含まれているかどうか。

Blazor WebAssembly アプリの表示モードは、次の表のとおりです。

表示モード 説明
WebAssembly ブラウザーに読み込まれるときに対話型コンポーネントを含めるために使用される Blazor WebAssembly アプリ用のマーカーをレンダリングします。 コンポーネントはプリレンダリングされません。 このオプションを使用すると、異なる Blazor WebAssembly コンポーネントを異なるページにレンダリングしやすくなります。
WebAssemblyPrerendered コンポーネントを静的 HTML にプリレンダリングし、ブラウザーに読み込まれるときにコンポーネントを対話型にするために後で使用される Blazor WebAssembly アプリ用のマーカーを含めます。

Blazor Server アプリの表示モードは、次の表のとおりです。

表示モード 説明
ServerPrerendered コンポーネントを静的 HTML にレンダリングし、Blazor Server アプリのマーカーを含めます。 このマーカーは、ユーザー エージェントの起動時に Blazor アプリをブートストラップするために使用されます。
Server Blazor Server アプリのマーカーをレンダリングします。 コンポーネントからの出力は含められません。 このマーカーは、ユーザー エージェントの起動時に Blazor アプリをブートストラップするために使用されます。
Static コンポーネントを静的 HTML にレンダリングします。

Blazor Server アプリの表示モードは、次の表のとおりです。

表示モード 説明
ServerPrerendered コンポーネントを静的 HTML にレンダリングし、Blazor Server アプリのマーカーを含めます。 このマーカーは、ユーザー エージェントの起動時に Blazor アプリをブートストラップするために使用されます。
Server Blazor Server アプリのマーカーをレンダリングします。 コンポーネントからの出力は含められません。 このマーカーは、ユーザー エージェントの起動時に Blazor アプリをブートストラップするために使用されます。
Static コンポーネントを静的 HTML にレンダリングします。

その他の特性には、次などがあります。

  • 複数のコンポーネント タグ ヘルパーで、複数の Razor コンポーネントをレンダリングできます。
  • アプリの起動後に、コンポーネントを動的にレンダリングすることはできません。
  • ページとビューはコンポーネントを使用できますが、逆のことはできません。 ビューやページ固有の機能 (部分ビューや部分セクションなど) は、コンポーネントでは使用できません。 コンポーネントの部分ビューにあるロジックを使用するには、部分ビューのロジックを要素としてコンポーネントに取り入れます。
  • 静的 HTML ページからのサーバー コンポーネントのレンダリングは、サポートされていません。

次のコンポーネント タグ ヘルパーでは、ServerPrerendered がある Blazor Server アプリで Counter コンポーネントをページまたはビューにレンダリングします。

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}.Pages

...

<component type="typeof(Counter)" render-mode="ServerPrerendered" />

前の例では、Counter コンポーネントがアプリの Pages フォルダー内にあることを前提としています。 プレースホルダー {APP ASSEMBLY} はアプリのアセンブリ名です (たとえば、ホストされている Blazor ソリューションの @using BlazorSample.Pages または @using BlazorSample.Client.Pages)。

コンポーネント タグ ヘルパーでは、コンポーネントにパラメーターを渡すこともできます。 チェックボックス ラベルの色とサイズを設定する次の ColorfulCheckbox コンポーネントについて考えてみます。

<label style="font-size:@(Size)px;color:@Color">
    <input @bind="Value"
           id="survey" 
           name="blazor" 
           type="checkbox" />
    Enjoying Blazor?
</label>

@code {
    [Parameter]
    public bool Value { get; set; }

    [Parameter]
    public int Size { get; set; } = 8;

    [Parameter]
    public string Color { get; set; }

    protected override void OnInitialized()
    {
        Size += 10;
    }
}

コンポーネント タグ ヘルパーでは、Size (int) と Color (string) コンポーネント パラメーターを設定できます。

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}.Shared

...

<component type="typeof(ColorfulCheckbox)" render-mode="ServerPrerendered" 
    param-Size="14" param-Color="@("blue")" />

前の例では、ColorfulCheckbox コンポーネントがアプリの Shared フォルダー内にあることを前提としています。 プレースホルダー {APP ASSEMBLY} は、アプリのアセンブリ名です (例: @using BlazorSample.Shared)。

次の HTML はページまたはビューにレンダリングされます。

<label style="font-size:24px;color:blue">
    <input id="survey" name="blazor" type="checkbox">
    Enjoying Blazor?
</label>

前の param-Color の例のように、引用符で囲まれた文字列を渡すには、明示的な Razor 式が必要です。 object 型である param-* 属性には、Razor の string 型の値の解析動作は該当しません。

次の場合を除き、すべての種類のパラメーターがサポートされています。

  • ジェネリック パラメーター。
  • シリアル化できないパラメーター。
  • コレクション パラメーターの継承。
  • 型が Blazor WebAssembly アプリの外部で定義されているか、遅延読み込みされたアセンブリ内にあるパラメーター。
  • 子コンテンツのデリゲートをRenderFragment受信する場合 (たとえば)。 param-ChildContent="..." このシナリオでは、渡す子コンテンツでレンダリングするコンポーネントを参照するコンポーネント (.razor) を作成Razorし、コンポーネント タグ ヘルパーを使用してページまたはビューからコンポーネントを呼び出Razorすることをお勧めします。

パラメーター型は ON シリアル化可能である JS必要があります。これは通常、型に既定のコンストラクターと設定可能なプロパティが必要であることを意味します。 たとえば、ON シリアライザーでサポートJSされているプリミティブ型 (intおよびColor) の型とColorプリミティブ型であるため、前のSize例の値Sizestring指定できます。

次の例では、クラス オブジェクトがコンポーネントに渡されます。

MyClass.cs:

public class MyClass
{
    public MyClass()
    {
    }

    public int MyInt { get; set; } = 999;
    public string MyString { get; set; } = "Initial value";
}

このクラスには、パラメーターなしのパブリック コンストラクターが含まれている必要があります。

Shared/MyComponent.razor:

<h2>MyComponent</h2>

<p>Int: @MyObject.MyInt</p>
<p>String: @MyObject.MyString</p>

@code
{
    [Parameter]
    public MyClass MyObject { get; set; }
}

Pages/MyPage.cshtml:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}
@using {APP ASSEMBLY}.Shared

...

@{
    var myObject = new MyClass();
    myObject.MyInt = 7;
    myObject.MyString = "Set by MyPage";
}

<component type="typeof(MyComponent)" render-mode="ServerPrerendered" 
    param-MyObject="@myObject" />

前の例では、MyComponent コンポーネントがアプリの Shared フォルダー内にあることを前提としています。 プレースホルダー {APP ASSEMBLY} は、アプリのアセンブリ名です (例: @using BlazorSample および @using BlazorSample.Shared)。 MyClass は、アプリの名前空間にあります。

その他の技術情報