5月11日（火）1、2コマ目
今日、やったこと
コードブロック、コードナゲット
今日のホワイトボード
Razorページのプロジェクト作成
前回はテンプレートに「ASP.NET Core Webアプリ」を選択しました。
このテンプレートは余分なモノが結構あるため、これからは「ASP.NET Core（空）」を選択してください。
また、「HTTPS用の構成」にデフォルトでチェックが入っています。チェックを外してください。
 |
| 図 Razorページのプロジェクト作成 |
Razorプロジェクトのフォルダ構成
RazorページはPagesフォルダ内に保存します。
画像ファイルやHTMLファイル、CSSファイル等の静的ファイルはwwwrootフォルダ以下に保存します。
プロジェクト作成後、まずはStartup.csを編集してください。
 |
| 図 Razorページプロジェクトのフォルダ構成 |
コードブロック
～.cshtml内で@{ }内にはC#のコードが書けます。
ただし、HTMLタグで始まる行はHTMLとみなします。
この@{ }をコードブロックと呼びます。
コードブロックには@for(・・){ }や@foreach(・・){ }の繰り返し、@if(・・){ }の条件分岐があります。
 |
| 図 コードブロック |
コードナゲット
HTML中に @変数名 や @メソッド名() と書くと、変数データやメソッド戻り値をHTMLに埋め込むことができます。
コードナゲットは @で始まり、C#の名前に使えない文字までです。
不用意に使うとここでハマりますのでご注意を。
また、@( )のように( )で括ると( )内をさきに実行します。
 |
| 図 コードナゲット |
使ってはいけないアイテムにされたりしますが、コードナゲットとの組み合わせは結構協力です。
 |
| 図 3項演算子 |
演習
コードブロック、コードナゲットを使った演習をしました。
練習１
繰り返しのコードブロック(@for(){ })と明示的なRazor式で作成可能。
練習2
画像ファイルは静的ファイル。よって、以下が必要。
Startup.csのConfigure()メソッドにて、app.UseStaticFiles()実行
wwwrootディレクトリ作成(静的ファイルはここに配備)
wwwrootの下にimagesディレクトリ作成
画像ファイルはimagesディレクトリへ
また、画像の表示は<img>タグを使う。
練習3
5×10の表。
セルの背景色は<TD>で指定。
コメント