練習 — 新しいピザフォームを追加する - Training

10 分

このユニットでは、新しいピザを作成するためのフォームを追加することで、ピザ一覧ページを完成させます。また、ピザのフォーム送信と削除を処理するためのページハンドラを追加します。

新しいピザを作成するフォームを追加する

まず、ユーザーの入力を表すプロパティを PizzaListModel クラスに追加しましょう。適切なページハンドラーも追加します。

Pages\PizzaList.cshtml.cs を開き、次のプロパティを PizzaListModel クラスに追加します。
```
[BindProperty]
public Pizza NewPizza { get; set; } = default!;
```
上のコードでは以下の操作が行われます。
- PizzaListModel クラスに NewPizza という名前のプロパティが追加されます。
  - NewPizza は Pizza オブジェクト。
- NewPizza プロパティに BindProperty 属性が適用されます。
  - BindProperty 属性は、NewPizza プロパティを Razor ページにバインドするために使用されます。 HTTP POST 要求が行われると、NewPizza プロパティにユーザーの入力が設定されます。
- NewPizza プロパティは default! に初期化されます。
  - キーワード default! は、NewPizza プロパティを null に初期化するために使用されます。これにより、コンパイラで、NewPizza プロパティが初期化されていないという警告が生成されなくなります。
次に、HTTP POST のページハンドラーを追加します。同じファイル内で、次のメソッドを PizzaListModel クラスに追加します。
```
public IActionResult OnPost()
{
    if (!ModelState.IsValid || NewPizza == null)
    {
        return Page();
    }

    _service.AddPizza(NewPizza);

    return RedirectToAction("Get");
}
```
上のコードでは以下の操作が行われます。
- ModelState.IsValid プロパティは、ユーザーの入力が有効かどうかを判断するために使用されます。
  - 検証規則は、Models\Pizza.cs 内の Pizza クラスの属性 (Required や Range など) から推測されます。
  - ユーザーの入力が無効な場合、Page メソッドが呼び出され、ページが再レンダリングされます。
- NewPizza プロパティは、新しいピザを _service オブジェクトに追加するために使用されます。
- RedirectToAction メソッドは、ユーザーを Get ページハンドラにリダイレクトするために使用され、更新されたピザのリストでページを再レンダリングします。
ファイルを保存します。 GitHub Codespaces を使用している場合、ファイルは自動的に保存されます。
dotnet watch を実行しているターミナルに戻り、Ctrl + R キーを押してアプリを再度読み込みます。

フォームの送信を処理するページハンドラーが作成されたので、フォームを Razor ページに追加しましょう。

Pages\PizzaList.cshtml を開き、 を次のコードに置き換えます。

<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
    <label asp-for="NewPizza.Name" class="control-label"></label>
    <input asp-for="NewPizza.Name" class="form-control" />
    <span asp-validation-for="NewPizza.Name" class="text-danger"></span>
</div>
<div class="form-group">
    <label asp-for="NewPizza.Size" class="control-label"></label>
    <select asp-for="NewPizza.Size" class="form-control" id="PizzaSize">
        <option value="">-- Select Size --</option>
        <option value="Small">Small</option>
        <option value="Medium">Medium</option>
        <option value="Large">Large</option>
    </select>
    <span asp-validation-for="NewPizza.Size" class="text-danger"></span>
</div>
<div class="form-group form-check">
    <label class="form-check-label">
        <input class="form-check-input" asp-for="NewPizza.IsGlutenFree" /> @Html.DisplayNameFor(model => model.NewPizza.IsGlutenFree)
    </label>
</div>
<div class="form-group">
    <label asp-for="NewPizza.Price" class="control-label"></label>
    <input asp-for="NewPizza.Price" class="form-control" />
    <span asp-validation-for="NewPizza.Price" class="text-danger"></span>
</div>
<div class="form-group">
    <input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>

上のコードでは以下の操作が行われます。

asp-validation-summary 属性は、モデル全体の検証エラーを表示するために使用されます。
各フォームフィールド (<input> および <select> 要素) と各 <label> は、asp-for 属性を使用して、対応する NewPizza プロパティにバインドされます。
asp-validation-for 属性は、各フォームフィールドの検証エラーを表示するために使用されます。
@Html.DisplayNameFor メソッドは、IsGlutenFree プロパティの表示名を表示するために使用されます。これは、プロパティの表示名を表示するために使用される Razor ヘルパーメソッドです。ラベルをこのように表示すると、ユーザーがラベルをクリックしたときにチェックボックスが必ずオンになります。
フォームのデータをサーバーに投稿するための送信ボタン ([Create] としてラベル) をフォームに追加します。実行時に、ユーザーがこの [作成] ボタンを選択すると、フォームはブラウザーによって HTTP POST 要求としてサーバーに送信されます。

ページの下部に次のコードを追加します。
```
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}
```
これにより、クライアント側の検証スクリプトがページに挿入されます。クライアント側の検証スクリプトは、フォームをサーバーに送信する前にユーザーの入力を検証するために使用されます。
ファイルを保存します。ブラウザーでは、[ピザリスト] ページが新しいフォームで更新されます。 GitHub Codespaces を使用している場合、ファイルは自動的に保存されますが、ブラウザータブを手動で更新する必要があります。
新しいピザを入力し、[作成] ボタンを選択します。ページが更新され、一覧に新しいピザが表示されます。

ピザを削除するページハンドラーを追加する

[ピザリスト] ページに最後に追加する部分が 1 つあります。それは、ピザを削除するページハンドラーです。ページには既に、ピザを削除するボタンがありますが、これらはまだ何も実行しません。

Pages\PizzaList.cshtml.cs に戻り、次のメソッドを PizzaListModel クラスに追加します。
```
public IActionResult OnPostDelete(int id)
{
    _service.DeletePizza(id);

    return RedirectToAction("Get");
}
```
上のコードでは以下の操作が行われます。
- ユーザーがピザの [削除] ボタンをクリックすると、OnPostDelete メソッドが呼び出されます。
  - Pages\PizzaList.cshtml 内の [削除] ボタンの asp-page-handler 属性が Delete に設定されているため、ページはこのメソッドを使用することを認識しています。
- id パラメーターは、削除するピザを識別するために使用されます。
  - id パラメーターは、URL 内の id ルート値にバインドされます。これは、Pages\PizzaList.cshtml 内の [削除] ボタンの asp-route-id 属性を使用して実行されます。
- _service に対して DeletePizza メソッドが呼び出されてピザが削除されます。
- RedirectToAction メソッドは、ユーザーを Get ページハンドラにリダイレクトするために使用され、更新されたピザのリストでページを再レンダリングします。
ファイルを保存します。 GitHub Codespaces を使用している場合は、ファイルが自動的に保存されます。
ピザの [削除] ボタンをテストします。ページが更新され、選択されたピザが一覧から削除されています。

おめでとうございます。ピザの一覧を表示し、ユーザーが新しいピザを追加でき、ユーザーがピザを削除することもできる Razor ページが正常に作成されました。

自分の知識をチェックする

続行

練習 — 新しいピザフォームを追加する

新しいピザを作成するフォームを追加する

ピザを削除するページ ハンドラーを追加する

自分の知識をチェックする

フィードバック

ピザを削除するページハンドラーを追加する