Blazor アプリケーションでRazorコンポーネントを利用する

Blazor アプリケーションでRazorコンポーネントを利用する手順を紹介します。

概要

Blazorアプリケーションではページ内のパーツをコンポーネント化して利用できます。この記事ではBlazorアプリケーションでRazorコンポーネントを利用する手順を紹介します。

プログラム

プロジェクトの作成

ASP.NET Core Webアプリケーションプロジェクトを作成します。

• Pagesフォルダを作成し、フォールバックページ "_Host.cshtml" の作成
• App.razor ファイルの作成
• _Imports.razor ファイルの作成
• Startup.cs の作成

をします。詳しい手順はこちらの記事を参照してください。
Startup.csは下記のコードです。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace SimpleComponent
{
  public class Startup
  {
    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices(IServiceCollection services)
    {
      services.AddRazorPages();
      services.AddServerSideBlazor();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
      if (env.IsDevelopment()) {
        app.UseDeveloperExceptionPage();
      }

      app.UseStaticFiles();
      app.UseRouting();

      app.UseEndpoints(endpoints =>
      {
        endpoints.MapBlazorHub();
        endpoints.MapFallbackToPage("/_Host");
      });

    }
  }
}

Razorコンポーネントの作成

ソリューションエクスプローラーでプロジェクトの直下に"Shared"フォルダを作成します。


作成したSharedフォルダ内にRazorコンポーネントを作成します。ファイル名は "MyComponent.razor" とします。


MyComponent.razor のコードは下記です。divタグの背景色の色を指定し、中に文字列を表示するシンプルなコンポーネントです。表示する文字列やカラーはcodeディレクティブ内で宣言された変数の値を利用します。今回のコードでは背景色を#003B75、文字色が#F0F0F0、divタグ内の文字列には「コンポーネントです」を表示します。

<div style="color:@color;background-color:@backcolor;">@caption</div>

@code {
  private string color = "#F0F0F0";
  private string backcolor = "#003b75";
  private string caption = "コンポーネントです";
}

_Imports.razor ファイルへの追加

作成したコンポーネントへの参照を追加します。_Imports.razor ファイルに @using (アプリケーションのネームスペース).Shared を追記します。

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using SimpleComponent.Shared

ページの作成

メイン画面のページを作成します。Pagesフォルダ内に "Main.razor" ファイルを作成します。Main.razorのコードは下記です。
<MyComponent />のコードが先に実装した MyComponent.razor コンポーネントを配置するコードになります。

@page "/Main"
<h3>Main</h3>
<p>メイン画面です。</p>
<MyComponent />

@code {

}

すべてのファイルが準備できた状態のソリューションエクスプローラーは下図になります。

実行結果

プロジェクトを実行します。Webブラウザが起動しますので、(アプリケーションルートURL)/Main のURLにアクセスします。下図のページが表示されます。
Main.razorファイルに記述した文字列が表示され、<MyComponent />のタグを記述した部分には、MyComponent.razor に実装した「コンポーネントです」の文字列が設定された文字色、背景色で表示されます。

補足

razor コンポーネントはコンポーネント化されているため、Main.razor を下記のようにMyComponentタグを複数記述できます。

@page "/Main"
<h3>Main</h3>
<p>メイン画面です。</p>
<MyComponent />
<MyComponent />
<MyComponent />
<MyComponent />
<MyComponent />

@code {

}

上記のMain.razor ファイルでBlazorアプリケーションを実行すると下図の画面になります。