연습 - 새 피자 양식 추가
이 단원에서는 양식을 추가하여 새 피자를 만들어 피자 목록 페이지를 완료합니다. 또한 피자의 양식 제출 및 삭제를 처리하는 페이지 처리기를 추가합니다.
새 피자를 만드는 양식 추가
먼저 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
메서드가 호출되어 페이지를 다시 렌더링합니다.
- 유효성 검사 규칙은 Models\Pizza.cs의
-
NewPizza
속성은_service
개체에 새 피자를 추가하는 데 사용됩니다. -
RedirectToAction
메서드는 사용자를Get
페이지 처리기로 리디렉션하는 데 사용되며, 이 처리기는 업데이트된 피자 목록으로 페이지를 다시 렌더링합니다.
-
파일을 저장합니다. GitHub Codespaces를 사용하는 경우 파일이 자동으로 저장됩니다.
실행 중인
dotnet watch
터미널로 돌아가 Ctrl+R을 눌러 앱을 다시 로드합니다.
양식 제출을 처리하는 페이지 처리기가 있으므로 이제 Razor 페이지에 양식을 추가해 보겠습니다.
Pages\PizzaList.cshtml을 열고
<!-- New Pizza form will go here -->
를 다음 코드로 바꿉니다.<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
로 설정되어 있으므로 페이지에서 이 메서드를 사용하는 것을 알고 있습니다.
-
Pages\PizzaList.cshtml의 삭제 단추에 있는
-
id
매개 변수는 삭제할 피자를 식별하는 데 사용됩니다.-
id
매개 변수는 URL의id
경로 값에 바인딩됩니다. 이 작업은 Pages\PizzaList.cshtml의 삭제 단추에 있는asp-route-id
특성으로 수행됩니다.
-
-
DeletePizza
메서드는 피자를 삭제하기 위해_service
개체에서 호출됩니다. -
RedirectToAction
메서드는 사용자를Get
페이지 처리기로 리디렉션하는 데 사용되며, 이 처리기는 업데이트된 피자 목록으로 페이지를 다시 렌더링합니다.
- 사용자가 피자의 삭제 단추를 클릭하면
파일을 저장합니다. GitHub Codespaces를 사용하는 경우 파일이 자동으로 저장됩니다.
피자에 대한 삭제 단추를 테스트합니다. 페이지를 새로 고쳐야 하며 선택한 피자를 목록에서 제거해야 합니다.
축하합니다! 피자 목록을 표시하고, 사용자가 새 피자를 추가할 수도 있도록 하고, 사용자가 피자를 삭제할 수 있도록 하는 Razor 페이지를 만들었습니다.