7月7日(火)1、2コマ目
今日、やったこと
Razorページ
今日のホワイトボード
Webアプリケーションをつくるには
静的なHTMLだけでは無理。
ちまたにはHTMLにプログラミング要素が追加できる手段がいくつか用意されている。
この授業ではASP.NET Coreで用意されているRazorページを利用する。
Razorページのプロジェクトフォルダ
Startup.csの編集が必要。
RazorページはPagesディレクトリ以下に配備。
Razorページを追加すると以下の２つのファイルができる。
〇～.cshtml
HTMLにコードブロックやコードナゲットを使って、C#のプログラムや変数をHTMLに埋め込むことができる。
〇～.cshtml.cs
～.cshtmlからGETやPOSTコマンドを送信されたときのプログラムをここに記述する。
コードブロック・コードナゲット
～.cshtmlにHTMLとともに記述できる。
〇コードブロック
C#のプログラムを書く。
〇コードナゲット
変数、プロパティやメソッド実行結果を埋め込む。
明示的なRazor式
たとえば、変数cntの値をHTMLに埋め込みたいなら、コードナゲットでできる。
<p>@cnt</p>
出力結果は（変数cntが2の場合）
2
となる。
しかし、変数cntの値を＋１した結果をHTMLに埋め込みたい場合、以下のように書くと
<p>@cnt+1</p>
出力結果は（変数cntが２の場合）
2+1
となる。
計算した結果のように 式を実行した結果 をHTMLに埋め込みたい場合は、明示的なRazor式を使う。
<p> @(cnt+1)</p>
@( )のカッコ内に式を書くと、その結果を埋め込むことができる。
意外と便利な3項演算子
3項演算子は以下のように書く。
条件式 ? 式１ : 式2
まず、条件式を評価。
結果が真なら式１を、偽なら式２を実行し、結果を変えす。
ちまたでは見づらいからやめたほうがいいとか言われている。
- ifの代わりとして使わない(式1、式2が長くなりやすい)
- ネストさせない(式1または式2でさらに3項演算子)
を守れば使ってもいいのではと思っている。
以下のようにテーブルの各行の背景色を交互に入れ替えたいときのように、２つの値を簡単な条件の結果で埋め込む場合なんかは有効だと思う。
<html>
<head>
<style>
.odd { background : 奇数行の背景色 ; }
.even { background : 偶数行の背景色 ; }
</style>
</head>
<body>
<table>
@for(int cnt=0 ; cnt<10 ; cnt++)
{
<tr class="@(cnt%2==0 ? "even" : "odd")">
<td>・・</td>
</tr>
}
</table>
</body>
</html>
コメント