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

前提条件

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

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

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

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

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

Note

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および stringColor ) の型であるため、前のSizeColor例の値Sizeを指定できます。

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

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 は、アプリの名前空間にあります。

その他の技術情報

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