[Microsoft] 番外. C#ソースコードとRazorの分離 - Angularチュートリアル Tour of Heroes を Blazor で再実装する

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

public partial class Dashboard
{
}

名前空間を決定する

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

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

Pages/Dashboard.razor.cs

namespace BlazorTourOfHeroes.Pages
{
    public partial class Dashboard
    {
    }
}

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

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

Pages/Dashboard.razor.cs

[Inject]
private IHeroService HeroService { get; set; }

コードを移動する

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

Pages/Dashboard.razor.cs

using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using BlazorTourOfHeroes.Model;
using BlazorTourOfHeroes.Service;
using Microsoft.AspNetCore.Components;

namespace BlazorTourOfHeroes.Pages
{
    public partial class Dashboard
    {
        [Inject]
        private IHeroService HeroService { get; set; }
        private IEnumerable<Hero> heroes;

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

        private async Task GetHeroesAsync()
        {
            heroes = (await HeroService.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>

1. コンポーネントではない場合はコンストラクタインジェクションになります。 ↩