[Microsoft] 1. ヒーローエディタ - Angularチュートリアル Tour of Heroes を Blazor で再実装する

ヒーローエディタ

雛形が出来上がりましたので、ヒーロー情報を表示するコンポーネントを作成し、アプリケーション内に配置してみます。

---

Heroesコンポーネントを作成する

dotnet cliを使ってrazorコンポーネントを作成します。

dotnet new razorcomponent --output BlazorTourOfHeroes/Shared --name Heroes

既存の BlazorTourOfHeroes/Shared ディレクトリの中に Heroes.razor ファイルが出来上がります。

Shared/Heroes.razor

<h3>Heroes</h3>

@code {

}

（ @Qiita さんrazorシンタックスハイライト待ってます）

hero変数を追加する

コンポーネントにhero変数を追加します。

    private string hero = "Windstorm";

heroを表示する

既存のHTMLタグを消去して、hero変数に置き換えます。

@hero

Heroesコンポーネントを表示する

Heroesコンポーネントをトップページに表示するため、index.razorを変更します。

Pages/Index.razor

<Heroes></Heroes>

こんなんできました

Heroクラスを作成する

名前以外の属性を格納するためHeroクラスを作成します。

Model/Hero.cs

namespace BlazorTourOfHeroes.Model
{
    public class Hero
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

Heroesコンポーネントに戻り、作成したHeroクラスを使うようにリファクタリングします。

Shared/Heroes.razor

@using BlazorTourOfHeroes.Model

@hero

@code {
    private Hero hero = new Hero
    {
        Id = 1,
        Name = "Windstorm",
    };
}

heroオブジェクトを表示する

テンプレートを変更してheroオブジェクトを表示するようにします。

Shared/Heroes.razor

<h2>@hero.Name</h2>
<div><span>id: </span>@hero.Id</div>
<div><span>name: </span>@hero.Name</div>

hero名を大文字にする

大文字にするのは、String.ToUpper()を呼ぶだけです。

Shared/Heroes.razor

<h2>@hero.Name.ToUpper()</h2>

こんなんできました。

heroを編集できるようにする

<input>テキストボックスを用意してheroを編集できるようにします。

バインディング

Heroesコンポーネントをリファクタリングして次のようにします。

Shared/Heroes.razor

<div><label>name: <input @bind="hero.Name" placeholder="name" /></label></div>

こんなんできました