요즈음 웹에서 가장 화두로 떠오르는 말은 무엇일까요? 그 어떤것보다도 html5에 대한 것이 가장 큰 이슈로 떠오를 것입니다. MVC3 에서는 이러한 추세에 발맞춰서 html5를 지원하기 위한 장치를 선보이고 있는데요 , 이번장에서는 이러한 기능들에 대해서 살펴보도록 하겠습니다.

 

17_1.png
[그림 MVC3에서의 html 마크업 지원]

 


Mvc3 에서는 기본적으로 html5 마크업을 선택해서 작성할수 있는 기능이 있습니다. 아쉽게도 모든 인텔리센스가 html5로 맞춰지는 것은 아니지만 , 시작하는 페이지가 html5로 작성되어 있다는것 만으로도 많은 편의성이 제공됩니다.
Html5 마크업을 기본적으로 선택하게 되면 스캐폴딩으로 생성되는 모든 페이지의 마크업이 html5로 작성되게 됩니다.

 

<!DOCTYPE html>

 

<html>

<head runat="server">

    <title>Index</title>

</head>

<body>

    <div>

       

    </div>

</body>

</html>

[코드 : html5마크업이 적용된 MVC View 페이지]

 

 

 

HTML5 컨트롤


MVC의 기본기능은 아니지만 , Nuget 에서는 HTML5 컨트롤을 사용할수 있는 패키지를 제공해 줍니다. 이는 MVC Html5 Toolkit 이름으로 배포되고 있습니다.
 

17_1.png
[그림 MVC Html5 Toolkit]

 

 

아쉽게도 현재는 Html5가 표준으로 정해진 것이 아니기 때문에 브라우저에 따라 지원하는 컨트롤들이 한계가 있습니다. 이번 예제에서는 Email 유효성을 자동으로 체크해주는 유효성 검사 텍스트 박스를 작성해 보도록 하겠습니다.

 

 

 

@using System.Web.Mvc.Html5;

@{

    ViewBag.Title = "Html5Test";

    Layout = "~/Views/Shared/_LayoutMaster.cshtml";

}

<h2>Html5Test</h2>

@Html.Html5TextBox("userEmal", InputTypes.InputType.Email, plah@plah.com);

[코드 : html5 텍스트 박스]

 

해당 기능은 Nuget 애드온 형태이기 때문에 반드시 코드의 최상단에 @using System.Web.Mvc.Html5;
를 삽입해야 합니다.

 

17_2.png
아쉽게도 파이어폭스에서는 일반적인 텍스트 박스로 나타납니다. ㅠㅠ  
이 텍스트 박스는 오페라에서 정상적으로 보여집니다.

17_3.png

이렇게 말이죠 :)


 
아래와 같은 html 컨트롤 들을 MVC에 적용할수 있습니다.

 

17_4.png
Html.Html5Range(0 , 100,1,50,null);

 

17_5.png
Html.Html5TextBox("deliveryDate", InputTypes.InputType.Date)

 

 

Summary
Html5 를 컨트롤 형태로 제공하는 것은 MVC로 간편하게 개발할수 있는 또 다른 편의성의 척도가 될 것입니다. 단순한 부가기능으로 치부될수도 있지만 ,이러한 세세한 지원은 최신 트랜드를 따라간다는 의미에서 MVC를 높게 평가할수 있겠습니다.



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