Grow up

生活とプログラミング

.Net Core MVC を使った初めてのWebアプリ開発 #2

f:id:knkomko:20190912123325p:plain:w500

はじめに

#1 ではWebアプリの仕組みとMVCの設計についてまとめました。
knkomko.hatenablog.com

#2からWebアプリの開発についてソースコードを用いて説明します。
ソースコードASP.NET Core MVC の概要 | Microsoft Docsを参考にしています。

目次

1.Webアプリの作成
2.コントローラの追加
3.ルーティング
4.パラメータの指定

1. Webアプリの作成

[新しいプロジェクトの作成]を左クリックします。
f:id:knkomko:20190911214147p:plain:w350

プロジェクト名に「MvcMovie」と入力して[作成(C)]を左クリックします。
f:id:knkomko:20190911213945p:plain:w350

[Webアプリケーション (モデル ビュー コントローラー)]を左クリックします。
f:id:knkomko:20190911214411p:plain:w350

MVCの設計を使用したサンプルプログラムが自動で作成されます。
MVCに対応するControllers、Models、Viewsのフォルダがあります。
それぞれのフォルダにプログラムを作成していきます。
f:id:knkomko:20190911215253p:plain:w350

●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フォルダを右クリックして表示されたメニューから[コントローラー]を左クリックします。
f:id:knkomko:20190911230216p:plain:w350

[MVC コントローラー - 空]を選択して[追加]を左クリックします。
f:id:knkomko:20190911230838p:plain:w350

コントローラー名を「HelloWorldController」として[追加]を左クリックします。
コントローラーを作る際には名前の末尾に「Controller」の記載が必要です。
f:id:knkomko:20190911231020p:plain:w350

作成した「HelloWorldController」を開きます。
f:id:knkomko:20190911231729p:plain:w350

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
数字部分のポート番号は実行環境で変わるので実行時の番号に合わせてください。
f:id:knkomko:20190911233805p:plain:w450

以下のURLにアクセスするとHelloWorldControllerのWelcome()が呼び出されます。
https://localhost:44370/HelloWorld/welcome
f:id:knkomko:20190911234214p:plain:w450

https://localhost:44370/HelloWorld/にアクセスした時は図のような動作です。
現在はコントローラーのみが動作しています。
f:id:knkomko:20190911234944p:plain:w450

3. ルーティング

URLとコントローラを結びつけることをルーティングと呼びます。
ルーティングはStartup.csファイルのConfigureメソッドで行われています。
f:id:knkomko:20190911234504p:plain:w450

https://localhost:44370/HelloWorld/のようにIndexを省略してもhttps://localhost:44370/HelloWorld/Indexと同じ動作となるのは、Indexというアクションメソッドを省略した場合はIndexを規定値として呼び出すようにルーティングの設定が行われているためです。

ルーティングは以下のように設定されています。
赤はコントローラー、青はアクションメソッドの設定になります。
f:id:knkomko:20190912002209p:plain:w450

ルーティングのイコールで指定している部分が省略した時の規定値になります。
https://localhost:44370/ではHomeController(コントローラの規定値)のIndex(アクションメソッドの規定値)が呼び出されます。
f:id:knkomko:20190912004202p:plain:w450

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(クロスサイトスクリプティング)と言って悪意のある攻撃として使われるため、フレームワーク上にエスケープする機能が用意されています。

赤下線が追加する記述になります。
f:id:knkomko:20190914023207p:plain:w450

以下の様にnameとnumtimesの引数に値を入力することでパラメータを渡します。
https://localhost:44370/HelloWorld/welcome?name=makoto&numtimes=4

上記URLにアクセスした結果は画像のようになります。
f:id:knkomko:20190914022640p:plain:w450

まとめ

#2ではWebアプリの作成、コントローラーの追加、ルーティング、パラメータの指定についてまとめました。
#3ではコントローラーからビューを呼び出します。