ヒーローエディタ

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

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

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

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

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

<h3>Heroes</h3>

@code {

}

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

hero変数を追加する

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

privatestringhero="Windstorm";

heroを表示する

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

@hero

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

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

<Heroes></Heroes>

こんなんできました

Heroクラスを作成する

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

namespaceBlazorTourOfHeroes.Model{publicclassHero{publicintId{get;set;}publicstringName{get;set;}}}

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

@using BlazorTourOfHeroes.Model

@hero

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

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

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

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

hero名を大文字にする

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

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

こんなんできました。

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

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

バインディング

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

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

こんなんできました