C#ソースコードとRazorの分離

今までRazorファイル中に@code {}としてC#プログラムを書いていました。

Page/Dashboard.razor

@page "/dashboard"
@using BlazorTourOfHeroes.Model
@using BlazorTourOfHeroes.Service
@inject IHeroService HeroService

<h3>Top Heroes</h3>
<div class="grid grid-pad">
    @foreach (var hero in heroes)
    {
      <NavLink href="@("detail/" + hero.Id)" class="col-1-4">
        <div class="module hero">
        <h4>@hero.Name</h4>
        </div>
      </NavLink>
    }
</div>

@code {
    private IEnumerable<Hero> heroes;

    protected override async Task OnInitializedAsync()
    {
        await GetHeroesAsync();
    }

    private async Task GetHeroesAsync()
    {
        heroes = (await HeroService.GetHeroes()).Take(5);
    }
}

このままでも問題ありませんが、長くなると見にくくなりますので、C#プログラムを別ファイルに分離します。

部分クラスとして別ファイルに分離する

C#プログラムをpartial classとして別ファイルにします。

ファイル名を決定する

ファイル名はコンポーネントにあわせてコンポーネント名.razor.csにします。

クラス名を決定する

クラス名はコンポーネントと同一にします。

Pages/Dashboard.razor.cs

publicpartialclassDashboard{}

名前空間を決定する

クラスの名前空間は以下のルールによって決まります。

Razorファイルに@namespaceがある場合はその名前
プロジェクトのルート名前空間 + razorファイルが存在するフォルダ名

Pages/Dashboard.razor.cs

namespaceBlazorTourOfHeroes.Pages{publicpartialclassDashboard{}}

依存するクラスを注入する

コンポーネントの場合はプロパティインジェクションになります。¹

Pages/Dashboard.razor.cs

[Inject]privateIHeroServiceHeroService{get;set;}

コードを移動する

Razorファイルにある@code {}の中身を新しく作成したC#ファイルに移動します。
必要なusing句を追加します。

Pages/Dashboard.razor.cs

usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Threading.Tasks;usingBlazorTourOfHeroes.Model;usingBlazorTourOfHeroes.Service;usingMicrosoft.AspNetCore.Components;namespaceBlazorTourOfHeroes.Pages{publicpartialclassDashboard{[Inject]privateIHeroServiceHeroService{get;set;}privateIEnumerable<Hero>heroes;protectedoverrideasyncTaskOnInitializedAsync(){awaitGetHeroesAsync();}privateasyncTaskGetHeroesAsync(){heroes=(awaitHeroService.GetHeroes()).Take(5);}}}

razorファイルを整理する

Razorファイルから不要になった@usingや@injectを削除します。

Pages/Dashboard.razor

@page "/dashboard"

<h3>Top Heroes</h3>
<div class="grid grid-pad">
    @foreach (var hero in heroes)
    {
      <NavLink href="@("detail/" + hero.Id)" class="col-1-4">
        <div class="module hero">
        <h4>@hero.Name</h4>
        </div>
      </NavLink>
    }
</div>