環境
| OS | macOS Catalina 10.15.2 |
| ターゲットフレームワーク | .NET Core 3.1 |
| 開発環境 | Visual Studio Community 2019 for Mac (Preview) |
| プロジェクト種別 | Blazor Server |
プロジェクト作成
まず、Blazor Serverプロジェクトを作成します。
この段階で一度実行（▶︎）してみます。
無事、ブラウザにデフォルトのページが表示されました。
要素を動的に追加・削除する
さて、本題です。
ボタンのクリックで要素を動的に追加および削除できるようにしてみたいと思います。
Pages/Index.razorを以下のように編集します。
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<!-- ここから -->
<div style="background-color:#EEE; margin-top:1rem;">
<button @onclick="Add">追加</button>
<button @onclick="Remove">削除</button>
@foreach (var item in items)
{
<p>@item</p>
}
</div>
@code {
private List<int> items = new List<int>();
private void Add()
{
// リストに要素を追加する
items.Add(items.Count + 1);
}
private void Remove()
{
if (items.Count > 0)
{
// リストの最後の要素を削除する
items.RemoveAt(items.Count - 1);
}
}
}
<!-- ここまで -->この状態で再度実行（▶︎）してみます。
「追加」と「削除」ボタンが追加されました。
動作確認
「追加」ボタンを押すと、要素が動的に追加されていきます。
「削除」ボタンを押すと、要素が動的に削除されていきます。
無事、要素を動的に追加・削除出来ました。今までJavascriptまたはAjaxを駆使してやってきたことをこんなにも簡単に実装できてしまうことに驚きです。
次回はコンポーネントの動的な追加・削除を試してみたいと思います。（多分、ほぼ同じ要領で行けるはず 🙂 ）
続き
