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

작성자: 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 도우미로 렌더링된 페이지

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

목록 1 – Views\Home\Index.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Index.aspx.vb" 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 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" />    
     <% End Using %>
     </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="VB" AutoEventWireup="false" CodeBehind="Index.aspx.vb" 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.vb

Public Class LabelHelper
Public Shared Function Label(ByVal target As String, ByVal text As String) As String
     Return String.Format("<label for='{0}'>{1}</label>", target, text)
End Function
End Class

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

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

목록 2 – Views\Home\Index2.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Index2.aspx.vb" Inherits="MvcApplication1.Index2"%>
<%@ Import Namespace="MvcApplication1" %>
<!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" />
     <% End Using %>
     </div>
</body>
</html>

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

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

목록 3의 Visual Basic 모듈은 라는 Label() 확장 메서드를 클래스에 HtmlHelper 추가합니다. 이 모듈에 대해 알아야 할 몇 가지 사항이 있습니다. 먼저 모듈이 특성으로 <Extension()> 데코레이팅됩니다. 이 특성을 사용하려면 네임스페이스를 System.Runtime.CompilerServices 가져와야 합니다.

둘째, 메서드의 첫 번째 매개 변수가 Label() 클래스를 나타내는 것을 HtmlHelper 확인합니다. 확장 메서드의 첫 번째 매개 변수는 확장 메서드가 확장하는 클래스를 나타냅니다.

목록 3 – Helpers\LabelExtensions.vb

Imports System.Runtime.CompilerServices

Public Module LabelExtensions
     <Extension()> _
     Public Function Label(ByVal helper As HtmlHelper, ByVal target As String, ByVal text As String) As String
          Return String.Format("<label for='{0}'> {1}</label>", target, text)

     End Function
End Module

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

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

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

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

목록 4 – Views\Home\Index3.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Index3.aspx.vb" Inherits="MvcApplication1.Index3" %>

<%@ Import Namespace="MvcApplication1" %>
<!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" />    
     <% End Using%>
     </div>
</body>
</html>

요약

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

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