ASP.NET 웹 페이지 (Razor) 사이트에서 도우미 만들기 및 사용Creating and Using a Helper in an ASP.NET Web Pages (Razor) Site

만든 사람 Tom FitzMackenby Tom FitzMacken

이 문서에서는 Razor (ASP.NET 웹 페이지) 웹 사이트에서 도우미를 만드는 방법을 설명 합니다.This article describes how to create a helper in an ASP.NET Web Pages (Razor) website. 도우미 는 지루한 또는 복잡할 수 있는 작업을 수행 하기 위한 코드와 태그를 포함 하는 재사용 가능한 구성 요소입니다.A helper is a reusable component that includes code and markup to perform a task that might be tedious or complex.

학습 내용:What you'll learn:

  • 간단한 도우미를 만들고 사용 하는 방법입니다.How to create and use a simple helper.

다음은이 문서에 도입 된 ASP.NET 기능입니다.These are the ASP.NET features introduced in the article:

  • @helper 구문입니다.The @helper syntax.

자습서에서 사용 되는 소프트웨어 버전Software versions used in the tutorial

  • ASP.NET 웹 페이지 (Razor) 3ASP.NET Web Pages (Razor) 3

이 자습서는 ASP.NET 웹 페이지 2 에서도 작동 합니다.This tutorial also works with ASP.NET Web Pages 2.

도우미 개요Overview of Helpers

사이트의 서로 다른 페이지에서 동일한 작업을 수행 해야 하는 경우 도우미를 사용할 수 있습니다.If you need to perform the same tasks on different pages in your site, you can use a helper. ASP.NET 웹 페이지에는 많은 도우미가 포함 되어 있으며 다운로드 하 고 설치할 수 있는 많은 기능이 있습니다.ASP.NET Web Pages includes a number of helpers, and there are many more that you can download and install. ASP.NET 웹 페이지의 기본 제공 도우미 목록은 ASP.NET API 빠른 참조에 나열 되어 있습니다. 사용자의 요구를 충족 하는 기존 도우미가 없는 경우 사용자 고유의 도우미를 만들 수 있습니다.(A list of the built-in helpers in ASP.NET Web Pages is listed in the ASP.NET API Quick Reference.) If none of the existing helpers meet your needs, you can create your own helper.

도우미를 사용 하면 여러 페이지에서 공통 코드 블록을 사용할 수 있습니다.A helper lets you use a common block of code across multiple pages. 페이지에서 일반적으로 일반 단락과 별도로 설정 된 메모 항목을 만들려고 한다고 가정 합니다.Suppose that in your page you often want to create a note item that's set apart from normal paragraphs. 노트는 테두리가 있는 상자로 스타일을 지정 하는 <div> 요소로 생성 될 것입니다.Perhaps the note is created as a <div> element that's styled as a box with a border. 메모를 표시 하려고 할 때마다 동일한 태그를 페이지에 추가 하는 대신 태그를 도우미로 패키지할 수 있습니다.Rather than add this same markup to a page every time you want to display a note, you can package the markup as a helper. 그런 다음 필요에 맞게 한 줄의 코드를 사용 하 여 메모를 삽입할 수 있습니다.You can then insert the note with a single line of code anywhere you need it.

이와 같은 도우미를 사용 하면 각 페이지의 코드를 보다 간단 하 고 쉽게 읽을 수 있습니다.Using a helper like this makes the code in each of your pages simpler and easier to read. 또한 노트의 모양을 변경 해야 하는 경우에는 한 곳에서 태그를 변경할 수 있기 때문에 사이트를 더 쉽게 유지 관리할 수 있습니다.It also makes it easier to maintain your site, because if you need to change how the notes look, you can change the markup in one place.

도우미 만들기Creating a Helper

이 절차에서는 설명 된 대로 메모를 만드는 도우미를 만드는 방법을 보여 줍니다.This procedure shows you how to create the helper that creates the note, as just described. 이는 간단한 예제 이지만 사용자 지정 도우미에는 필요한 모든 태그 및 ASP.NET 코드가 포함 될 수 있습니다.This is a simple example, but the custom helper can include any markup and ASP.NET code that you need.

  1. 웹 사이트의 루트 폴더에서 App_Code라는 폴더를 만듭니다.In the root folder of the website, create a folder named App_Code. ASP.NET에서 도우미와 같은 구성 요소에 대 한 코드를 넣을 수 있는 예약 된 폴더 이름입니다.This is a reserved folder name in ASP.NET where you can put code for components like helpers.

  2. 앱_코드 폴더에서 새 cshtml 파일을 만들고 이름을 myororors로 만듭니다.In the App_Code folder create a new .cshtml file and name it MyHelpers.cshtml.

  3. 기존 콘텐츠를 다음으로 바꿉니다.Replace the existing content with the following:

    @helper MakeNote(string content) {
      <div class="note" 
           style="border: 1px solid black; width: 90%; padding: 5px; margin-left: 15px;">
        <p>
          <strong>Note</strong>&nbsp;&nbsp; @content
        </p>
      </div>
    }
    

    이 코드는 @helper 구문을 사용 하 여 MakeNote라는 새 도우미를 선언 합니다.The code uses the @helper syntax to declare a new helper named MakeNote. 이 특정 도우미를 사용 하면 텍스트와 태그의 조합을 포함할 수 있는 content 매개 변수를 전달할 수 있습니다.This particular helper lets you pass a parameter named content that can contain a combination of text and markup. 도우미는 @content 변수를 사용 하 여 메모 본문에 문자열을 삽입 합니다.The helper inserts the string into the note body using the @content variable.

    파일 이름은 myhelpers. cshtml이지만 도우미의 이름은 MakeNote입니다.Notice that the file is named MyHelpers.cshtml, but the helper is named MakeNote. 단일 파일에 여러 사용자 지정 도우미를 넣을 수 있습니다.You can put multiple custom helpers into a single file.

  4. 파일을 저장하고 닫습니다.Save and close the file.

페이지에서 도우미 사용Using the Helper in a Page

  1. 루트 폴더에서 TestHelper라는 비어 있는 새 파일을 만듭니다.In the root folder, create a new blank file called TestHelper.cshtml.

  2. 파일에 다음 코드를 추가합니다.Add the following code to the file:

    <!DOCTYPE html>
      <head>
        <title>Test Helpers Page</title>
      </head>
      <body>
        <p>This is some opening paragraph text.</p>
    
        <!-- Insert the call to your note helper here. -->
        @MyHelpers.MakeNote("My test note content.")
    
        <p>This is some following text.</p>
      </body>
    </html>
    

    만든 도우미를 호출 하려면 @와 도우미가 있는 파일 이름, 점, 도우미 이름을 차례로 사용 합니다.To call the helper you created, use @ followed by the file name where the helper is, a dot, and then the helper name. 앱_코드 폴더에 여러 폴더가 있는 경우 @FolderName.FileName.HelperName 구문을 사용 하 여 모든 중첩 된 폴더 수준 내에서 도우미를 호출할 수 있습니다.(If you had multiple folders in the App_Code folder, you could use the syntax @FolderName.FileName.HelperName to call your helper within any nested folder level). 괄호 안에 인용 부호로 추가 하는 텍스트는 도우미가 웹 페이지에 있는 메모의 일부로 표시 하는 텍스트입니다.The text that you add in quotation marks within the parentheses is the text that the helper will display as part of the note in the web page.

  3. 페이지를 저장 하 고 브라우저에서 실행 합니다.Save the page and run it in a browser. 도우미는 도우미를 호출한 경우 두 단락 사이에 메모 항목을 생성 합니다.The helper generates the note item right where you called the helper: between the two paragraphs.

    브라우저의 페이지와 도우미가 지정 된 텍스트 주위에 상자를 넣는 태그를 생성 하는 방법을 보여 주는 스크린샷

추가 리소스Additional Resources

Razor 도우미로 서의 가로 메뉴입니다.Horizontal menu as a Razor helper. Mike Pope이 블로그 항목은 태그, CSS 및 코드를 사용 하 여 도우미로 가로 메뉴를 만드는 방법을 보여 줍니다.This blog entry by Mike Pope shows how to create a horizontal menu as a helper using markup, CSS, and code.

WebMatrix 및 ASP.NET MVC3에 대 한 ASP.NET 웹 페이지 도우미에서 HTML5 활용Leveraging HTML5 in ASP.NET Web Pages Helpers for WebMatrix and ASP.NET MVC3. Sam Abraham이 블로그 항목에는 HTML5 Canvas 요소를 렌더링 하는 도우미가 표시 됩니다.This blog entry by Sam Abraham shows a helper that renders an HTML5 Canvas element.

WebMatrix의 @Helpers와 @Functions 간의 차이점입니다.The Difference Between @Helpers and @Functions in WebMatrix. Mike Brind의이 블로그 항목에서는 구문 및 @function 구문과 각 구문을 사용 하는 경우 @helper 설명 합니다.This blog entry by Mike Brind describes @helper syntax and @function syntax and when to use each.