【T1c】ASP.NET Core MVC(4/6)

プロジェクトタイプ	ASP.NET Core (空)
プロジェクト名	`T1c`
ソリューション名	`PIT1`
ターゲットフレームワーク	.NET 8.0(長期的なサポート)
最上位レベルのステートメントを使用しない	使用する(チェックオフ)

注意

本ページの作業内容は 前のページまでの続き になっていることに注意せよ．
- 先に前のページまでをすべて読み，指示されている作業を済ませてから本ページを読むこと．
- プロジェクトの作成作業についてはプロジェクトの作成を参照せよ．

1c-4. コントローラーとビューの基本

では試しにコントローラーを1つ作成してみよう．コントローラークラスのソースファイルは典型的には Controllersというフォルダ に配置するのが一般的であるため，プロジェクト名を右クリック→「追加」→「新しいフォルダー」で作成しよう．

そして_に示すように，作成したControllersフォルダを右クリックして「追加」→「コントローラー」をクリックする．「MVCコントローラー - 空」を選択し，ファイル名にFooController(.csは省略可能)と入力し「追加」ボタンをクリックする．

コントローラークラスはおおむね以下の要件を満たす必要がある¹．これ以外の方法でもクラスを「コントローラー」として認識させる方法はあるがここでは割愛する．

Controllerクラス(Microsoft.AspNetCore.Mvc名前空間)の派生クラスであること
クラス名が「～Contoroller」という名前であること．

追加された FooController.cs を見ると上記のクラスから派生していることがわかるだろう．ここでコントローラーの名称とそのコントローラーの実際のクラスの名称を混同しないようにしよう．今回作成したこのコントローラーの名前は Fooである．上述の条件があるため，Fooコントローラーの実際のクラスの名称はFooControllerである．

作成されたコントローラークラスには，デフォルトでIndex()という，戻り値型がIActionResult である public なメソッドが定義されている．このようなメソッドはそのコントローラーのアクションまたは アクションメソッド と呼ばれ，アプリケーションの処理の一単位となる．先ほどの説明(図1c-3-2)の通り，この場合はhttp://localhost:ポート番号/Foo/Indexにユーザーがアクセスするとこのメソッドが呼び出される． コントローラーにはこのようなメソッドをいくつでも好きな名前で追加することができる ．

アクションメソッドの役割は，ユーザーから入力を受け付けて表示に使用するデータを準備することである．あくまでもデータを準備するのが役割であって，クライアント(≒ウェブブラウザ)に返却するHTMLそのものを合成するのはこのメソッドの役割ではないことに注意せよ．アクションメソッドの実行結果としての表示，つまりはHTMLを合成するのは ビューと呼ばれる部品の役割である．

ビューはModel-View-Controllerパターンのうち表示をつかさどる部品であり，ASP.NET Core MVCでは アクション名と同じ名前を持つ Razorページ (.cshtmlファイル)である．では先ほどのFooコントローラーのIndexアクションに対応するビューを作成してみよう．

ビューとして使用するRazorページは，プロジェクト内の Viewsというフォルダ に置く必要があるので，プロジェクト名を右クリック→「追加」→「新しいフォルダー」で作成しよう．さらに，特定のコントローラーのアクションに対応する Razorページは Viewsフォルダの中のコントローラー名と同じフォルダ に配置する必要がある．今回はFooコントローラーのアクションに対応するビューが必要なので，Viewsフォルダ内にFooというフォルダを作成しよう．

_に示すように，作成した Foo フォルダを右クリックして「追加」→「ビュー」をクリックする．「Razor ビュー」を選択して(_)，「Razorビューの追加」ダイアログでは，_のように「ビュー名」にIndexと入力し，「レイアウトページを使用する」のチェックを外して「追加」ボタンをクリックする．

このビューはRazorページ( .cshtml ファイル)なので，【T1b】ASP.NET Core Razor Pagesで扱ったものと基本的には同じである．いま作成したFooコントローラーのIndexアクションに対応するビューが正しく表示されるかどうかを確認しておこう．Fooフォルダ内のIndex.cshtmlに_のように追記して実行してみよう．

Fooフォルダ内のIndex.cshtmlへの追記内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@{
    Layout = null;
}

<!DOCTYPE html>

<html lang="ja">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <h1>今見てるのは FooコントローラーのIndexアクション</h1>

    <ul>
        @for (int i = 0; i < 10; ++i) 
        {
            <li>項目@(i)</li>
        }
    </ul>
</body>

</html>

実行すると最初は何も表示されないはずである．手動でアドレスバーを書き換えて http://localhost:ポート番号/Foo/Indexにアクセスしてみよう．すると_のように表示されるはずである．

ちなみに起動時に何も表示されなかったのは，このアプリケーションではコントローラーやアクションの指定がない場合の デフォルトのコントローラーおよびアクションを指定していないためである．これを指定するためには， Program.csを_のように書き換える必要がある．

デフォルトのコントローラー/アクションの指定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();

var app = builder.Build();

app.UseRouting();

app.UseEndpoints(endpoints => 
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Foo}/{action=Index}/{id?}");
});

app.Run();

_では，コントローラーが指定されない場合には今作成したFooコントローラーを使用し，またアクションが指定されない場合にはIndexという名前のアクションを呼び出すように設定している．この追記を行ってから実行してみよう．_のように，今度は最初からFoo/Indexと同じ内容が表示されるはずである (アドレスバーはhttp://localhost:ポート番号/のままとなる)．

厳密な条件についてはHandle requests with controllers in ASP.NET Core MVC - Microsoft Docsを参照せよ． ↩︎

Last updated on 2024-04-12
Published on 2024-04-12