2. Views 폴더의 FormValidationDemo 폴더에 TagHelperValidation.cshtml 페이지를 생성하고, 다음과 같이 코드를 작성한다. 헬퍼 메서드가 아닌 다시 원래의 순수 HTML 태그 스타일로 돌아가고, 대신에 asp-로 시작하는 MVC 태그 헬퍼 기법을 사용해서 asp-controller로 폼에서 사용할 컨트롤러와 asp-action으로 폼에서 전송할 action 값을 지정한다. 각각의 label, textbox, span에도 asp-for를 지정해서 관련 모델 속성을 지정하면 앞서 만들어 보았던 폼과 같은 폼을 구성할 수 있다. 태그 헬퍼는 순수 HTML 모양에 asp- 코드로 서버 측 기능을 주입해서 사용할 수 있는 장점이 있어 앞으로의 폼 관련 코드는 이러한 스타일이 주를 이루게 될 것이다.
▼ /Views/FormValidationDemo/TagHelperValidation.cshtml
@model DotNetNote.Models.MaximModel @{ Layout = null; } <!DOCTYPE html> <html> <head> <title>TagHelper로 폼 구성하기</title> <style> .input-validation-error { border: 1px solid red; } </style> </head> <body> <h2>TagHelper로 폼 구성 및 유효성검사</h2> <form asp-controller=“FormValidationDemo” asp-action=“TagHelperValidation” method=“post”> <div asp-validation-summary=“ModelOnly”></div> <label asp-for=“Name”></label>: <input asp-for=“Name” /> <span asp-validation-for=“Name”></span> <br /> <label asp-for=“Content”></label>: <input asp-for=“Content” /> <span asp-validation-for=“Content”></span> <br /> <input type=“submit” value=“전송” /> </form> <script src=“~/lib/jquery/dist/jquery.js”></script> <script src=“~/lib/jquery-validation/jquery.validate.js”></script> <script src= “~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js”></script> </body> </html>