1月9日(金)1、2コマ目
今日、やったこと
コードブロック
コードナゲット
静的ファイル(画像ファイル)を使う
[練習問題]コードブロック・コードナゲット1～3
今日のホワイトボード
[コードナゲット]計算結果を埋め込みたい
@(計算式)だと、
①まず( )内の計算式を実行
②計算結果を埋め込む
の順で実行される。
 |
| 図 コードナゲットで計算結果を埋め込む |
Index.cshtml
表示すると以下のように 変数cnt+1 の結果が表示されている。
|
| 図 コードナゲットで計算結果を埋め込む |
画像を表示したい
画像ファイルやHTMLファイル、cssファイル、JavaScriptファイルなどの静的ファイルは
- wwwrootフォルダ以下に配備
- Program.csにapp.UseStaticFiles()を追加
する。
 |
| 図 画像を表示する |
Program.cs
静的ファイルを使うときは、app.UseStaticFiles()を追加。
Index.cshtml
表示すると、以下のように変数cnt.pngファイルが表示される。
|
| 図 画像ファイルを表示する |
表示値によって、背景色を変えたい
下図にように、表示値が
- 偶数なら、背景色は青色
- 奇数なら、背景色は緑色
にしたい。
|
| 図 表示値によって背景色が異なる |
〇<style>タグにて、クラスごとの設定
<td>タグに"blue"クラス または "green"クラスを指定すれば背景色が変わるようにした。
方法1 @ifコードブロックを使う
@ifコードブロックは条件分岐のためのコードブロック。
Index.cshtml
@ifで出力する内容のうち、違うのはクラス名だけ。
ちょっと、大げさな感じがする。
方法2 コードナゲット＋3項演算子
条件分岐のなかに、3項演算子がある。
コードナゲット＋3項演算子で結構シンプルに書くことができる。
 |
| 図 コードナゲット＋3項演算子 |
Index.cshtml
※3項演算子をネスト構造にしないこと。
[練習問題]コードブロック・コードナゲット1～3
正解例をあげておきます。
コードブロック・コードナゲット1
コードブロック・コードナゲット2
1～9の10の位は0。10で割った答え(商)は0。
画像ファイル(静的ファイル)を使うので、Program.csにapp.UseStaticFiles()を追加。
コードブロック・コードナゲット3
次回は
Razorページのテスト。
