ASP.NET MVC 프레임워크에는 HTML 도우미를 만드는 TagBuilder 클래스를 가지고 있습니다. 이름에서도 풍기듯이 이 클래스는 HTML 태그들을 쉽게 만들수 있게 도와줍니다.
자, 이제 이 TagBuilder 라는 놈을 만나러 가볼까요?
TagBuilder 클래스 살펴보기
TagBuilder 클래스는 당연히 System.Web.Mvc 네임스페이스에 포함되어있는 클래스고, 5개의 메쏘드를 가지고 있습니다.
1. AddCssClass() - 태그에 새 class="" 속성 추가하기
2. GenerateId() - 태그에 id 속성 추가하기. 이 메쏘드는 자동적으로 아이디에 있는 점을 바꿉니다(디폴트로, 점은 밑줄로 바뀝니다)
3. MergeAttribute() - 태그에 속성 추가하기. 여러개를 중복(overload)해서 적용가능합니다
4. SetInnerText() - 태그안에에 텍스트 세팅하기. HTML 태그도 그냥 텍스트로 인식합니다.
5. ToString() - 태그를 렌더합니다.
태그빌더 클래스의 4가지 중요한 속성들
1. Atrributes - 태그의 모든 속성을 대표합니다.
2. IdAttributeDotReplacement - GenerateId() 메쏘드가 '.' 대신 대체할 캐릭터를 대표합니다.(기본값은 밑줄), GenerateId() 호출 전에 사용해야겠죠?^^;
3. InnerHTML - 태그의 이너 컨텐트를 대표합니다. HTML 태그를 해석해서 표현합니다.
4. TagName - 태그의 이름을 대표합니다.
이 메쏘드의 속성들은 HTML 태그를 만드는데 필요한 기본적인 것을 제공합니다. 태그 빌더 클래스를 사용하지 않고 스트링빌더(StringBuilder) 클래스를 대신 사용할 수도 있습니다. 하지만, 태그빌더 클래스가 조금더 쉽게 태그를 만들도록 도와줄 것입니다.
Image HTML 도우미 만들기
태그빌더 클래스의 인스턴스를 생성할때, 생성자에서 태그네임(name)은 생략할 수 있습니다. 그런 다음, AddCssClass(), MergeAttribute() 메쏘드를 호출하여 태그의 어트리뷰트를 수정합니다. 마지막으로, ToString() 메쏘드를 호출하여 태그를 렌더합니다.
지금 구현할 Image 도우미는 태그빌더에 의해 내부적으로 HTML <img> 태그로 구현됩니다.
캡쳐 1 - Helpers\ImageHelper.cs
소스를 보시면 Image라는 이름으로 두개의 오버로드된 정적 메쏘드가 있습니다. HTML 어트리뷰트 셋 오브젝트가 있는지 없는지에 따라 각각 호출이 되죠.
TagBuilder.MergeAttribute() 메쏘드는 src 속성과 같은 각각의 속성들을 태그빌더에 추가합니다. 또한 속성들의 콜렉션도 추가합니다. 한가지 더, MergeAttributes() 메쏘드는 Dictionary<string,object> 파라미터를 수용합니다. RouteValueDictionary 클래스는 애트리뷰트들의 콜렉션 오브젝트를 Dictionary<string,object>로 변환해줌으로 MergeAttributes() 에서 사용할 수 있게되는 거죠.
Image 도우미를 만든 후에는, 뷰페이지에서 다른 HTML 도우미처럼 사용할 수 있습니다. 지난 포스팅때도 HTML 도우미를 만들어서 사용해봤습니다만, 이번 포스팅은 좀 다르죠?^^; 다음 두 그림은 애트리뷰트 콜렉션을 파라미터로 포함하냐 안하냐에 따라서 HTML 도우미를 호출하는 예입니다. HTML attributes를 포함하는 쪽에는 속성들에 border는 4px로 width는 120px을 넘겨주도록 하죠.
캡쳐 2 - Home\Index.aspx
캡쳐 3 - 인덱스 페이지
캡쳐 4 - 인덱스 페이지 소스 보기
소스를 보시면 img.img1은 img_img1로 표현된 것을 확인할 수 있고, HTML attributes에 넘겼던 border, width가 표현된 것을 확인할 수 있습니다.
Image 도우미를 사용하기 위해서는 이 도우미를 가지고 있는 네임스페이스를 뷰페이지 상단에 포함시켜야 합니다. 임포트할 네임스페이스는 다음과 같습니다.
<%@ Import Namespace="MvcApplication1.Helpers" %>
Image 도우미와 같은 방식으로 Text 도우미와 Div 도우미를 만들어봤습니다.
추가된 소스는 Text 도우미와 Div 도우미의 핵심 소스를 살펴보겠습니다.
캡쳐 5 - Text 도우미
IdAttributeDotReplacement 속성을 사용하여 '.'을 밑줄로 대체하던 것을 'A' 로 대체되도록 수정하였습니다. 그런데 이 속성은 언제 유용하게 쓰일까요? -_-;
캡쳐 6 - Div 도우미
text 값이 "<a href='http://sses.tistory.com'>쎄스의 블로그</a>" 일때 SetInnerText()를 사용하면 페이지에서 렌더될때 "<a href='http://sses.tistory.com'>쎄스의 블로그</a>" 그대로 출력이 됩니다. 하지만 InnerHtml 을 사용하면 html 태그로 표현되어 나타나는 것을 확인할 수 있습니다.
캡쳐 7 - 최종 인덱스 페이지 소스 및 브라우저 확인
캡쳐 8 - 렌더링된 인덱스 페이지 소스 보기
오늘로 뷰는 마치려합니다. 부족하지만 다음에 더 하도록 하고요^^;
다음은 모델에 대해서 알아보도록 하겠습니다.^^
ASP.NET MVC - View(4)
활기차게 시작해보겠습니다. 하나하나의 글이 성공으로 가는 지름길임을 믿으면서..
TagBuilder 클래스를 이용한 HTML도우미 만들기
ASP.NET MVC 프레임워크에는 HTML 도우미를 만드는 TagBuilder 클래스를 가지고 있습니다. 이름에서도 풍기듯이 이 클래스는 HTML 태그들을 쉽게 만들수 있게 도와줍니다.
자, 이제 이 TagBuilder 라는 놈을 만나러 가볼까요?
TagBuilder 클래스 살펴보기
TagBuilder 클래스는 당연히 System.Web.Mvc 네임스페이스에 포함되어있는 클래스고, 5개의 메쏘드를 가지고 있습니다.
1. AddCssClass() - 태그에 새 class="" 속성 추가하기
2. GenerateId() - 태그에 id 속성 추가하기. 이 메쏘드는 자동적으로 아이디에 있는 점을 바꿉니다(디폴트로, 점은 밑줄로 바뀝니다)
3. MergeAttribute() - 태그에 속성 추가하기. 여러개를 중복(overload)해서 적용가능합니다
4. SetInnerText() - 태그안에에 텍스트 세팅하기. HTML 태그도 그냥 텍스트로 인식합니다.
5. ToString() - 태그를 렌더합니다.
태그빌더 클래스의 4가지 중요한 속성들
1. Atrributes - 태그의 모든 속성을 대표합니다.
2. IdAttributeDotReplacement - GenerateId() 메쏘드가 '.' 대신 대체할 캐릭터를 대표합니다.(기본값은 밑줄), GenerateId() 호출 전에 사용해야겠죠?^^;
3. InnerHTML - 태그의 이너 컨텐트를 대표합니다. HTML 태그를 해석해서 표현합니다.
4. TagName - 태그의 이름을 대표합니다.
이 메쏘드의 속성들은 HTML 태그를 만드는데 필요한 기본적인 것을 제공합니다. 태그 빌더 클래스를 사용하지 않고 스트링빌더(StringBuilder) 클래스를 대신 사용할 수도 있습니다. 하지만, 태그빌더 클래스가 조금더 쉽게 태그를 만들도록 도와줄 것입니다.
Image HTML 도우미 만들기
태그빌더 클래스의 인스턴스를 생성할때, 생성자에서 태그네임(name)은 생략할 수 있습니다. 그런 다음, AddCssClass(), MergeAttribute() 메쏘드를 호출하여 태그의 어트리뷰트를 수정합니다. 마지막으로, ToString() 메쏘드를 호출하여 태그를 렌더합니다.
지금 구현할 Image 도우미는 태그빌더에 의해 내부적으로 HTML <img> 태그로 구현됩니다.
캡쳐 1 - Helpers\ImageHelper.cs
소스를 보시면 Image라는 이름으로 두개의 오버로드된 정적 메쏘드가 있습니다. HTML 어트리뷰트 셋 오브젝트가 있는지 없는지에 따라 각각 호출이 되죠.
TagBuilder.MergeAttribute() 메쏘드는 src 속성과 같은 각각의 속성들을 태그빌더에 추가합니다. 또한 속성들의 콜렉션도 추가합니다. 한가지 더, MergeAttributes() 메쏘드는 Dictionary<string,object> 파라미터를 수용합니다. RouteValueDictionary 클래스는 애트리뷰트들의 콜렉션 오브젝트를 Dictionary<string,object>로 변환해줌으로 MergeAttributes() 에서 사용할 수 있게되는 거죠.
Image 도우미를 만든 후에는, 뷰페이지에서 다른 HTML 도우미처럼 사용할 수 있습니다. 지난 포스팅때도 HTML 도우미를 만들어서 사용해봤습니다만, 이번 포스팅은 좀 다르죠?^^; 다음 두 그림은 애트리뷰트 콜렉션을 파라미터로 포함하냐 안하냐에 따라서 HTML 도우미를 호출하는 예입니다. HTML attributes를 포함하는 쪽에는 속성들에 border는 4px로 width는 120px을 넘겨주도록 하죠.
캡쳐 2 - Home\Index.aspx
캡쳐 3 - 인덱스 페이지
캡쳐 4 - 인덱스 페이지 소스 보기
소스를 보시면 img.img1은 img_img1로 표현된 것을 확인할 수 있고, HTML attributes에 넘겼던 border, width가 표현된 것을 확인할 수 있습니다.
Image 도우미를 사용하기 위해서는 이 도우미를 가지고 있는 네임스페이스를 뷰페이지 상단에 포함시켜야 합니다. 임포트할 네임스페이스는 다음과 같습니다.
Image 도우미와 같은 방식으로 Text 도우미와 Div 도우미를 만들어봤습니다.
추가된 소스는 Text 도우미와 Div 도우미의 핵심 소스를 살펴보겠습니다.
캡쳐 5 - Text 도우미
IdAttributeDotReplacement 속성을 사용하여 '.'을 밑줄로 대체하던 것을 'A' 로 대체되도록 수정하였습니다. 그런데 이 속성은 언제 유용하게 쓰일까요? -_-;
캡쳐 6 - Div 도우미
text 값이 "<a href='http://sses.tistory.com'>쎄스의 블로그</a>" 일때 SetInnerText()를 사용하면 페이지에서 렌더될때 "<a href='http://sses.tistory.com'>쎄스의 블로그</a>" 그대로 출력이 됩니다. 하지만 InnerHtml 을 사용하면 html 태그로 표현되어 나타나는 것을 확인할 수 있습니다.
캡쳐 7 - 최종 인덱스 페이지 소스 및 브라우저 확인
캡쳐 8 - 렌더링된 인덱스 페이지 소스 보기
오늘로 뷰는 마치려합니다. 부족하지만 다음에 더 하도록 하고요^^;
다음은 모델에 대해서 알아보도록 하겠습니다.^^
참고자료
http://www.asp.net/learn/mvc/tutorial-35-cs.aspx
'.NET > MVC Basic' 카테고리의 다른 글