ASP.NET Core의 부분 태그 도우미Partial Tag Helper in ASP.NET Core

작성자: Scott AddieBy Scott Addie

태그 도우미에 대한 개요는 ASP.NET Core의 태그 도우미를 참조하세요.For an overview of Tag Helpers, see ASP.NET Core의 태그 도우미.

예제 코드 살펴보기 및 다운로드 (다운로드 방법)View or download sample code (how to download)

개요Overview

부분 태그 도우미는 Razor 페이지 및 MVC 앱에서 부분 보기를 렌더링하는 데 사용됩니다.The Partial Tag Helper is used for rendering a partial view in Razor Pages and MVC apps. 고려 사항:Consider that it:

  • ASP.NET Core 2.1 이상이 필요합니다.Requires ASP.NET Core 2.1 or later.
  • HTML 도우미 구문 대신 사용할 수 있습니다.Is an alternative to HTML Helper syntax.
  • 부분 보기를 비동기적으로 렌더링합니다.Renders the partial view asynchronously.

부분 뷰를 렌더링하기 위한 HTML 도우미의 옵션은 다음과 같습니다.The HTML Helper options for rendering a partial view include:

이 문서의 예제 전반에서는 Product 모델이 사용됩니다.The Product model is used in samples throughout this document:

namespace TagHelpersBuiltIn.Models
{
    public class Product
    {
        public int Number { get; set; }

        public string Name { get; set; }

        public string Description { get; set; }
    }
}

부분 태그 도우미의 특성 목록은 다음과 같습니다.An inventory of the Partial Tag Helper attributes follows.

namename

name 특성은 필수입니다.The name attribute is required. 이 특성은 렌더링할 부분 뷰의 이름 또는 경로를 나타냅니다.It indicates the name or the path of the partial view to be rendered. 부분 뷰의 이름을 지정할 경우 뷰 탐색 과정이 시작됩니다.When a partial view name is provided, the view discovery process is initiated. 명시적인 경로가 지정될 경우에는 이 과정이 생략됩니다.That process is bypassed when an explicit path is provided. 허용되는 모든 name 값은 부분 보기 검색을 참조하세요.For all acceptable name values, see Partial view discovery.

다음 태그는 명시적인 경로를 사용해서 Shared 폴더의 _ProductPartial.cshtml을 로드하도록 지시합니다.The following markup uses an explicit path, indicating that _ProductPartial.cshtml is to be loaded from the Shared folder. for 특성을 사용하면 바인딩을 위한 모델이 부분 뷰에 전달됩니다.Using the for attribute, a model is passed to the partial view for binding.

<partial name="Shared/_ProductPartial.cshtml" for="Product">

forfor

for 특성은 현재 모델과 비교 평가할 ModelExpression을 할당합니다.The for attribute assigns a ModelExpression to be evaluated against the current model. ModelExpression@Model. 구문을 추론합니다.A ModelExpression infers the @Model. syntax. 예를 들어 for="@Model.Product" 대신 for="Product"를 사용할 수 있습니다.For example, for="Product" can be used instead of for="@Model.Product". 이 기본 추론 동작은 인라인 식을 정의하는 @ 기호를 사용하여 재정의됩니다.This default inference behavior is overridden by using the @ symbol to define an inline expression.

다음 태그는 _ProductPartial.cshtml을 로드합니다.The following markup loads _ProductPartial.cshtml:

<partial name="_ProductPartial" for="Product">

부분 뷰는 연결된 페이지 모델의 Product 속성과 바인딩됩니다.The partial view is bound to the associated page model's Product property:

using Microsoft.AspNetCore.Mvc.RazorPages;
using TagHelpersBuiltIn.Models;

namespace TagHelpersBuiltIn.Pages
{
    public class ProductModel : PageModel
    {
        public Product Product { get; set; }

        public void OnGet()
        {
            Product = new Product
            {
                Number = 1,
                Name = "Test product",
                Description = "This is a test product"
            };
        }
    }
}

modelmodel

model 특성은 부분 뷰에 전달할 모델의 인스턴스를 할당합니다.The model attribute assigns a model instance to pass to the partial view. model 특성은 for 특성과 함께 사용할 수 없습니다.The model attribute can't be used with the for attribute.

다음 표시에서는 새 Product 개체가 인스턴스화되고 바인딩을 위해 model 특성에 전달됩니다.In the following markup, a new Product object is instantiated and passed to the model attribute for binding:

<partial name="_ProductPartial"
         model='new Product { Number = 1, Name = "Test product", Description = "This is a test" }'>

view-dataview-data

view-data 특성은 부분 보기에 전달할 ViewDataDictionary를 할당합니다.The view-data attribute assigns a ViewDataDictionary to pass to the partial view. 다음 표시를 사용하면 부분 보기에서 전체 ViewData 컬렉션에 액세스할 수 있습니다.The following markup makes the entire ViewData collection accessible to the partial view:

@{
    ViewData["IsNumberReadOnly"] = true;
}

<partial name="_ProductViewDataPartial" for="Product" view-data="ViewData">

위의 코드에서 IsNumberReadOnly 키 값은 true로 설정되고 ViewData 컬렉션에 추가됩니다.In the preceding code, the IsNumberReadOnly key value is set to true and added to the ViewData collection. 따라서 다음 부분 뷰 내에서 ViewData["IsNumberReadOnly"]에 접근할 수 있습니다.Consequently, ViewData["IsNumberReadOnly"] is made accessible within the following partial view:

@model TagHelpersBuiltIn.Models.Product

<div class="form-group">
    <label asp-for="Number"></label>
    @if ((bool)ViewData["IsNumberReadOnly"])
    {
        <input asp-for="Number" type="number" class="form-control" readonly />
    }
    else
    {
        <input asp-for="Number" type="number" class="form-control" />
    }
</div>
<div class="form-group">
    <label asp-for="Name"></label>
    <input asp-for="Name" type="text" class="form-control" />
</div>
<div class="form-group">
    <label asp-for="Description"></label>
    <textarea asp-for="Description" rows="4" cols="50" class="form-control"></textarea>
</div>

이 예제에서 ViewData["IsNumberReadOnly"] 값은 Number 필드가 읽기 전용으로 표시될지 여부를 결정합니다.In this example, the value of ViewData["IsNumberReadOnly"] determines whether the Number field is displayed as read only.

HTML 도우미에서 마이그레이션Migrate from an HTML Helper

다음 비동기 HTML 도우미 예제를 살펴보세요.Consider the following asynchronous HTML Helper example. 제품 컬렉션이 반복되어 표시됩니다.A collection of products is iterated and displayed. PartialAsync 메서드의 첫 번째 매개 변수에 따라, _ProductPartial.cshtml 부분 보기를 로드합니다.Per the PartialAsync method's first parameter, the _ProductPartial.cshtml partial view is loaded. Product 모델의 인스턴스가 바인딩을 위한 모델이 부분 보기에 전달됩니다.An instance of the Product model is passed to the partial view for binding.

@foreach (var product in Model.Products)
{
    @await Html.PartialAsync("_ProductPartial", product)
}

다음 부분 태그 도우미는 PartialAsync HTML 도우미와 동일한 비동기 렌더링 동작을 합니다.The following Partial Tag Helper achieves the same asynchronous rendering behavior as the PartialAsync HTML Helper. 부분 보기에 바인딩하기 위해 Product 모델 인스턴스가 model 특성에 할당됩니다.The model attribute is assigned a Product model instance for binding to the partial view.

@foreach (var product in Model.Products)
{
    <partial name="_ProductPartial" model="product" />
}

추가 자료Additional resources