1月8日(木)2コマ目
今日、やったこと
ASP.NET Core Razorページ
今日のホワイトボード
Webアプリケーション
Webアプリケーションは、クライアント-サーバーシステム。
広義のWebアプリケーションは「クライアントとサーバー間の通信プロトコルはHTTPまたはHTTPS」。
狭義のWebアプリケーションは上記＋「クライアントはWebブラウザ」。
|
| 図 Webアプリケーション |
この授業で作るWebアプリケーションは
- プログラムはサーバー側だけで動く
- クライアントはWebブラウザ
- Webブラウザはボタンクリック等でリクエスト送信
- Webブラウザは受信したレスポンスを表示するだけ
です。
.Net環境でWebアプリケーションをつくるには
Webアプリケーション作成に特化したフレームワークASP.NET Coreを使うのが楽ちん。
ASP.NET CoreにはWebアプリケーションを作るための手段がいろいろと用意されている。
この授業ではその中から、Razorページを使ってWebアプリケーションを作成する。
|
| 図 ASP.NET Core |
冬休み前に作ったDBアクセスアプリケーションで利用したODP.NET CoreはADO.NET Coreのオラクル特化版。
プロジェクト作成
慣れてしまえばなんてことはないのですが。
①VisualStudio起動
②新規プロジェクト作成
③テンプレート選択
選択するテンプレートはASP.NET Core Webアプリ(空)。
似たような名前のテンプレートがあるので注意！！
|
| 図 プロジェクト作成 テンプレートは"ASP.NET Core(空)" |
③プロジェクト名、保存場所指定
ここは今までとおなじ。
④追加情報
"HTTPS用の構成"のチェックを外す。
デフォルトではチェックが入っているので注意。
|
| 図 プロジェクト作成 "HTTPS用の構成"のチェックを外す |
⑤Program.cs編集
デフォルトではRazorページは使えない。Program.csを編集して、Razorページを使えるようにする。
Program.csはプロジェクト作成毎に編集する必要あり。めんどくさいが、同じ内容なので、コピペでOK。
プロジェクトにRazorページを追加する
RazorページはPagesフォルダ以下に配備する必要がある。
|
| 図 RazorページはPagesフォルダ以下に |
①プロジェクトにPagesフォルダ作成
②PagesフォルダにRazorページを追加
追加したRazorページの拡張子は .cshtml 。
コードブロック、コードナゲット
Razorページは
HTMLファイル中にC#のプログラムを埋め込める
イメージ。
C#のプログラムを埋め込む手段として、
- コードブロック
- コードナゲット
がある。
コードブロックは
@{ではじまり、}で終わる。
{ }内にC＃のプログラムが書ける。
@と{の間に
- for(・・)
- foreach(・・)
- while(・・)
- if(・・)
などが使える。
コードナゲットは変数やプロパティ、メソッド戻り値をHTMLに埋め込む。
以下のIndex.cshtmlはfor()で変数cntが0から9まで１ずつ増やしながら10回繰り返す。
繰り返し処理では<p></p>を出力。
コードナゲットで<p>と</p>の間に変数cntの値を埋め込む。
コードナゲットを使う際は、コードナゲットとHTMLの切れ目がわかるように、空白を上手に使うこと。
|
| 図 コードナゲットとHTMLの切れ目に空白を |
実行すると
実行すると、サーバーが起動してクライアントからのリクエストが処理できるようにする。
が、さらに、クライアント側としてWebブラウザを起動して、サーバーにリクエスト送信まで行っている。
|
| 図 実行すると |
サーバーにリクエスト送信すると、レスポンス(HTML)が返ってくる。
クライアント(Webブラウザ)はレスポンスを表示。
実行結果だけ見ると、Webブラウザだけで処理されているように見えるが、サーバーが動いていることに注意！！
次回は
Razorページの続き。
いい夢みろよ。
