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

로 마이크로 소프트by Microsoft

PDF 다운로드Download PDF

이 자습서의 목표는 MVC 보기 내에서 사용할 수 있는 사용자 지정 HTML 도우미를 만드는 방법을 보여 주는 것입니다.The goal of this tutorial is to demonstrate how you can create custom HTML Helpers that you can use within your MVC views. HTML 도우미를 활용 하 여 표준 HTML 페이지를 만들 려면 수행 해야 하는 HTML 태그의 지루한 입력의 양을 줄일 수 있습니다.By taking advantage of HTML Helpers, you can reduce the amount of tedious typing of HTML tags that you must perform to create a standard HTML page.

이 자습서의 목표는 MVC 보기 내에서 사용할 수 있는 사용자 지정 HTML 도우미를 만드는 방법을 보여 주는 것입니다.The goal of this tutorial is to demonstrate how you can create custom HTML Helpers that you can use within your MVC views. HTML 도우미를 활용 하 여 표준 HTML 페이지를 만들 려면 수행 해야 하는 HTML 태그의 지루한 입력의 양을 줄일 수 있습니다.By taking advantage of HTML Helpers, you can reduce the amount of tedious typing of HTML tags that you must perform to create a standard HTML page.

이 자습서의 첫 번째 부분에서는 ASP.NET MVC 프레임워크에 포함된 기존 HTML 도우미 중 일부를 설명합니다.In the first part of this tutorial, I describe some of the existing HTML Helpers included with the ASP.NET MVC framework. 다음으로 사용자 지정 HTML 도우미를 만드는 두 가지 방법을 설명합니다.Next, I describe two methods of creating custom HTML Helpers: I explain how to create custom HTML Helpers by creating a shared method and by creating an extension method.

HTML 도우미 이해Understanding HTML Helpers

HTML 도우미는 문자열을 반환 하는 메서드입니다.An HTML Helper is just a method that returns a string. 문자열은 원하는 모든 유형의 콘텐츠를 나타낼 수 있습니다.The string can represent any type of content that you want. 예를 들어 HTML 도우미를 사용하여 HTML <input> 및 태그와 <img> 같은 표준 HTML 태그를 렌더링할 수 있습니다.For example, you can use HTML Helpers to render standard HTML tags like HTML <input> and <img> tags. 또한 HTML 도우미를 사용하여 탭 스트립이나 데이터베이스 데이터의 HTML 테이블과 같은 보다 복잡한 콘텐츠를 렌더링할 수도 있습니다.You also can use HTML Helpers to render more complex content such as a tab strip or an HTML table of database data.

ASP.NET MVC 프레임워크에는 다음과 같은 표준 HTML 도우미 집합이 포함되어 있습니다(전체 목록은 아닙니다).The ASP.NET MVC framework includes the following set of standard HTML Helpers (this is not a complete list):

  • Html.액션링크()Html.ActionLink()
  • Html.시작 양식()Html.BeginForm()
  • Html.체크 박스()Html.CheckBox()
  • Html.드롭다운리스트()Html.DropDownList()
  • Html.엔드폼()Html.EndForm()
  • Html.Hidden()Html.Hidden()
  • Html.리스트박스()Html.ListBox()
  • Html.암호()Html.Password()
  • Html.라디오 버튼()Html.RadioButton()
  • Html.텍스트 영역()Html.TextArea()
  • Html.텍스트 상자()Html.TextBox()

예를 들어 목록 1의 양식을 고려합니다.For example, consider the form in Listing 1. 이 양식은 표준 HTML 도우미 두 대의 도움을 받아 렌더링됩니다(그림 1 참조).This form is rendered with the help of two of the standard HTML Helpers (see Figure 1). 이 양식은 Html.BeginForm() Html.TextBox() 및 도우미 메서드를 사용합니다.This form uses the Html.BeginForm() and Html.TextBox() Helper methods.

HTML 도우미로 렌더링된 페이지Page rendered with HTML Helpers

그림 01: HTML 도우미로 렌더링된페이지(전체 크기 이미지를 보려면 클릭)Figure 01: Page rendered with HTML Helpers (Click to view full-size image)

리스팅 1 –Views\Home\Index.aspxListing 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 <form> 태그를 열고 닫는 데 사용 됩니다.The Html.BeginForm() Helper method is used to create the opening and closing HTML <form> tags. 메서드는 Html.BeginForm() using 문 내에서 호출 됩니다.Notice that the Html.BeginForm() method is called within a using statement. using 문은 사용 블록의 <form> 끝에서 태그가 닫히도록 합니다.The using statement ensures that the <form> tag gets closed at the end of the using block.

원하는 경우 사용 블록을 만드는 대신 Html.EndForm() 도우미 메서드를 호출하여 <form> 태그를 닫을 수 있습니다.If you prefer, instead of creating a using block, you can call the Html.EndForm() Helper method to close the <form> tag. 가장 직관적인 것처럼 보이는 열기 <form> 및 닫기 태그를 만들 려면 어떤 접근 방식을 사용하십시오.Use whichever approach to creating an opening and closing <form> tag that seems most intuitive to you.

도우미 Html.TextBox() 메서드는 목록 1에서 HTML <input> 태그를 렌더링하는 데 사용됩니다.The Html.TextBox() Helper methods are used in Listing 1 to render HTML <input> tags. 브라우저에서 소스 보기를 선택하면 목록 2에 HTML 소스가 표시됩니다.If you select view source in your browser then you see the HTML source in Listing 2. 원본에 표준 HTML 태그가 포함되어 있습니다.Notice that the source contains standard HTML tags.

Important

Html.TextBox()-HTML 도우미는 <% %> 태그 대신 태그로 <%= %> 렌더링됩니다.notice that the Html.TextBox()-HTML Helper is rendered with <%= %> tags instead of <% %> tags. 동일한 기호를 포함하지 않으면 브라우저에 렌더링되지 않습니다.If you don't include the equal sign, then nothing gets rendered to the browser.

ASP.NET MVC 프레임워크에는 작은 도우미 집합이 포함되어 있습니다.The ASP.NET MVC framework contains a small set of helpers. 대부분의 경우 사용자 지정 HTML 도우미를 사용하여 MVC 프레임워크를 확장해야 합니다.Most likely, you will need to extend the MVC framework with custom HTML Helpers. 이 자습서의 나머지 부분에서는 사용자 지정 HTML 도우미를 만드는 두 가지 방법을 배웁니다.In the remainder of this tutorial, you learn two methods of creating custom HTML Helpers.

리스팅 2 –Index.aspx SourceListing 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 도우미 만들기Creating HTML Helpers with Shared Methods

새 HTML 도우미를 만드는 가장 쉬운 방법은 문자열을 반환 하는 공유 메서드를 만드는 것입니다.The easiest way to create a new HTML Helper is to create a shared method that returns a string. 예를 들어 HTML <label> 태그를 렌더링하는 새 HTML 도우미를 만들기로 결정한다고 가정해 보겠습니다.Imagine, for example, that you decide to create a new HTML Helper that renders an HTML <label> tag. 목록 2의 클래스를 사용하여 <label>을 렌더링할 수 있습니다.You can use the class in Listing 2 to render a <label>.

리스팅 2 –Helpers\LabelHelper.vbListing 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의 클래스에 대해 특별한 것은 없습니다.There is nothing special about the class in Listing 2. 메서드는 Label() 단순히 문자열을 반환합니다.The Label() method simply returns a string.

목록 3의 수정된 인덱스 LabelHelper 보기는 <label> HTML 태그를 렌더링하는 데 를 사용합니다.The modified Index view in Listing 3 uses the LabelHelper to render HTML <label> tags. 보기에는 Application1.helpers 네임스페이스를 <%@ imports %> 가져오는 지시문이 포함되어 있습니다.Notice that the view includes an <%@ imports %> directive that imports the Application1.Helpers namespace.

리스팅 2 –Views\Home\Index2.aspxListing 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 도우미 만들기Creating HTML Helpers with Extension Methods

ASP.NET MVC 프레임워크에 포함된 표준 HTML 도우미와 마찬가지로 작동하는 HTML 도우미를 만들려면 확장 메서드를 만들어야 합니다.If you want to create HTML Helpers that work just like the standard HTML Helpers included in the ASP.NET MVC framework then you need to create extension methods. 확장 메서드를 사용하면 기존 클래스에 새 메서드를 추가할 수 있습니다.Extension methods enable you to add new methods to an existing class. HTML 도우미 메서드를 만들 때 뷰의 HtmlHelper Html 속성으로 표시되는 클래스에 새 메서드를 추가합니다.When creating an HTML Helper method, you add new methods to the HtmlHelper class represented by a view's Html property.

목록 3의 시각적 기본 모듈은 Label() 클래스에 HtmlHelper 명명된 확장 메서드를 추가합니다.The Visual Basic module in Listing 3 adds an extension method named Label() to the HtmlHelper class. 이 모듈에 대해 알아차릴 수 있는 몇 가지 사항이 있습니다.There are a couple of things that you should notice about this module. 먼저 모듈이 <Extension()> 특성으로 장식되어 있습니다.First, notice that the module is decorated with the <Extension()> attribute. 이 특성을 사용하려면 네임스페이스를 System.Runtime.CompilerServices 가져와야 합니다.In order to use this attribute, you must import the System.Runtime.CompilerServices namespace

둘째, Label() 메서드의 첫 번째 매개 HtmlHelper 변수가 클래스를 나타냅니다.Second, notice that the first parameter of the Label() method represents the HtmlHelper class. 확장 메서드의 첫 번째 매개 변수는 확장 메서드가 확장되는 클래스를 나타냅니다.The first parameter of an extension method indicates the class that the extension method extends.

리스팅 3 –Helpers\LabelExtensions.vbListing 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 참조).After you create an extension method, and build your application successfully, the extension method appears in Visual Studio Intellisense like all of the other methods of a class (see Figure 2). 유일한 차이점은 확장 메서드 옆에 특수 기호(아래쪽 화살표아이콘)가 표시된다는 것입니다.The only difference is that extension methods appear with a special symbol next to them (an icon of a downward arrow).

Html.Label() 확장 메서드 사용Using the Html.Label() extension method

그림 02: Html.Label() 확장 방법을 사용하여(전체 크기 이미지를 보려면 클릭하십시오)Figure 02: Using the Html.Label() extension method (Click to view full-size image)

목록 4의 수정된 인덱스 보기는 Html.Label() 확장 <메서드를 사용하여 모든 레이블> 태그를 렌더링합니다.The modified Index view in Listing 4 uses the Html.Label() extension method to render all of its <label> tags.

리스팅 4 –Views\Home\Index3.aspxListing 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>

요약Summary

이 자습서에서는 사용자 지정 HTML 도우미를 만드는 두 가지 방법을 배웠습니다.In this tutorial, you learned two methods of creating custom HTML Helpers. 먼저 문자열을 반환하는 공유 Label() 메서드를 만들어 사용자 지정 HTML 도우미를 만드는 방법을 배웠습니다.First, you learned how to create a custom Label() HTML Helper by creating a shared method that returns a string. 다음으로 클래스에 확장 메서드를 Label() 만들어 사용자 지정 HTML 도우미 HtmlHelper 메서드를 만드는 방법을 배웠습니다.Next, you learned how to create a custom Label() HTML Helper method by creating an extension method on the HtmlHelper class.

이 자습서에서는 매우 간단한 HTML 도우미 메서드를 빌드하는 데 중점을 두어 사용했습니다.In this tutorial, I focused on building an extremely simple HTML Helper method. HTML 도우미는 원하는 만큼 복잡할 수 있습니다.Realize that an HTML Helper can be as complicated as you want. 트리 보기, 메뉴 또는 데이터베이스 데이터 테이블과 같은 풍부한 콘텐츠를 렌더링하는 HTML 도우미를 빌드할 수 있습니다.You can build HTML Helpers that render rich content such as tree views, menus, or tables of database data.