사용자 지정 HTML 도우미 만들기(C#)

  • 아티클

작성자: Microsoft

PDF 다운로드

이 자습서의 목표는 MVC 보기 내에서 사용할 수 있는 사용자 지정 HTML 도우미를 만드는 방법을 보여 주는 것입니다. HTML 도우미를 활용하여 표준 HTML 페이지를 만들기 위해 수행해야 하는 HTML 태그의 지루한 입력 양을 줄일 수 있습니다.

이 자습서의 목표는 MVC 보기 내에서 사용할 수 있는 사용자 지정 HTML 도우미를 만드는 방법을 보여 주는 것입니다. HTML 도우미를 활용하여 표준 HTML 페이지를 만들기 위해 수행해야 하는 HTML 태그의 지루한 입력 양을 줄일 수 있습니다.

이 자습서의 첫 번째 부분에서는 ASP.NET MVC 프레임워크에 포함된 기존 HTML 도우미 중 일부를 설명합니다. 다음으로 사용자 지정 HTML 도우미를 만드는 두 가지 방법을 설명합니다. 정적 메서드를 만들고 확장 메서드를 만들어 사용자 지정 HTML 도우미를 만드는 방법을 설명합니다.

HTML 도우미 이해

HTML 도우미는 문자열을 반환하는 메서드일 뿐입니다. 문자열은 원하는 모든 형식의 콘텐츠를 나타낼 수 있습니다. 예를 들어 HTML 도우미를 사용하여 HTML 및 태그와 <img> 같은 <input> 표준 HTML 태그를 렌더링할 수 있습니다. 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()

예를 들어 목록 1의 양식을 고려합니다. 이 양식은 표준 HTML 도우미 두 가지의 도움을 받아 렌더링됩니다(그림 1 참조). 이 양식은 Html.BeginForm() 및 Html.TextBox() 도우미 메서드를 사용하여 간단한 HTML 양식을 렌더링합니다.

HTML 도우미로 렌더링된 페이지

그림 01: HTML 도우미로 렌더링된 페이지(전체 크기 이미지를 보려면 클릭)

목록 1 – Views\Home\Index.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns= "http://www.w3.org/1999/xhtml ">
<head id="Head1" runat="server">
     <title>Index</title>
</head>
<body>
      <div>
          <% using (Html.BeginForm())
          { %>

               <label for="firstName">First Name:</label>
               <br />
               <%= Html.TextBox("firstName")%>
               <br /><br />
               <label for="lastName">Last Name:</label>
               <br />

               <%= Html.TextBox("lastName")%>
               <br /><br />
               <input type="submit" value="Register" />    
          <% } %>
     1     </div>
</body>
</html>

Html.BeginForm() 도우미 메서드는 여는 HTML 태그와 닫는 HTML <form> 태그를 만드는 데 사용됩니다. 메서드는 Html.BeginForm() using 문 내에서 호출됩니다. using 문을 사용하면 <form> using 블록의 끝에서 태그가 닫힙니다.

원하는 경우 using 블록을 만드는 대신 Html.EndForm() 도우미 메서드를 호출하여 태그를 닫을 <form> 수 있습니다. 가장 직관적으로 보이는 여는 태그와 닫는 <form> 태그를 만드는 방법을 사용합니다.

도우미 메서드는 Html.TextBox() 목록 1에서 HTML <input> 태그를 렌더링하는 데 사용됩니다. 브라우저에서 원본 보기를 선택하면 목록 2에 HTML 원본이 표시됩니다. 원본에 표준 HTML 태그가 포함되어 있습니다.

중요

Html.TextBox()-HTML 도우미는 태그 대신 <% %> 태그로 <%= %> 렌더링됩니다. 등호를 포함하지 않으면 아무 것도 브라우저에 렌더링되지 않습니다.

ASP.NET MVC 프레임워크에는 작은 도우미 집합이 포함되어 있습니다. 대부분의 경우 사용자 지정 HTML 도우미를 사용하여 MVC 프레임워크를 확장해야 합니다. 이 자습서의 나머지 부분에서는 사용자 지정 HTML 도우미를 만드는 두 가지 방법을 알아봅니다.

목록 2 – Index.aspx Source

<%@ Page Language="C#" AutoEventWireup="false" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Index" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
     <title>Index</title>
</head>
<body>
     <div>
          <form action="http://localhost:33102/" method="post">
               <label for="firstName">First Name:</label>

               <br />
               <input id="firstName" name="firstName" type="text" value="" />
               <br /><br />
               <label for="lastName">Last Name:</label>
               <br />
               <input id="lastName" name="lastName" type="text" value="" />
               <br /><br />

               <input id="btnRegister" name="btnRegister" type="submit" value="Register" />
          </form>
     </div>
</body>
</html>

정적 메서드를 사용하여 HTML 도우미 만들기

새 HTML 도우미를 만드는 가장 쉬운 방법은 문자열을 반환하는 정적 메서드를 만드는 것입니다. 예를 들어 HTML <label> 태그를 렌더링하는 새 HTML 도우미를 만들기로 결정한다고 상상해 보세요. 목록 2의 클래스를 사용하여 를 렌더링할 수 있습니다 <label> .

목록 2 – Helpers\LabelHelper.cs

using System;
namespace MvcApplication1.Helpers
{
    public class LabelHelper
    {
        public static string Label(string target, string text)
        {
            return String.Format("<label for='{0}'>{1}</label>", target, text);
        }
    }
}

목록 2에는 클래스에 대한 특별한 내용이 없습니다. 메서드는 Label() 단순히 문자열을 반환합니다.

목록 3의 수정된 인덱스 뷰는 을 LabelHelper 사용하여 HTML <label> 태그를 렌더링합니다. 보기에는 네임스페이스를 가져오는 지시문이 Application1.Helpers 포함되어 <%@ imports %> 있습니다.

목록 2 – Views\Home\Index2.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index2.aspx.cs" Inherits="MvcApplication1.Views.Home.Index2"%>
<%@ Import Namespace="MvcApplication1.Helpers" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">

     <title>Index2</title>
</head>
<body>
     <div>
          <% using (Html.BeginForm())
          { %>
               <%= LabelHelper.Label("firstName", "First Name:") %>
               <br />

               <%= Html.TextBox("firstName")%>
               <br /><br />
               <%= LabelHelper.Label("lastName", "Last Name:") %>
               <br />
               <%= Html.TextBox("lastName")%>
               <br /><br />
               <input type="submit" value="Register" />
          <% } %>

     </div>
</body>
</html>

확장 메서드를 사용하여 HTML 도우미 만들기

ASP.NET MVC 프레임워크에 포함된 표준 HTML 도우미처럼 작동하는 HTML 도우미를 만들려면 확장 메서드를 만들어야 합니다. 확장 메서드를 사용하면 기존 클래스에 새 메서드를 추가할 수 있습니다. HTML 도우미 메서드를 만들 때 뷰의 Html 속성으로 표시되는 HtmlHelper 클래스에 새 메서드를 추가합니다.

목록 3의 클래스는 라는 Label()클래스에 확장 메서드를 HtmlHelper 추가합니다. 이 클래스에 대해 알아야 할 몇 가지 사항이 있습니다. 먼저 클래스가 정적 클래스임을 확인합니다. 정적 클래스를 사용하여 확장 메서드를 정의해야 합니다.

둘째, 메서드의 Label() 첫 번째 매개 변수 앞에 키워드(keyword) this합니다. 확장 메서드의 첫 번째 매개 변수는 확장 메서드가 확장하는 클래스를 나타냅니다.

목록 3 – Helpers\LabelExtensions.cs

using System;
using System.Web.Mvc;

namespace MvcApplication1.Helpers
{
     public static class LabelExtensions
     {
          public static string Label(this IHtmlHelper helper, string target, string text)
          {
               return String.Format("<label for='{0}'>{1}</label>", target, text);
          }
     }
}

확장 메서드를 만들고 애플리케이션을 성공적으로 빌드한 후 확장 메서드는 클래스의 다른 모든 메서드와 마찬가지로 Visual Studio Intellisense에 표시됩니다(그림 2 참조). 유일한 차이점은 확장 메서드가 옆에 특수 기호(아래쪽 화살표 아이콘)와 함께 표시된다는 것입니다.

Html.Label() 확장 메서드 사용

그림 02: Html.Label() 확장 메서드 사용(전체 크기 이미지를 보려면 클릭)

목록 4의 수정된 인덱스 보기는 Html.Label() 확장 메서드를 사용하여 모든 태그를 <label> 렌더링합니다.

목록 4 – Views\Home\Index3.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index3.aspx.cs" Inherits="MvcApplication1.Views.Home.Index3" %>

<%@ Import Namespace="MvcApplication1.Helpers" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
     <title>Index3</title>
</head>
<body>
     <div>

          <% using (Html.BeginForm())
          { %>
               <%= Html.Label("firstName", "First Name:") %>    
               <br />
               <%= Html.TextBox("firstName")%>
               <br /><br />
               <%= Html.Label("lastName", "Last Name:") %>    
               <br />
               <%= Html.TextBox("lastName")%>

               <br /><br />
               <input type="submit" value="Register" />
          <% } %>
     </div>
</body>
</html>

요약

이 자습서에서는 사용자 지정 HTML 도우미를 만드는 두 가지 방법을 알아보았습니다. 먼저 문자열을 반환하는 정적 메서드를 만들어 사용자 지정 Label() HTML 도우미를 만드는 방법을 알아보았습니다. 다음으로, 클래스에서 확장 메서드를 만들어 사용자 지정 Label() HTML 도우미 메서드 HtmlHelper 를 만드는 방법을 알아보았습니다.

이 자습서에서는 매우 간단한 HTML 도우미 메서드를 빌드하는 데 집중했습니다. HTML 도우미는 원하는 만큼 복잡할 수 있습니다. 트리 뷰, 메뉴 또는 데이터베이스 데이터 테이블과 같은 풍부한 콘텐츠를 렌더링하는 HTML 도우미를 빌드할 수 있습니다.

이전다음