ASP.NET 웹 페이지(Razor) 사이트에서 도우미 만들기 및 사용

아티클
07/13/2023

이 문서에서는 ASP.NET 웹 페이지(Razor) 웹 사이트에서 도우미를 만드는 방법을 설명합니다. 도우미는 지루하거나 복잡할 수 있는 작업을 수행하기 위한 코드와 태그를 포함하는 재사용 가능한 구성 요소입니다.

학습할 내용:

간단한 도우미를 만들고 사용하는 방법.

다음은 문서에 도입된 ASP.NET 기능입니다.

@helper 구문입니다.

자습서에서 사용되는 소프트웨어 버전

ASP.NET 웹 페이지(Razor) 3

이 자습서는 ASP.NET 웹 페이지 2에서도 작동합니다.

도우미 개요

사이트의 다른 페이지에서 동일한 작업을 수행해야 하는 경우 도우미를 사용할 수 있습니다. ASP.NET 웹 페이지 많은 도우미가 포함되어 있으며 다운로드하여 설치할 수 있는 많은 도우미가 있습니다. (ASP.NET 웹 페이지 기본 제공 도우미 목록은 ASP.NET API 빠른 참조에 나열됩니다.) 기존 도우미가 요구 사항을 충족하지 않는 경우 사용자 고유의 도우미를 만들 수 있습니다.

도우미를 사용하면 여러 페이지에서 공통 코드 블록을 사용할 수 있습니다. 페이지에서 일반 단락과 별도로 설정된 메모 항목을 만들려고 하는 경우가 많다고 가정합니다. 아마도 메모는 테두리가 있는 <div> 상자로 스타일이 지정된 요소로 만들어집니다. 메모를 표시할 때마다 페이지에 동일한 태그를 추가하는 대신 태그를 도우미로 패키지할 수 있습니다. 그런 다음 필요한 모든 위치에 한 줄의 코드로 메모를 삽입할 수 있습니다.

이와 같은 도우미를 사용하면 각 페이지의 코드를 더 간단하고 쉽게 읽을 수 있습니다. 또한 노트 모양을 변경해야 하는 경우 한 곳에서 태그를 변경할 수 있으므로 사이트를 더 쉽게 유지 관리할 수 있습니다.

도우미 만들기

이 절차에서는 설명한 대로 메모를 만드는 도우미를 만드는 방법을 보여줍니다. 간단한 예제이지만 사용자 지정 도우미에는 필요한 태그 및 ASP.NET 코드가 포함될 수 있습니다.

웹 사이트의 루트 폴더에서 App_Code 폴더를 만듭니다. 도우미와 같은 구성 요소에 대한 코드를 넣을 수 있는 ASP.NET 예약된 폴더 이름입니다.
App_Code 폴더에서 새 .cshtml 파일을 만들고 이름을 MyHelpers.cshtml로 지정합니다.
기존 콘텐츠를 다음으로 바꿉다.
```
@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새 도우미를 선언합니다. 이 특정 도우미를 사용하면 텍스트와 태그의 조합을 포함할 수 있는 라는 content 매개 변수를 전달할 수 있습니다. 도우미는 변수를 사용하여 문자열을 메모 본문에 삽입합니다 @content .

파일 이름은 MyHelpers.cshtml이지만 도우미 이름은 입니다 MakeNote. 여러 사용자 지정 도우미를 단일 파일에 넣을 수 있습니다.
파일을 저장하고 닫습니다.

페이지에서 도우미 사용

루트 폴더에서 TestHelper.cshtml이라는 새 빈 파일을 만듭니다.
파일에 다음 코드를 추가합니다.
```
<!DOCTYPE html>
  <head>
    <title>Test Helpers Page</title>
  </head>
  <body>
    <p>This is some opening paragraph text.</p>

    
    @MyHelpers.MakeNote("My test note content.")

    <p>This is some following text.</p>
  </body>
</html>
```
만든 도우미를 호출하려면 도우미가 있는 파일 이름, 점 및 도우미 이름을 사용합니다 @ . (App_Code 폴더에 여러 폴더가 있는 경우 구문을 @FolderName.FileName.HelperName 사용하여 중첩된 폴더 수준 내에서 도우미를 호출할 수 있습니다. 괄호 안에 따옴표로 추가하는 텍스트는 도우미가 웹 페이지에서 메모의 일부로 표시할 텍스트입니다.
페이지를 저장하고 브라우저에서 실행합니다. 도우미는 도우미를 호출한 바로 다음 두 단락 사이에 메모 항목을 생성합니다.

추가 리소스

Razor 도우미의 가로 메뉴입니다. Mike Pope의 이 블로그 항목에서는 태그, CSS 및 코드를 사용하여 도우미로 가로 메뉴를 만드는 방법을 보여 줍니다.

WebMatrix 및 ASP.NET MVC3용 ASP.NET 웹 페이지 도우미에서 HTML5를 활용합니다. Sam Abraham의 이 블로그 항목에서는 HTML5 Canvas 요소를 렌더링하는 도우미를 보여 줍니다.

The Difference Between @Helpers and @Functions in WebMatrix. Mike Brind의 이 블로그 항목에서는 구문과 구문 및 @function 각 구문을 사용해야 하는 경우에 대해 설명 @helper 합니다.

다음을 통해 공유

ASP.NET 웹 페이지(Razor) 사이트에서 도우미 만들기 및 사용

자습서에서 사용되는 소프트웨어 버전

도우미 개요

도우미 만들기

페이지에서 도우미 사용

추가 리소스

피드백

추가 리소스