연습 - 새 피자 양식 추가

10분

이 단원에서는 새 피자를 만드는 양식을 추가하여 피자 목록 페이지를 완료합니다. 웹 양식 제출과 피자 삭제를 처리하기 위해 페이지 관리 핸들러를 추가합니다.

새 피자를 만드는 양식 추가

먼저 클래스에 속성을 PizzaListModel 추가하여 사용자의 입력을 나타내겠습니다. 적절한 페이지 처리기를 추가할 것입니다.

Pages\PizzaList.cshtml.cs 열고 클래스에 다음 속성을 PizzaListModel 추가합니다.
```
[BindProperty]
public Pizza NewPizza { get; set; } = default!;
```
앞의 코드에서 다음을 수행합니다.
- 명명된 NewPizza 속성이 클래스에 추가됩니다 PizzaListModel .
  - NewPizza는 Pizza 개체입니다.
- BindProperty 특성은 NewPizza 속성에 적용됩니다.
  - 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> 또한 NewPizza 속성에 asp-for 속성을 사용하여 바인딩됩니다.
특성 asp-validation-for 은 각 양식 필드에 대한 유효성 검사 오류를 표시하는 데 사용됩니다.
이 @Html.DisplayNameFor 메서드는 속성의 표시 이름을 IsGlutenFree 표시하는 데 사용됩니다. 속성의 표시 이름을 표시하는 데 사용되는 Razor 도우미 메서드입니다. 이 방식으로 레이블을 수행하면 사용자가 레이블을 클릭할 때 확인란이 선택됩니다.
양식에 레이블이 지정된 제출 단추가 추가되어 Create 양식 데이터를 서버에 게시합니다. 런타임에 사용자가 이 만들기 단추를 선택하면 브라우저에서 양식을 HTTP POST 요청으로 서버에 보냅니다.

페이지 아래쪽에 다음 코드를 추가합니다.
```
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}
```
그러면 클라이언트 쪽 유효성 검사 스크립트가 페이지에 삽입됩니다. 클라이언트 쪽 유효성 검사 스크립트는 양식이 서버에 제출되기 전에 사용자의 입력 유효성을 검사하는 데 사용됩니다.
파일을 저장합니다. 브라우저에서 피자 목록 페이지가 새 양식으로 새로 고쳐집니다. GitHub Codespaces를 사용하는 경우 파일이 자동으로 저장되지만 브라우저 탭을 수동으로 새로 고쳐야 합니다.
새 피자를 입력하고 만들기 단추를 선택합니다. 페이지를 새로 고치고 목록에 새 피자를 표시해야 합니다.

피자를 삭제하는 페이지 처리기 추가

피자 목록 페이지에 추가할 마지막 조각은 피자를 삭제하는 페이지 처리기입니다. 피자를 삭제하는 단추는 이미 페이지에 있지만 아직 아무 작업도 수행하지 않습니다.

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 됩니다.
- DeletePizza 피자를 삭제하기 위해 개체에서 _service 메서드가 호출됩니다.
- 이 RedirectToAction 메서드는 사용자를 페이지 처리기로 리디렉션하는 Get 데 사용되며, 이 처리기는 업데이트된 피자 목록으로 페이지를 다시 렌더링합니다.
파일을 저장합니다. GitHub Codespaces를 사용하는 경우 파일이 자동으로 저장됩니다.
피자에 대한 삭제 단추를 테스트합니다. 페이지가 새로 고쳐지고 선택한 피자가 목록에서 제거되어야 합니다.

축하합니다! 피자 목록을 표시하고, 사용자가 새 피자를 추가할 수 있도록 하고, 사용자가 피자를 삭제할 수 있도록 하는 Razor 페이지를 만들었습니다.

연습 - 새 피자 양식 추가

새 피자를 만드는 양식 추가

피자를 삭제하는 페이지 처리기 추가

지식 점검

피드백