ヒーローエディタ
雛形が出来上がりましたので、ヒーロー情報を表示するコンポーネントを作成し、アプリケーション内に配置してみます。
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>
こんなんできました
