연습 - 새 피자 양식 추가 - Training

10분

이 단원에서는 양식을 추가하여 새 피자를 만들어 피자 목록 페이지를 완료합니다. 또한 피자의 양식 제출 및 삭제를 처리하는 페이지 처리기를 추가합니다.

새 피자를 만드는 양식 추가

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

Pages\PizzaList.cshtml.cs를 열고 PizzaListModel 클래스에 다음 속성을 추가합니다.
```
[BindProperty]
public Pizza NewPizza { get; set; } = default!;
```
위의 코드에서
- NewPizza라는 속성이 PizzaListModel 클래스에 추가됩니다.
  - NewPizza가 Pizza 개체입니다.
- BindProperty 특성은 NewPizza 속성에 적용됩니다.
  - BindProperty 특성은 Razor 페이지에 NewPizza 속성을 바인딩하는 데 사용됩니다. 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를 사용하는 경우 파일이 자동으로 저장되지만 브라우저 탭을 수동으로 새로 고쳐야 합니다.
새 피자를 입력하고 만들기 단추를 선택합니다. 페이지가 새로 고쳐지고 목록에 새 피자가 표시됩니다.

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

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

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 페이지를 만들었습니다.

지식 점검

계속

연습 - 새 피자 양식 추가

새 피자를 만드는 양식 추가

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

지식 점검

피드백