태그 도우미 및 페이지 처리기 이해
이전 단원에서는 피자 목록을 표시하는 Razor 페이지를 만들었습니다. @ 기호를 사용하여 HTML과 C# 간에 컨텍스트를 전환했습니다. 이 단원에서는 태그 도우미에 대해 알아봅니다. 태그 도우미는 C# 코드를 포함할 수 있는 특별한 종류의 HTML 요소입니다. 페이지 처리기에 대해서도 알아봅니다. 페이지 처리기는 브라우저 요청을 처리하는 메서드입니다. 다음 단원에서 페이지 처리기를 사용하여 피자를 추가하고 삭제합니다.
태그 도우미
태그 도우미는 HTML과 C# 간 컨텍스트 전환의 비효율성을 해결하는 데 사용됩니다. 대부분의 ASP.NET Core 기본 제공 태그 도우미는 표준 HTML 요소를 확장합니다. 태그 도우미는 HTML 요소에 대한 서버 쪽 특성을 추가로 제공하여 요소를 더 강화합니다.
이 프로젝트에 대해 알아야 할 네 가지 태그 도우미는 부분, 레이블, 입력, 유효성 검사 요약 메시지입니다.
부분 태그 도우미
<partial name="_ValidationScriptsPartial" />
그러면 _ValidationScriptsPartial.cshtml 파일의 내용이 페이지에 삽입됩니다. _ValidationScriptsPartial.cshtml 파일에는 양식 입력의 유효성을 검사하는 데 사용되는 JavaScript가 포함되어 있으므로 양식이 포함된 모든 페이지에 포함되어야 합니다.
레이블 태그 도우미
<label asp-for="Foo.Id" class="control-label"></label>
이 도우미는 표준 HTML <label> 요소를 확장합니다. 많은 태그 도우미와 마찬가지로 asp-for 특성을 사용합니다. 특성은 PageModel의 속성을 허용합니다. 이 경우, PageModel의 Foo.Id 속성(특히 "Id" 문자열) 이름은 HTML <label> 요소의 콘텐츠로 렌더링됩니다.
입력 태그 도우미
<input asp-for="Foo.Id" class="form-control" />
이전 예제와 마찬가지로 표준 HTML <input> 요소를 확장합니다. 또한 asp-for 특성을 사용하여 PageModel 속성을 지정합니다. 이 경우, Foo.Id 속성의 값은 HTML <input> 요소의 value 특성으로 렌더링됩니다.
유효성 검사 요약 태그 도우미
<div asp-validation-summary="All"></div>
유효성 검사 요약 태그 도우미는 모델의 단일 속성에 대한 유효성 검사 메시지를 표시합니다.
참고
유효성 검사 규칙 및 속성 표시 이름과 같은 항목은 PageModel 클래스에 정의됩니다. 다음 단원의 코드에서 찾을 위치를 살펴보겠습니다.
페이지 처리기
PageModel 클래스는 HTTP 요청 및 페이지를 렌더링하는 데 사용되는 데이터의 페이지 처리기를 정의합니다. 이전 연습에서 PizzaListModel 클래스는 PizzaList 속성 값을 _service.GetPizzas() 값으로 설정하여 HTTP GET 요청을 처리했습니다.
일반적인 처리기에는 페이지 초기화를 위한 OnGet 및 양식 제출을 위한 OnPost가 포함됩니다. HTTP POST를 처리하기 위해 페이지 처리기는 사용자가 제출한 데이터를 확인하거나, 잘못된 경우 입력 양식 페이지를 다시 표시하거나, 지속성을 위해 유효한 데이터를 서비스 또는 데이터베이스에 보낼 수 있습니다.
다음 단원에서는 여러 태그 도우미를 사용하여 새 피자를 만드는 양식을 추가합니다. 또한 피자의 양식 제출 및 삭제를 처리하는 페이지 처리기를 추가합니다.