大復活C#学習_Blazorはじめの一歩(1)
とりあえず@教科書の通りにはじめの一歩を進める。
寄り道して初心者向けの他の参考書はないか捜してみたが、web上の断片はあるもののまとまったチュートリアルや入門用書籍を見つけることができなかった。Maicrosoft Docsは難解で使えなかった。まだこのBlazorがかなりの新参者で一般的でないことを示しているのだろう。
前途は洋々というより難航するかもしれない予感(実は、すでに次に進む「クラスを使う」でエラーになって動けず、もう一度最初からやり直しているのが実情だ)。
手順は、
(1)新しいプロジェクトを作る(ここではBlazorBmiとした)
(2)ソリューションエクスプローラーの「Pages」を右クリックして、新しいBlazorコンポーネントを追加する。「Pages」フォルダーを右クリックして、コンテキストメニューの「追加」から「Razorコンポーネント」を選び、「BmiSimple.razor」名の新たなコンポーネントを作成する。
(3)「Pages」の「BmiSimple.razor」に「シンプルな表示」のコードを書き込む。
(4)サイドメニューの「シンプルな表示」項目を追加するために、「Shared」フォルダー内の「NavMenu.razor」を開き、一覧部分の<li>を改修して、「シンプルな表示」を追加する。
ーーーーーPages/BmiSimple.razorーーーーーーーーーーー
@page "/simple"
<h3>シンプルは表示</h3>
<table class="table">
<tr>
<td>名前</td>
<td>@name</td>
</tr>
<tr>
<td>身長</td>
<td>@height</td>
</tr>
<tr>
<td>体重</td>
<td>@weight</td>
</tr>
</table>
<div style="font-size: @fontSize">
計算結果は @bmi.ToString("00.00") です。
</div>
@code {
private string name = "月下野青羊";
private const double height = 171.0;
private const double weight = 74.4;
private double bmi = weight / ((height / 100.0) * (height / 100.0));
private string fontSize = "32px";
}
ーーーーーーーーーーーーーーーーーーーーーーーー
ーーShared/NavMenu.razorの改修・追加部分ーーーー
<li class= "nav-item px-3">
<NavLink class = "nav-link" href ="simple">
<span class="oi oi-list-rich" aria-hidden="true">
</span>シンプルな表示
</NavLink>
</li>
ーーーーーーーーーーーーーーーーーーーーーーーー