ASP.NET MVC - View(2)

안녕하셨죠? 지난번에 이은 뷰에대해 알아보기. 두번째 시간이네요. 이거 새로운 마음가짐으로 시작한지 얼마안되어 또 흩으러진 모습을 보였네요^^;; 오늘 제 친한벗이 또 한번 제게 채찍질(?)을 해댔죠. 고마움으로 받아들였습니다. ^^ 역시 항상 함께해주는 친구는 좋네요 ㅎㅎ

잡담은 그만하고 이제 시작할까요? 지난번에 HTML 도우미에 대해서 더 알아보기로 했었죠?


HTML 도우미 만들기

HTML 도우미의 이점은 우리가 일반적으로 HTML 페이지를 만드는데 타이핑으로 쓸데없이(?) 쳐대야하는 태그들의 많은 양을 감소시켜줍니다. 예로 다음의 코드를 살펴보겠습니다.

<input type="text" id="message" name="message" value="<%= HTML.Encode(ViewData["message"]) %>" />

위처럼 작성하는 것 대신에 다음과 같이 작성할 수 있습니다.

<%= HTML.TextBox("message") %>

역시 이름그대로 우리의 개발을 빠르게 도와줄수 있는 메쏘드네요.^^ ASP.NET MVC의 web.config 파일에서 namespace 노드를 보면 <add namespace="System.Web.Mvc.Html"/> 를 볼수있는데 이로인해 우리는 간단하게 <%= HTML. 이렇게만 하면 사용이 가능한 것입니다.

HTML 도우미 알기

HTML 도우미는 단지 string 을 반환합니다. 이 string 은 우리가 표현하고픈 여러가지로 대체될수 있는데요. 예를 들어 대표적인 <input> 이나 <img> 태그를 HTML 도우미를 사용해 생성할 수 있고, 좀더 복잡한 탭 스트립이나, 디비 데이터를 보여주는 HTML테이블들도 생성할 수 있습니다.
ASP.NET MVC 프레임워크에 내장되어있는 HTML도우미는 다음과 같습니다.(이게 전부는 아닙니다^^;)

•Html.ActionLink()
•Html.BeginForm()
•Html.CheckBox()
•Html.DropDownList()
•Html.EndForm()
•Html.Hidden()
•Html.ListBox()
•Html.Password()
•Html.RadioButton()
•Html.TextArea()
•Html.TextBox()

Html.BeginForm() 과 Html.TextBox()를 사용해서 간단한 html 페이지를 만들어보겠습니다.

간단한 이름을 등록하는 폼이네요. 소스? 간단합니다.

지난 시간에도 설명한 부분인데요^^;  다시한번 말씀드리면 Html.BeginForm() 메쏘드는 html의 <form>태그의 열고닫는 태그를 생성하는데 사용됩니다. 이 메쏘드를 자세히 보시면 using 문 안에서 사용되고 있는것을 확인하실 수 있습니다. 이 using 문의 닫는 블록이 <form>태그의 닫는 태그를 가져오게됩니다. 이렇게 사용하기가 싫으시다면(using 문을 사용하기 싫으시다면) Html.EndForm() 메쏘드를 사용할 수 있습니다. 이게 더 <form>태그의 열고 닫는 태그를 연상시키는데 직관적일 수 있겠네요^^;
Html.TextBox() 메쏘드는 html의 <input>태그를 렌더합니다. <%~%> 가 아닌 <%= ~ %>로 되어있는 것을 보실수 있는데요, '=' 이없으면 브라우저에는 아무것도 렌더할 수가 없습니다. 에.러.죠.
그래서 잘~출력된 페이지의 소스를 보면 다음과 같습니다.

Static 메쏘드로 HTML 도우미 만들기

새로운 HTML 도우미를 만드는 가장 쉬운 방법은 string 을 리턴하는 static 메쏘드를 만드는 것입니다. 예를 들어 html 의 <label> 태그를 렌더하는 HTML 도우미를 생성한다면 다음의 소스처럼 만들면 되겠죠?

간단합니다. 단지 string 을 반환할 뿐이죠. 좀전에 했던 인덱스 페이지를 약간 수정하도록 하겠습니다.

보시면 MvcApplication.Helpers 라는 네임스페이스를 임포트하는 <% Import %> 문이 추가되었고, LabelHelper를 이용하여 Label을 렌더하도록 firstName Label이 수정되었습니다. 물론 출력되는 결과는 같습니다.

확장 메쏘드로 HTML 도우미 만들기

여기서는 프레임워크에 내장되어있는 HTML 도우미를 확장해서 사용해보도록 하겠습니다. 확장 메쏘드는 우리가 필요로 하는 메쏘드를 현재 존재하는 클래스에 추가할 수 있도록 해줍니다. 이 메쏘드를 만들게 되면 View에서 보여지는 Html 도우미 클래스의 메쏘드를 나타낼수 있습니다. 예제로 보시는게 빠르겠네요^^;;

아.. 제가 using 문은 다 빼놓고 캡춰하고 있는데요. 여기서는 String과 HtmlHelper 때~문~에
using System;
using System.Web.Mvc;
두개를 선언해주어야합니다.
위 클래스는 HtmlHelper 의 Label() 메쏘드의 확장메쏘드를 추가하는 것을 보실수 있습니다. 여기서 결부시켜서 봐야할 것은 일단 이 클래스가 static으로 되어있다는 점, 또 한가지는 this 키워드를 사용하여 이 확장메쏘드를 카리키고 있다는 점 두가지죠. 빌드 후에 뷰페이지에서 확인을 해보면

우리가 좀전에 만든 확장메쏘드에 관련된 인텔리센스를 제공하는 것을 보실수 있습니다.^^
사용법은 LabelHelper.Label() 이랑 똑같겠죠? ㅎㅎ;

이번 포스팅에서는 두가지만 기억하시면 됩니다. static, extension
HTML 도우미 메쏘드를 만드는 방법으로 static 메쏘드로 생성하는 것을 배웠고요, HTML 도우미 클래스의 확장메쏘드로 생성하는 방법을 배웠습니다.

그럼 다음 포스팅때 뵙겠습니다.
감기조심하세요~^^

참고자료
http://www.asp.net/learn/mvc/tutorial-09-cs.aspx