選択肢リストを表示する
ヒーローの一覧を表示できるようにします。
一覧からヒーローを選択すると、詳細が表示されるようにします。
ヒーローたちのモックを作成する
ヒーローのリストを返すクラスを作成しました。
Model/MockHeroes.cs
usingSystem.Collections.Generic;namespaceBlazorTourOfHeroes.Model{publicclassMockHeroes{publicstaticList<Hero>Create()=>newList<Hero>{newHero{Id=11,Name="Dr Nice",},newHero{Id=12,Name="Narco"},newHero{Id=13,Name="Bombasto"},newHero{Id=14,Name="Celeritas"},newHero{Id=15,Name="Magneta"},newHero{Id=16,Name="RubberMan"},newHero{Id=17,Name="Dynama"},newHero{Id=18,Name="Dr IQ"},newHero{Id=19,Name="Magma"},newHero{Id=20,Name="Tornado"},};}}ヒーローたちを表示する
Heroesコンポーネントにheroes変数を追加します。
Shared/Heroes.razor
private List<Hero> heroes = MockHeroes.Create();
ヒーローたちを一覧する
foreachでヒーローたちをイテレートします。
Shared/Heroes.razor
<h2>My Heroes</h2>
<ul class="heroes">
@foreach (var hero in heroes)
{
<li><span class="badge">@hero.Id</span> @hero.Name </li>
}
</ul>
ヒーローたちにスタイルをあてる
全体共通のスタイルシートを編集します。
Anguarのチュートリアルからコピペしました。
こんなんできました
詳細表示を作成する
一覧をクリックしたら、詳細を表示するようにします。
クリックイベントをバインドする
<li>タグにクリックイベントを追加します。
引数を渡したいので、ラムダにします。
Shared/Heroes.razor
<li @onclick="@(_ => OnSelect(hero))">
クリックイベントハンドラを作成する
選択されたヒーローを格納する変数とイベントハンドラを作成します。
Shared/Heroes.razor
private Hero selectedHero;
private void OnSelect(Hero hero)
{
selectedHero = hero;
}
詳細表示部分を追加する
選択されたヒーローを表示するようにします。
Shared/Heroes.razor
<h2>@selectedHero.Name.ToUpper() Details</h2>
<div><span>Id: </span>@selectedHero.Id</div>
<div>
<label>Name:
<input @bind="selectedHero.Name" placeholder="name"/>
</label>
</div>
ここで実行すると、ブラウザのコンソールにぬるぽが出力されました。
crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Object reference not set to an instance of an object.
System.NullReferenceException: Object reference not set to an instance of an object.
at BlazorTourOfHeroes.Shared.Heroes.BuildRenderTree (Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder) <0x2c456d0 + 0x00246> in <filename unknown>:0
at Microsoft.AspNetCore.Components.ComponentBase.<.ctor>b__6_0 (Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder builder) <0x2b30640 + 0x0001a> in <filename unknown>:0
at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch (Microsoft.AspNetCore.Components.Rendering.RenderBatchBuilder batchBuilder, Microsoft.AspNetCore.Components.RenderFragment renderFragment) <0x2b2ff78 + 0x00054> in <filename unknown>:0
at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch (Microsoft.AspNetCore.Components.Rendering.RenderQueueEntry renderQueueEntry) <0x2b2da88 + 0x0004c> in <filename unknown>:0
at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue () <0x2b2d1c8 + 0x00092> in <filename unknown>:0 blazor.webassembly.js:formatted:2093
ぬるぽを修正
selectedHeroがnullのときは、詳細部分を出力しないようにします。
Shared/Heroes.razor
@if (selectedHero != null)
{
<h2>@selectedHero.Name.ToUpper() Details</h2>
<div><span>Id: </span>@selectedHero.Id</div>
<div>
<label>Name:
<input @bind="selectedHero.Name" placeholder="name"/>
</label>
</div>
}
選択中のヒーローにスタイルをあてる
class属性の中でRazor構文を使います。
Shared/Heroes.razor
<li @onclick="@(_ => OnSelect(hero))"
class="@(selectedHero == hero ? "selected" : "")"
><span class="badge">@hero.Id</span> @hero.Name
</li>
こんなんできました
