Blazorアプリケーションで画面のHTML(razor, cshtml) と C#ロジックのコードを別ファイルに分離する - C#ロジックのコードビハインド化

Blazorアプリケーションで画面のHTML(cshtml) と C#ロジックのコードを別ファイルに分離する(コードビハインド化)コードを紹介します。

概要

Blazorアプリケーションでは、画面のrazorコンポーネント内に直接C#のロジックを記述して処理を実装できます。しかし、処理の量が増えるとファイルが大きくなり可読性が落ちます。また、画面と独立した処理は別のファイルに切り出して分離したい場合もあります。この記事ではBlazorアプリケーションのrazorコンポーネントでHTMLのビューのコードとC#のロジック実装を別のファイルに分離する手順やコードを紹介します。

プログラム

事前準備 : プロジェクトの作成

ASP.NET Core Webアプリケーションを作成します。作成したアプリケーションにrazorコンポーネントを追加しボタンクリックの処理ができるBlazorアプリケーションを作成します。具体的な手順はこちらの記事を参照して下さい。

各コードの設定

Blazorアプリケーションで必要となるファイルのコードを編集します。

_Host.cshtml

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

_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

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>

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 SeparateCode
{
  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.AddHttpClient();
      //services.AddSingleton<Service>();
      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.UseHttpsRedirection();
      app.UseStaticFiles();
      app.UseRouting();

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

ページ(画面)のrazorファイルの追加

メイン画面のrazorファイルを追加します。Pagesフォルダ内に Main.razorファイルを作成します。下記のコードを記述します。
ロジック部をC#のコードと分離するため @inherits ディレクトティブを記述し、Main.razorがロジッククラスの継承オブジェクトである旨を指定します。
ぺージでは最初の段落には @MessageTextを記述しMessageText変数の内容を画面に表示します。後半部分はbuttonタグを記述しボタンを配置しています。ボタンをクリックした場合は@onclickに記述している ButtonClick メソッドを呼び出します。このメソッドは後述する MainModel.csに実装しているメソッドになります。

Main.razor

@page "/Main"
@inherits MainModel

<h3>Main</h3>
<p>メイン画面です。</p>

<p>@MessageText</p>
<button class="" @onclick="ButtonClick">Button1</button>

ページ(画面)のC#コードの追加

メイン画面の処理を記述するC#のコードファイルを追加します。今回はPagesフォルダ内に MainModel.cs というファイル名でC#のコードファイルを追加します。
また、今回ファイル名を MainModel.cs としていますが、ページとコードが1対1で対応したコードビハインドで実装する場合は、razorファイル名と同じ Main.razor.cs というファイル名にするとソリューションエクスプローラー上で Main.razorとグルーピングされファイル管理がしやすくなります。
ファイルの内容は下記のとおりです。
OnParameterSet()メソッドがページが読み込まれた際にパラメーターの初期化をするメソッドです。MessageText 変数の初期状態はこちらのメソッドで設定します。
ButtonClick()メソッドはUIのボタンをクリックした際に呼び出されるメソッドとして実装しています。ボタンがクリックされた際にMessageText変数の内容を書き換える処理をします。

MainModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using System.Net.Http;

namespace SeparateCode.Pages
{
  public partial class MainModel : ComponentBase
  {
    public string MessageText { get; set; }

    protected override void OnParametersSet()
    {
      MessageText = "Hello! from MainModel.cs";
    }
   
    public void ButtonClick()
    {
      MessageText = "ボタンがクリックされました。";
    }
    
  }
}

実行結果

プロジェクトを実行します。Webブラウザが起動しますので (アプリケーションルートURL)/Main のURLを開きます。下図のページが表示されます。OnParametersSet() メソッドでMessageText変数に設定された "Hello! from MainModel.cs" の文字列が表示されることが確認できます。