ASP.NET MVCでページを編集・追加する #ASP.NET

前回の記事

Visual StudioでWebアプリケーションを作成する【ASP.NET MVC】

本記事のゴール

既存のページを編集し、表示する。
新規のページを作成し、表示する。

既存Webページの編集

1．/View/Home/Index.cshtml をダブルクリックし、ファイルを表示します。

2．ここに表示されている内容が、このWebアプリケーションを起動したときに表示される内容です。

3．以下のように「Welcome」を「こんにちは！」に書き換えると、起動したときに表示される内容も変わっていることが確認できます。

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
-    <h1 class="display-4">Welcome</h1>
+    <h1 class="display-4">こんにちは！</h1>
    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

cshtml の記法（C#の埋め込み）

拡張子はcshtmlであるため、HTML・CSS・JavaScriptに加えてC#による制御を加えることができます。なお、C#の処理はサーバーサイドで処理されるため、実際にユーザーに表示される際には処理が実行済みの状態で表示されます。

@{
    // 文中にC#の処理を書く場合は@{}で囲みます。
    var count = 4;
}

@* HTMLの要素内に文を埋め込む場合は@を付けます。 *@
@* 文字に接している場合は文を括弧で囲み、@()とします。 *@
<div>現時点でのカウントは@(count)です。</div>

@* 条件分岐 *@
@if (count > 3)
{
    <div>カウントは3より大きいです。</div>
}
else
{
    <div>カウントは3以下です。</div>
}

@* 繰り返し *@
<ol>
    @for (var i = 0; i < count; i++)
    {
        <li>@(i)掛ける@(i)は@(i * i)です。</li>
    }
</ol>

新規Webページの作成

ASP.NET MVCにおいて新しい画面を追加するためには、ControllerとViewを追加する必要があります。
今回は、「/Ramen/Index」でアクセス可能な画面を追加します。

Controller
- URLを入力された場合の処理を記述する。
View
- 実際の画面表示を記述する。

Controllerの追加

1．右側のソリューションエクスプローラーに存在する「Controller」ディレクトリを右クリック
2．「追加」をクリック
3．「コントローラー」をクリックし、「新規スキャフォールディングのアイテムの追加」ダイアログを開く。

4．「MVCコントローラー - 空」を選択し、「追加」を押す。

5．「MVCコントローラー - 空」が選択されていることを確認し、任意の名前を入力して「追加」を押す。

6．「Controller」ディレクトリ配下に新しいファイルが追加され、画面にファイル内容が表示されていることを確認する。

これで、/Ramen/Index にアクセスすると、7行目から Index() に記載した処理が実行されるようになりました。デフォルトだと9行目に return View() と記載されているため、View（画面）を表示するという処理が実行されます。次項からは画面を作成します。

なお、基本的に名前とURLには対応関係があり、コントローラー名と関数名に依存します。
RamenControllerのIndex()であればURLは「/Ramen/Index」（Indexは省略できるため /Ramen でも可）となります。

Viewの追加

Controller側で、/Ramen/Index にアクセスがあった場合に View（画面）を表示するという処理を設定したため、これに対応した View を作成する必要があります。

1．右側のソリューションエクスプローラーに存在する「View」ディレクトリを右クリック
2．「追加」をクリック
3．「新しいフォルダー」をクリック

4．「新しいフォルダー」の名前をControllerに付けた名前に変更する。（今回は Ramen に変更）

5．追加されたフォルダを右クリック
6．「追加」をクリック
7．「ビュー」をクリックし、「新規スキャフォールディングのアイテムの追加」ダイアログを開く。

8．「Razorビュー - 空」を選択し、「追加」を押す。

9．「Razorビュー - 空」が選択されていること及び、名前が「Index.cshtml」であることを確認して「追加」を押す。
※Controllerの関数名を変更した場合は対応する名前に変更する。

10．「Ramen」ディレクトリ配下に新しいファイルが追加され、画面にファイル内容が表示されていることを確認する。

これで、RamenController の Index() に対応する画面を作成することができました。
アクセスした際に分かりやすいように、中身を少し変更しておきます。

Views/Ramen/Index.cshtml

@{
    ViewData["Title"] = "ラーメン";
}

<div>各地のラーメンリストを表示する画面です。</div>

動作を確認する

ここまでで、RamenController.cs と Index.cshtml の作成が完了しています。
/Ramen/Index にアクセスして画面が表示されることを確認しましょう。

次回の記事

【ViewModel】ASP.NET MVCでサーバー側と画面側でデータを受け渡す