大復活C#学習_Blazorはじめの一歩(1)

f:id:yasui_swift:20210417045033p:plain

はじめの一歩の本当の最初

とりあえず@教科書の通りにはじめの一歩を進める。

寄り道して初心者向けの他の参考書はないか捜してみたが、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>

ーーーーーーーーーーーーーーーーーーーーーーーー