【Blazor】 RazorファイルをHTMLとC#に分割する

プロジェクト作成時に最初から存在するCounter.razorを分割していきます。 コードの初期状態は次のようになっています。

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

まず、ロジック側のコードを格納するCounter.razor.csというクラスを作成します。 その際、[分離するrazorのファイル名 + .cs]という命名規則に従ってC#のクラスを作成してください。 そうすると、razorファイルの傘下にcsファイルが自動的に入る仕組みになっています。

クラスを作成したら、razorファイルからロジック部分のコードをコピーして、 新しく作成したCounter.razor.csにペーストします。 そして、Counter.razor.csのクラスをPartialクラスへ変更します。

namespace Blazor_SplitComponent.Pages;

public partial class Counter
{
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

これで分離完了です。

継承元のクラスCounterBase.csを作成します。 Partialクラスを用いた場合と同様に、元のCounter.razorからC#のコード＆ペーストします。 razorファイルにロジック側のコードを継承するには、ComponentBaseクラスを継承している必要があるため、 それを継承するのを忘れないでください。

using Microsoft.AspNetCore.Components;

namespace Blazor_SplitComponent.Classes;

public class CounterBase : ComponentBase
{
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

コンポーネントに先ほど作成したクラスを継承していきます。 コンポーネントからロジック部分のクラスを継承するには、@inheritsを使用する必要があります。

@using Blazor_SplitComponent.Classes;

@inherits CounterBase

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

これで作業完了になります。

この記事では、BlazorコンポーネントのHTMLとC#コードを分割する2つの方法について説明しました。 お好きな方法で是非試してみてください。