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

はじめに

#2 ではコントローラーとルーティングついてまとめました。
knkomko.hatenablog.com

#3 はビューについて解説していきます。
ソースコードはASP.NET Core MVC の概要 | Microsoft Docsを参考にしています。

目次

1. ビューの追加

Viewフォルダを右クリックして[追加]から[新しいフォルダー]を左クリックします。
フォルダーの名前は「HelloWorld」で作成します。

Viewフォルダ内に作成した[HelloWorld]フォルダを右クリックして[追加]から[新しい項目]を左クリックします。

[Razor ビュー]を選択して「Index.cshtml」の名前で[追加]を左クリックします。

Index.cshtmlの内容を次のコードに置き換えます。

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

次に HelloWorldController の Index メソッドを次にコードに書き換えます。
View() の戻り値では IActionResult を返します。

        public IActionResult Index()
        {
            return View();
        }

以下のURLにアクセスするとRazor ビューの Index.cshtml が表示できます。
https://localhost:44370/HelloWorld/

2. レイアウトの変更

複数のWebページに共通した要素はレイアウトファイルに記述します。
レイアウトファイルを使用すると修正による変更箇所を最小限に抑えられます。

Views/Shared/_Layout.cshtml を開いてレイアウトファイルの内容を変更します。

①タイトル要素とフッター要素で、MvcMovie を Movie App に変更します。
変更前

変更後

②アンカー要素を変更します。
変更前

変更後

Views/HelloWorld/Index.cshtml を開きます。

タイトルと表示文章の違いが分かりやすくなるように表示内容を変更します。
タイトルとh2要素の内容を変更します。

ポート番号は実行時の番号に変更をして頂き以下のURLにアクセスします。
https://localhost:44370/HelloWorld/

URLにアクセスすると以下のようなWebページが表示されます。

赤下線が Index.cshtml で変更した内容です。
青下線が _Layout.cshtml で変更した内容になります。

Views/Shared/_Layout.cshtml はViews/_ViewStart.cshtml によって各ビューに共通要素を表示します。
Layout プロパティを変更することで別のレイアウトの指定や、null を設定することでレイアウトを使用しないようにできます。

3. コントローラーからビューへデータの受け渡し

#2 ではコントローラーだけを使用してURLに入力したパラメータ情報を表示させていました。

今回はURLで入力したパラメータ情報をビューに渡して表示します。
Controllers/HelloWorldController.cs のIndexアクションメソッドを変更します。

ビューへデータを渡すには ViewData オブジェクトを使用します。
"Message"や"NumTimes"はViewDataの変数になります。

ビューでは"Message"と"NumTimes"の変数をViewDataに指定することでコントローラーで割り当てられたデータを受け取ることができます。
Views/HelloWorld/Welcome.cshtml でコントローラーから渡された値を表示するようにします。

Welcomeビューを作成します。
Viewsフォルダを右クリック → [追加] → [新しい項目] の順で左クリック。

[Razor ビュー]を選択して名前を「Welcome.cshtml」として[追加]を左クリック。

Welcome.cshml の内容を以下のコードに置き換えます。
(int)ViewData["NumTimes"]と@ViewData["Message"]にはコントローラーから渡された値が割り当てられます。
@で始まるコードはHTMLヘルパーと呼ばれています。
HTMLヘルパーを使うとhtmlの作成にC#のオブジェクトやfor文などの処理を使うことができます。

@{
    ViewData["Title"] = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < (int)ViewData["NumTimes"]; i++)
    {
        <li>@ViewData["Message"]</li>
    }
</ul>

以下のURLにアクセスします。
https://localhost:44370/HelloWorld/Welcome?name=Makoto&numtimes=4

URLで「name」に指定している文字列が「numtimes」で指定した数だけ表示されます。

URLにアクセスした時の動作は図のような動作です。
①URLから指定したnameとnumTimesのパラメータをWelcome(name, numTimes)の引数として渡します。
②Welcomeメソッドは引数で渡されたnameとnumTimesの値をViewData["Message"]とViewData["NumTimes"]に格納します。
③ビューは渡されたViewDataの値をHTMLヘルパーを使って作成するhtmlに埋め込みます。
④最後にコントローラがビューで作成されたhtmlをブラウザに返して一連の処理が終了します。

まとめ

#3ではコントローラーからビューを呼び出しました。
#4ではモデルを使います。