【T6a】検証メッセージのカスタマイズと集約表示(3/5)

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

注意

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

6a-3. ScoreRecordsコントローラーの作成

それではScoreRecordクラスを操作するためのコントローラーScoreRecordsを作成しよう．プロジェクト内の Controllers フォルダを右クリックし「追加」→「コントローラー」をクリックしよう．「MVC コントローラー - 空」を選択して「追加」ボタンをクリックし，クラス名としてScoreRecordsController(.csは省略可能)を指定する．すると ScoreRecordsController.cs が追加されるので_のように書き換えよう．

ScoreRecordsControllerクラスの追記内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
using Microsoft.AspNetCore.Mvc;
using T6a.Data;
using T6a.Models;

namespace T6a.Controllers
{
    public class ScoreRecordsController : Controller
    {
        private readonly T6aContext _context;

        public ScoreRecordsController(T6aContext context) 
        {
            _context = context;
        }

        // Indexアクション(GETのみ)
        public IActionResult Index()
        {
            var scoreRecords = from r in _context.ScoreRecords
                               orderby r.Score descending      // スコアの降順
                               select r;

            return View(scoreRecords.ToList());
        }
    }
}

_の19～21行目では全記録を取得して， スコアの降順 に並べてビューに渡している．

次にこのIndexアクションのためのビューを作成しよう．ビューの作成は今までのようにプロジェクトに直接フォルダや.cshtmlファイルを追加することでも行うことができるが，今回の場合のように 先にアクションメソッドを作成している場合はVisual Studio の機能を使うと少し簡単に作成することができる ので次の操作を覚えておこう．

【手順】アクションメソッドの定義からビューを作成する
1. コントローラークラスを定義している.csファイル内で，アクションメソッドの名前の部分を右クリックし，「ビューの追加」をクリックする(_)．
  - 「新規スキャフォールディングアイテムの追加」というウィンドウが表示される．
2. 「Razorビュー」を選択して「追加」ボタンをクリックする(_)．
  - 「Razorビュー - 空」ではないので注意せよ．
  - 「Razorビューの追加」というウィンドウが表示される．
3. ビュー名などを確認して「追加」ボタンをクリックする(_)．
  - 少し待つと，プロジェクトに1で選択したアクションメソッドに必要なフォルダや.cshtmlファイルが追加される(_，_)．

この手順を用いてScoreRecordsControllerのIndexアクションに対するビュー(.cshtmlファイル)を作成し，その内容を_に示すように編集する．ここでは記録されている全スコアを単に ol 要素で表示しているだけである．

Views/ScoreRecords/Index.cshtmlの内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
@model IEnumerable<ScoreRecord>

@{
    ViewData["Title"] = "スコア一覧";

    if (Model is null) throw new ArgumentNullException(nameof(Model)); // ad-hoc! 非null保証のための回避策
}

<ol>
    @foreach(var sr in Model)
    {
        <li>@(sr.Score)点 @sr.Name</li>
    }
</ol>

<a asp-action="Create">新規作成</a>

次にScoreRecordsコントローラーに_，_に示すスコアの新規作成用のアクションメソッドCreate(GET用とPOST用の両方)を追加し，またこのためのフォームを含む_に示す内容のビューを追加しよう．両者とも特に目新しいことはしていないが，GET用のCreateアクション(_1～11行目)では，ビューに渡すScoreRecordクラスのインスタンスに適当な値を設定している．

ScoreRecordsControllerクラスの追記内容(Createアクション(GET用))

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// Createアクション(GET用)
public IActionResult Create() 
{
    // 利便性のため適当な初期値を設定しておく．
    return View(new ScoreRecord() 
    {
        Name = "AAAAA",
        Score = 100,
        Recorded = DateTime.Now 
    });
}

ScoreRecordsControllerクラスの追記内容(Createアクション(POST用))

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
// Createアクション(POST用)
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Create([Bind("Name, Score, Recorded")] ScoreRecord scoreRecord) 
{
    if (ModelState.IsValid)
    {
        _context.Add(scoreRecord);
        _context.SaveChanges();

        return RedirectToAction(nameof(Index));
    }
    else 
    {
        return View(scoreRecord);
    }
}

Views/ScoreRecords/Create.cshtmlの内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
@model ScoreRecord

@{
    ViewData["Title"] = "新規作成";

    if (Model is null) throw new ArgumentNullException(nameof(Model)); // ad-hoc! 非null保証のための回避策
}

<form asp-action="Create">
    @* スコアネーム(Name)のための入力欄 *@
    <label asp-for="@Model.Name"></label>:
    <input asp-for="@Model.Name" />
    <span asp-validation-for="@Model.Name"></span>
    <br />

    @* スコア(Score)のための入力欄 *@
    <label asp-for="@Model.Score"></label>:
    <input asp-for="@Model.Score" />
    <span asp-validation-for="@Model.Score"></span>
    <br />

    @* 記録日時(Recorded)のための入力欄 *@
    <label asp-for="@Model.Recorded"></label>:
    <input asp-for="@Model.Recorded" />
    <span asp-validation-for="@Model.Recorded"></span>
    <br />

    <input type="submit" value="送信" />
</form>

@section Scripts
{
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

ここまで書けたら実行してみよう．起動したら「新規作成」のリンクをクリックして，入力欄を空にするか範囲外の値を入力して「送信」ボタンをクリックしてみよう．すると_のように表示されるはずである．ここまでは前回までの内容と差異はない．

Last updated on 2024-06-10
Published on 2024-06-10