'preview 2'에 해당되는 글 1건

  1. 2009.10.07 Client-Side Validation in ASP.NET MVC 2 Preview 2

안녕하세요? 웹지니입니다.
지난 포스트에서 말씀드렸듯이 10월 2일을 기점으로 ASP.NET MVC 2.0의 Preview 2 버전이 릴리즈 되었습니다. 이번 Preview 2 버전에서는 약간의 새로운 기능들이 추가되었는데요. 이번 포스트에서는 클라이언트 측 유효성 검사 기능에 대해 알아보도록 하겠습니다.

예제 다운로드:  MvcApplication1.zip (302.64 kb)

Valdiation with DataAnnotations API

ASP.NET MVC 2 Preview 1에서는 .NET 3.5 SP1에서 새롭게 선보인 DataAnnotations API를 이용한 유효성 검사 기능이 추가되어 있습니다. 예전에 올렸던 ASP.NET MVC 2 Preview 1 릴리즈에 대한 번역 포스트에서 이미 한 번 소개해 드렸었지요. 이 방식의 문제점은 데이터 유효성 검사를 위해 매번 폼을 POST 해야 한다는 점이었습니다. 즉 유효성 검사가 무조건 서버 측 코드에 의해 실행되기 때문에 폼이 Submit 되기 전에는 입력 요소에 대한 유효성 검사를 할 수 없다는 뜻입니다. 사실 말이야 바른 말이지 요새 누가 이런 식으로 구현하겠어요?

Client-Side Valdiation in ASP.NET MVC 2 Preview 2

해서 ASP.NET MVC 2 Preview 2에서는 Client-Side Validation API를 제공하여 이와 같은 불편을 해소하고 있습니다. 거두절미하고 예제를 통해 한 번 살펴볼까요? 우선 아래와 같이 모델 객체와 모델 객체에 대한 메타데이터 클래스가 존재한다고 가정해 보겠습니다.

코드 1: Profile 클래스와 ProfileMetadata 클래스

  1: namespace MvcApplication1.Models
  2: {
  3: 	[MetadataType(typeof(ProfileMetadata))]
  4: 	public class Profile
  5: 	{
  6: 		public string Name { get; set; }
  7: 		public string Email { get; set; }
  8: 	}
  9: 
 10: 	public class ProfileMetadata
 11: 	{
 12: 		[Required(ErrorMessage="이름을 입력해 주세요.")]
 13: 		public object Name;
 14: 
 15: 		[Required(ErrorMessage="국가를 입력해 주세요.")]
 16: 		public object Email;
 17: 	}
 18: }
 19: 

그리고 이 객체를 생성하는 HomeController 클래스의 Create 액션 메서드는 다음과 같이 구현되어 있습니다.

코드 2: HomeController.Create 액션 메서드

  1: [HandleError]
  2: public class HomeController : Controller
  3: {
  4: 	public ActionResult Create()
  5: 	{
  6: 		return View();
  7: 	}
  8: 
  9: 	[HttpPost]
 10: 	public ActionResult Create(FormCollection forms)
 11: 	{
 12: 		Profile profile = new Profile();
 13: 		this.TryUpdateModel<Profile>(profile);
 14: 		return View();
 15: 	}
 16: }

마지막으로 /Home/Create 뷰 페이지는 다음과 같이 구현되어 있습니다.

코드 3: /Home/Create 뷰 페이지의 소스 코드

  1: <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  2: 
  3:     <h2>Create</h2>
  4: 
  5:     <%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>
  6: 
  7:     <% using (Html.BeginForm()) {%>
  8: 
  9:         <fieldset>
 10:             <legend>Fields</legend>
 11:             <p>
 12:                 <label for="Name">Name:</label>
 13:                 <%= Html.EditorFor(p => p.Name) %>
 14:                 <%= Html.ValidationMessage("Name", "*") %>
 15:             </p>
 16:             <p>
 17:                 <label for="Email">Email:</label>
 18:                 <%= Html.EditorFor(p => p.Email)%>
 19:                 <%= Html.ValidationMessage("Email", "*") %>
 20:             </p>
 21:             <p>
 22:                 <input type="submit" value="Create" />
 23:             </p>
 24:         </fieldset>
 25: 
 26:     <% } %>
 27: 
 28:     <div>
 29:         <%=Html.ActionLink("Back to List", "Index") %>
 30:     </div>
 31: 
 32: </asp:Content>

예제 코드에서 보듯이 13번 라인과 19번 라인은 기본적으로 생성되는 Html.TextBox 메서드 대신 Html.EditorFor 메서드를 사용하도록 수정한 상태입니다. 이 상태에서 예제 애플리케이션을 실행하고 /Home/Create 뷰를 실행하면 아래와 같은 그림이 나타나게 됩니다.

그림 1: /Home/Create 뷰에서 Submit 버튼을 클릭하여 서버 측 유효성 검사가 실행된 모습
img1

위의 그림 1의 모습은 /Home/Create 뷰에서 Create 버튼을 클릭하여 서버 측 유효성 검사가 실행된 모습입니다. Preview 1에 추가된 DataAnnotations API를 이용한 유효성 검사가 잘 동작하고 있지만 앞서 설명드렸듯이 이 페이지는 이미 서버 측으로 페이지가 Submit 된 이후의 모습입니다. 그러면 이 /Home/Create 뷰를 클라이언트 측 유효성 검사가 동작하도록 수정해 보겠습니다.

코드 3: 수정된 /Home/Create 뷰 페이지의 소스 코드

  1: <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  2: 
  3:     <script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
  4:     <script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>    
  5:     <script src="../../Scripts/MicrosoftMvcJQueryValidation.js" type="text/javascript"></script>
  6: 
  7:     <h2>Create</h2>
  8:     <% Html.EnableClientValidation(); %>
  9:     <%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>
 10: 
 11:     <% using (Html.BeginForm()) {%>
 12: 
 13:         <fieldset>
 14:             <legend>Fields</legend>
 15:             <p>
 16:                 <label for="Name">Name:</label>
 17:                 <%= Html.EditorFor(p => p.Name) %>
 18:                 <%= Html.ValidationMessage("Name", "*") %>
 19:             </p>
 20:             <p>
 21:                 <label for="Email">Email:</label>
 22:                 <%= Html.EditorFor(p => p.Email)%>
 23:                 <%= Html.ValidationMessage("Email", "*") %>
 24:             </p>
 25:             <p>
 26:                 <input type="submit" value="Create" />
 27:             </p>
 28:         </fieldset>
 29: 
 30:     <% } %>
 31: 
 32:     <div>
 33:         <%=Html.ActionLink("Back to List", "Index") %>
 34:     </div>
 35: 
 36: </asp:Content>

예제 코드에서 눈 여겨 볼 부분은 3번 라인부터 5번 라인까지 스크립트를 페이지에 추가하는 코드와 8번 라인의 Html.EnableClientValidation() 메서드 호출입니다. 이 메서드는 페이지에 클라이언트 측 유효성 검사를 활성화하는 역할을 담당하며 이는 앞서 설명한 세 개의 스크립트 파일이 페이지에 추가되어 있어야 가능하게 됩니다. 그 이외의 코드는 전혀 변한 것이 없지만 페이지를 실행해 보면 아래 그림과 같이 그림 1과는 다소 다른 모습을 볼 수 있습니다.

그림 2: 클라이언트 측 유효성 검사가 동작한 모습
img2

그림 2에서 보듯이 유효성 검사 메시지가 Html.ValidationMessage 메서드를 호출한 위치에 나타나지만 ValidationSummary 메서드를 호출한 영역에는 아무것도 나타나지 않습니다. 또한 텍스트 상자에 값을 입력하면 유효성 오류 메시지는 곧바로 사라지도록 구현이 되어 있습니다. 제법 잘 만들어 진 것 같지요?

이렇게 함으로써 우리가 얻을 수 있는 이점은 모델 객체에 대한 메타데이터 클래스만 구현함으로써 모델 객체에 대한 유효성 검사 코드를 전혀 작성할 필요가 없다는 점. 또한 클라이언트 측 유효성 검사 기능을 이용함으로써  메타데이터 클래스 만으로 서버 측과 클라이언트 측 유효성 검사를 동시에 처리할 수 있다는 점 등이 장점으로 작용할 수 있겠습니다. 시간이 지날수록 점점 더 편리하면서도 강력한 기능을 제공하는 ASP.NET MVC 2의 정식 버전이 벌써부터 기다려지네요. =)

Posted by 웹지니 트랙백 0 : 댓글 0