TagBuilder 클래스를 사용하여 HTML 도우미 빌드(C#)

아티클
07/13/2023

Stephen Walther는 TagBuilder 클래스라는 ASP.NET MVC 프레임워크에서 유용한 유틸리티 클래스를 소개합니다. TagBuilder 클래스를 사용하여 HTML 태그를 쉽게 빌드할 수 있습니다.

ASP.NET MVC 프레임워크에는 HTML 도우미를 빌드할 때 사용할 수 있는 TagBuilder 클래스라는 유용한 유틸리티 클래스가 포함되어 있습니다. 클래스의 이름에서 볼 수 있듯이 TagBuilder 클래스를 사용하면 HTML 태그를 쉽게 빌드할 수 있습니다. 이 간단한 자습서에서는 TagBuilder 클래스에 대한 개요를 제공하며 HTML <img> 태그를 렌더링하는 간단한 HTML 도우미를 빌드할 때 이 클래스를 사용하는 방법을 알아봅니다.

TagBuilder 클래스 개요

TagBuilder 클래스는 System.Web.Mvc 네임스페이스에 포함되어 있습니다. 다음과 같은 5가지 메서드가 있습니다.

AddCssClass() - 태그에 새 class="" 특성을 추가할 수 있습니다.
GenerateId() - 태그에 ID 특성을 추가할 수 있습니다. 이 메서드는 ID의 마침표(기본적으로 마침표는 밑줄로 대체됨)를 자동으로 바꿉니다.
MergeAttribute() - 태그에 특성을 추가할 수 있습니다. 이 메서드에는 여러 오버로드가 있습니다.
SetInnerText() - 태그의 내부 텍스트를 설정할 수 있습니다. 내부 텍스트는 자동으로 HTML 인코딩됩니다.
ToString() - 태그를 렌더링할 수 있습니다. 일반 태그, 시작 태그, 끝 태그 또는 자체 닫는 태그를 만들 것인지 지정할 수 있습니다.

TagBuilder 클래스에는 다음과 같은 네 가지 중요한 속성이 있습니다.

특성 - 태그의 모든 특성을 나타냅니다.
IdAttributeDotReplacement - 마침표(기본값은 밑줄)를 바꾸기 위해 GenerateId() 메서드에서 사용하는 문자를 나타냅니다.
InnerHTML - 태그의 내부 내용을 나타냅니다. 이 속성에 문자열을 할당해도 HTML이 문자열을 인코딩 하지 않습니다 .
TagName - 태그의 이름을 나타냅니다.

이러한 메서드와 속성은 HTML 태그를 빌드하는 데 필요한 모든 기본 메서드와 속성을 제공합니다. TagBuilder 클래스를 실제로 사용할 필요는 없습니다. 대신 StringBuilder 클래스를 사용할 수 있습니다. 그러나 TagBuilder 클래스를 사용하면 인생이 좀 더 쉬워집니다.

이미지 HTML 도우미 만들기

TagBuilder 클래스의 instance 만들 때 빌드하려는 태그의 이름을 TagBuilder 생성자에 전달합니다. 다음으로 AddCssClass 및 MergeAttribute() 메서드와 같은 메서드를 호출하여 태그의 특성을 수정할 수 있습니다. 마지막으로 ToString() 메서드를 호출하여 태그를 렌더링합니다.

예를 들어 목록 1에는 이미지 HTML 도우미가 포함되어 있습니다. 이미지 도우미는 HTML <img> 태그를 나타내는 TagBuilder를 사용하여 내부적으로 구현됩니다.

목록 1 - Helpers\ImageHelper.cs

using System.Web.Mvc;
using System.Web.Routing;

namespace MvcApplication1.Helpers
{
    public static class ImageHelper
    {
        public static string Image(this HtmlHelper helper, string id, string url, string alternateText)
        {
            return Image(helper, id, url, alternateText, null);
        }

        public static string Image(this HtmlHelper helper, string id, string url, string alternateText, object htmlAttributes)
        {
            // Create tag builder
            var builder = new TagBuilder("img");
            
            // Create valid id
            builder.GenerateId(id);

            // Add attributes
            builder.MergeAttribute("src", url);
            builder.MergeAttribute("alt", alternateText);
            builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

            // Render tag
            return builder.ToString(TagRenderMode.SelfClosing);
        }

    }
}

목록 1의 클래스에는 Image라는 두 개의 정적 오버로드된 메서드가 포함되어 있습니다. Image() 메서드를 호출할 때 HTML 특성 집합을 나타내는 개체를 전달할 수 있습니다.

TagBuilder.MergeAttribute() 메서드를 사용하여 TagBuilder에 src 특성과 같은 개별 특성을 추가하는 방법을 확인합니다. 또한 TagBuilder.MergeAttributes() 메서드를 사용하여 TagBuilder에 특성 컬렉션을 추가하는 방법도 확인합니다. MergeAttributes() 메서드는 Dictionary<문자열, 개체> 매개 변수를 허용합니다. RouteValueDictionary 클래스는 특성 컬렉션을 나타내는 Object를 Dictionary<문자열,object>로 변환하는 데 사용됩니다.

이미지 도우미를 만든 후 다른 표준 HTML 도우미와 마찬가지로 ASP.NET MVC 보기에서 도우미를 사용할 수 있습니다. 목록 2의 보기는 이미지 도우미를 사용하여 Xbox의 동일한 이미지를 두 번 표시합니다(그림 1 참조). Image() 도우미는 HTML 특성 컬렉션의 사용 또는 없이 모두 호출됩니다.

목록 2 - Home\Index.aspx

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="MvcApplication1.Helpers" %>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">

    <!-- Calling helper without HTML attributes -->
    <%= Html.Image("img1", ResolveUrl("~/Content/XBox.jpg"), "XBox Console") %>

    <!-- Calling helper with HTML attributes -->
    <%= Html.Image("img1", ResolveUrl("~/Content/XBox.jpg"), "XBox Console", new {border="4px"})%>

</asp:Content>

그림 01: 이미지 도우미 사용(전체 크기 이미지를 보려면 클릭)

Index.aspx 보기의 맨 위에 있는 이미지 도우미와 연결된 네임스페이스를 가져와야 합니다. 도우미는 다음 지시문을 사용하여 가져옵니다.

<%@ Import Namespace="MvcApplication1.Helpers" %>

이전 다음

다음을 통해 공유

TagBuilder 클래스를 사용하여 HTML 도우미 빌드(C#)

TagBuilder 클래스 개요

이미지 HTML 도우미 만들기

피드백

추가 리소스