.Net Core MVC を使った初めてのWebアプリ開発 #2
はじめに
#1 ではWebアプリの仕組みとMVCの設計についてまとめました。
knkomko.hatenablog.com
#2からWebアプリの開発についてソースコードを用いて説明します。
ソースコードはASP.NET Core MVC の概要 | Microsoft Docsを参考にしています。
目次
1.Webアプリの作成
2.コントローラの追加
3.ルーティング
4.パラメータの指定
1. Webアプリの作成
[新しいプロジェクトの作成]を左クリックします。
プロジェクト名に「MvcMovie」と入力して[作成(C)]を左クリックします。
[Webアプリケーション (モデル ビュー コントローラー)]を左クリックします。
MVCの設計を使用したサンプルプログラムが自動で作成されます。
MVCに対応するControllers、Models、Viewsのフォルダがあります。
それぞれのフォルダにプログラムを作成していきます。
●wwwroot
ブラウザ上で処理を行うjQueryやデザインで使用するBootstrapなどのライブラリ(機能を提供するプログラム群)が保存されています。
使いたいライブラリがあればこちらに保存して参照する事で使用が可能です。
●依存関係
Webサーバー上で処理を行う.Net Coreで利用するライブラリが保存されています。
Nuget(にゅーげっと)と呼ばれるパッケージマネージャからライブラリをインストールすると依存関係に保存されます。
●Controllers
MVCのコントローラーのプログラムを保存します。
●Models
MVCのモデルのプログラムを保存します。
●Views
MVCのビューのプログラムを保存します。
●appsettings.json
プログラムから読み出す設定値を保存するファイルが保存されています。
json形式のテキストファイルなので後で値を変更する場合に使用します。
●Program.cs
一番はじめに実行されるプログラムが記述されています。
●Startup.cs
Program.csのMain()によって呼び出されWebアプリケーションの設定を行うプログラムが記述されています。
ログイン機能の開発でクッキー認証を利用する場合など、必要に応じて使用します。
2. コントローラの追加
Controllersフォルダを右クリックして表示されたメニューから[コントローラー]を左クリックします。
[MVC コントローラー - 空]を選択して[追加]を左クリックします。
コントローラー名を「HelloWorldController」として[追加]を左クリックします。
コントローラーを作る際には名前の末尾に「Controller」の記載が必要です。
作成した「HelloWorldController」を開きます。
HelloWorldControllerにWelcomeアクションメソッドを追加します。
using Microsoft.AspNetCore.Mvc; using System.Text.Encodings.Web; namespace MvcMovie.Controllers { public class HelloWorldController : Controller { // // GET: /HelloWorld/ public string Index() { return "This is my default action..."; } // // GET: /HelloWorld/Welcome/ public string Welcome() { return "This is the Welcome action method..."; } } }
URLからコントローラを呼び出してWebページを表示してみます。
後ほど説明をしますがURLとコントローラの対応は以下のようになっています。
https://localhost:[ポート番号]/[コントローラ]/[アクションメソッド]
Webアプリケーションを実行した状態で以下のどちらかのURLにアクセスするとHelloWorldControllerのIndex()が呼び出されます。
https://localhost:44370/HelloWorld/
https://localhost:44370/HelloWorld/Index
数字部分のポート番号は実行環境で変わるので実行時の番号に合わせてください。
以下のURLにアクセスするとHelloWorldControllerのWelcome()が呼び出されます。
https://localhost:44370/HelloWorld/welcome
https://localhost:44370/HelloWorld/にアクセスした時は図のような動作です。
現在はコントローラーのみが動作しています。
3. ルーティング
URLとコントローラを結びつけることをルーティングと呼びます。
ルーティングはStartup.csファイルのConfigureメソッドで行われています。
https://localhost:44370/HelloWorld/のようにIndexを省略してもhttps://localhost:44370/HelloWorld/Indexと同じ動作となるのは、Indexというアクションメソッドを省略した場合はIndexを規定値として呼び出すようにルーティングの設定が行われているためです。
ルーティングは以下のように設定されています。
赤はコントローラー、青はアクションメソッドの設定になります。
ルーティングのイコールで指定している部分が省略した時の規定値になります。
https://localhost:44370/ではHomeController(コントローラの規定値)のIndex(アクションメソッドの規定値)が呼び出されます。
4. パラメータの指定
アクションメソッドに引数をもたせる事でパラメータを受け取ることができます。
HelloWorldController のWlcomeに name と numTimes の引数を追加します。
welcomeのアクションメソッドでは引数で与えられた name と numtimes を表示します。
// GET: /HelloWorld/Welcome/ // Requires using System.Text.Encodings.Web; public string Welcome(string name, int numTimes = 1) { return HtmlEncoder.Default.Encode($"Hello {name}, NumTimes is: {numTimes}"); }
using System.Text.Encodings.Web; を追記して HtmlEncoder を使用します。
HtmlEncoderではパラメータにJavaScriptを入力された場合に無意味な文字列に変換(エスケープ)します。
URLからJavaScriptを実行することをXXS(クロスサイトスクリプティング)と言って悪意のある攻撃として使われるため、フレームワーク上にエスケープする機能が用意されています。
赤下線が追加する記述になります。
以下の様にnameとnumtimesの引数に値を入力することでパラメータを渡します。
https://localhost:44370/HelloWorld/welcome?name=makoto&numtimes=4
上記URLにアクセスした結果は画像のようになります。
まとめ
#2ではWebアプリの作成、コントローラーの追加、ルーティング、パラメータの指定についてまとめました。
#3ではコントローラーからビューを呼び出します。