우리는 지난 시간에 MVC에 적용된 Validation 에 대해서 알아보았습니다. 그런데 사실 이 Validation 은 초기에는 form 방식으로 동작하지만 이후에는 자동으로 적용된 자바스크립트를 이용해서 동작하게 된다. 사실 이 기능은 MVC2에서 처음 소개가 되었으나 , 여러 가지 문제가 있었고 , 사실 정상적으로 사용하기에 약간 무리가 있는 정도로 퀄리티가 좋지 않았다. MVC3에서는 이런 문제들을 해결하고 , 새롭게 Unobtrusive Client Validation 이란 이름으로 새로운 개념을 도입하게 된다. MVC3을 처음 세팅하게 되면 다음과 같은 값들이 appSettting 에 있는 것을 확인할수 있다.

 

<appSettings>

    <add key="webpages:Version" value="1.0.0.0" />

    <add key="ClientValidationEnabled" value="true" />

    <add key="UnobtrusiveJavaScriptEnabled" value="true" />   

</appSettings>



 

이 옵션이 있고 없는 차이에 따라 렌더링 방식이 변하게 된다. 다음을 살펴보자.

 

이 예제는 기존 8장에서 사용하였던 Validation 예제의 일부이다.

 

<div class="editor-field">
        <input class="text-box single-line" id="RegDate" name="RegDate" type="text" value="" />
</div>
[코드 UnobtrusiveJavaScriptEnabled 옵션이 설정되지 않은 상태]

 

<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-required="The RegDate field is required." id="RegDate" name="RegDate" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="RegDate" data-valmsg-replace="true"></span>
</div>
[코드 UnobtrusiveJavaScriptEnabled 옵션을 설정한 상태]

 

이 어트리뷰트는 jquery 에서 해당 필드의 validation 을 검사하기 위해 사용된다. 그러기 위해 MVC3 에서는 디폴트로 해당 페이지를 생성하게 되면 다음의 두개의 Javascript 가 참조 된다

 

<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

 
13_1.png
[그림 : 자바스크립트가 참조되지 않은 상태]

해당 필드에서는 DateTime 의 타입을 체크하고 있는데 자바스크립트가 참조되지 않은 상태에서는 모든 요청을 서버에서 처리하기 때문에 해당 필드의 유효성 검증이 폼 전송을 통해서만 이루어지게 된다.


13_2.png
[그림 : unbtrusty 옵션을 설정하고 자바스크립트를 참조한 상태]

 

이제 정상적으로 Client Validation 이 설정되며 , DateTime의 타입을 설정하는 모습을 볼수 있다.

 

Summary
Client Validation 은 그렇게 큰 주목을 받고있진 못하지만 MVC팀에서는 상당히 신경쓰고 있는 기능중에 하나입니다. 점점 더 좋은 모습을 보여주는 validation 인데 앞으로 MVC4에서는 좀 더 향상된 기능이 될 것을 기대해 봅니다.

 
References
http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-ajax.html

 


ASP.NET MVC3 시리즈 강좌 리스트
[ASP.NET MVC3강좌] 1. MVC(Model- View – Controller) 란 무엇인가.
[ASP.NET MVC3강좌] 2. MVC 환경 세팅
[ASP.NET MVC3강좌] 3. HelloWorld MVC
[ASP.NET MVC3강좌] 4. Layout , Partial Page
[ASP.NET MVC3강좌] 5. Model 을 View에서 표현하기
[ASP.NET MVC3강좌] 6. MVC의 매력적인 기능 스캐폴딩!(With EF)
[ASP.NET MVC3강좌] 7. 유효성 검사
[ASP.NET MVC3강좌] 8. ModelBinder
[ASP.NET MVC3강좌] 9. MVC ActionResult 종류 살펴보기
[ASP.NET MVC3강좌] 10. MVC 처리 프로세스 & ActionFilter
[ASP.NET MVC3강좌] 11. Global.asax
[ASP.NET MVC3강좌] 12. (번외편) Repository Pattern
[ASP.NET MVC3강좌] 13. MEF(Managed Extensibility Framework) in MVC
[ASP.NET MVC3강좌] 14. Javascript in MVC
[ASP.NET MVC3강좌] 15. Javascript Intellicense in Visual Studio
[ASP.NET MVC3강좌] 16. JSON in MVC - 1
[ASP.NET MVC3강좌] 17. JSON in MVC - 2
[ASP.NET MVC3강좌] 18. HTML5 in MVC
[ASP.NET MVC3강좌] 19. MVC Tips 1 - HandleUnknownAction
[ASP.NET MVC3강좌] 20. MVC Tips 2 - Cache ActionFilter






profile

ASP.NET MVP 2009~2011