Blazor アプリケーションのRazorコンポーネントにパラメーターを与える

Blazor アプリケーションのRazorコンポーネントにパラメーターを与えるコードを紹介します。

概要

こちらの記事ではBlazorアプリケーションでコンポーネントを利用する方法を紹介しました。この記事では、コンポーネントに対してパラメーターを与えたい場合のコンポーネントの実装方法を紹介します。

プログラム

事前準備

こちらの記事を参照してASP.NET Core Web アプリケーションプロジェクトを作成し、Blazor アプリケーションを作成します。
パラメーターを受け取れるようにするためには、razorコンポーネント側にPuclicプロパティを実装します。呼び出し元はコンポーネントのタグを記述する際に、タグの属性値でプロパティとそのプロパティに与える値を記述します。

コンポーネントの実装

プロジェクトのShared フォルダにrazorコンポーネントを作成します。今回はファイル名を "MyParamComponent.razor"とします。
MyParamComponent.razorのコードは下記になります。
text,textColor がプロパティになります。プロパティがpuclic宣言されていますので、コンポーネントの呼び出し元からプロパティにアクセスできるようになります。

MyParamComponent.razor

<span style="color:@textColor;">出力:@text</span>
@code {
  [Parameter]
  public string text { get; set; }

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

}

呼び出し元 razorページの実装

コンポーネントを呼び出すrazorページを実装します。プロジェクトのPagesフォルダ内にrazorコンポーネントを作成します。今回はファイル名を "ParamComponent.razor" とします。コードは下記になります。
MyParamComnponentを3つ配置しています。コンポーネントのパラメータはタグの属性値で指定します。MyParamComponentにはtextプロパティとtextColorプロパティを実装していますので、属性値でこの2つの値を設定しています。

ParamComponent.razor

@page "/ParamComponent"
<h3>コンポーネントの呼び出し</h3>

<MyParamComponent text="ぺんぎんクッキー" textColor="#69c759" />
<hr />
<MyParamComponent text="らくだキャラメル" textColor="#d98f00" />
<hr />
<MyParamComponent text="しろくまアイス" textColor="#cd4aaa" />
<hr />
@code {
}

実行結果

上記のアプリケーションを実行します。Webブラウザが起動しますので、(アプリケーションルートURL)/ParamComponent のURLにアクセスします。下図の画面が表示されます。
「出力:(textプロパティの値)」の文字列が3つ表示されており、MyParamComponent の3つの呼び出しが実行されていることが確認できます。コンポーネント内の表示文字列や文字列の文字色が呼び出し元の画面の"ParamComponent.razor"で与えたパラメーターの値であることも確認できます。コンポーネントに対してパラメータを与えられていることが確認できました。

Razorコンポーネントに対して、パラメーター値(プロパティ値)を渡すプログラムを作成できました。

参考：他のコード

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

    }
  }
}

_Imports.razor

@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

App.razor

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" />
    </Found>
    <NotFound>
        <LayoutView>
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

_Host.cshtml

@page
@model SimpleComponent.Pages._HostModel
@{
}
@namespace SimpleComponent.Pages

<!DOCTYPE html>
<html lang="ja">
<head>
    <base href="~/" />
</head>
<body>
    <app>
        @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
    </app>
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

著者

Penta

iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

目次