機能コンポーネントを作成する
作成したHeroesコンポーネントを、一覧部分と詳細部分に分けます。
HeroDetailコンポーネントを作成する
dotnet cliで作成します。
dotnet new razorcomponent --output BlazorTourOfHeroes/Shared --name HeroDetail
テンプレート部分を作成する
HeroDetailコンポーネントのテンプレート部分を作成します。
Shared/HeroDetail.razor
@if (Hero != null)
{
<h2>@Hero.Name.ToUpper() Details</h2>
<div><span>Id: </span>@Hero.Id</div>
<div>
<label>Name:
<input @bind="Hero.Name" placeholder="name"/>
</label>
</div>
}
[Parameter]アノテーションをつける
外部からHeroオブジェクトを受け取るために、[Parameter]アノテーションをつけたHeroプロパティを作成します。
Shared/HeroDetail.razor
[Parameter]
public Hero Hero { get; set; }
HeroDetailコンポーネントを表示する
Heroesコンポーネントにある詳細表示部分をHeroDetailコンポーネントに置き換えます。
Heroコンポーネントを変更する
詳細表示部分をHeroDetailコンポーネントに置き換えます。
Shared/Heroes.razor
<HeroDetail Hero="selectedHero"></HeroDetail>
テンプレート全体はこのようになります。
Shared/Heroes.razor
<h2>My Heroes</h2>
<ul class="heroes">
@foreach (var hero in heroes)
{
<li @onclick="@(_ => OnSelect(hero))"
class="@(selectedHero == hero ? "selected" : "")"
><span class="badge">@hero.Id</span> @hero.Name
</li>
}
</ul>
<HeroDetail Hero="selectedHero"></HeroDetail>
なにが変わった？
一覧表示をHeroesコンポーネント、詳細表示をHeroDetailコンポーネントとして分けたことで、メンテナンス性が良くなりました。
こんなんできました
Shared/Heroes.razor
@using BlazorTourOfHeroes.Model
<h2>My Heroes</h2>
<ul class="heroes">
@foreach (var hero in heroes)
{
<li @onclick="@(_ => OnSelect(hero))"
class="@(selectedHero == hero ? "selected" : "")"
><span class="badge">@hero.Id</span> @hero.Name
</li>
}
</ul>
<HeroDetail Hero="selectedHero"></HeroDetail>
@code {
private List<Hero> heroes = MockHeroes.Create();
private Hero selectedHero = null;
private void OnSelect(Hero hero)
{
selectedHero = hero;
}
}
Shared/HeroDetail.razor
@using BlazorTourOfHeroes.Model
@if (Hero != null)
{
<h2>@Hero.Name.ToUpper() Details</h2>
<div><span>Id: </span>@Hero.Id</div>
<div>
<label>Name:
<input @bind="Hero.Name" placeholder="name"/>
</label>
</div>
}
@code {
[Parameter]
public Hero Hero { get; set; }
}