ASP.NET Core의 부분 태그 도우미

스콧 애디

태그 도우미에 대한 개요는 ASP.NET Core 태그 도우미를 참조하세요.

샘플 코드 보기 또는 다운로드(다운로드하는 방법)

개요

부분 태그 도우미는 Pages 및 MVC 앱에서 Razor 렌더링하는 데 사용됩니다. 이것을 고려하세요:

• ASP.NET Core 2.1 이상이 필요합니다.
• 은(는) HTML 도우미 구문에 대한 대안입니다.
• 부분 보기를 비동기적으로 렌더링합니다.

부분 보기를 렌더링하기 위한 HTML 도우미 옵션은 다음과 같습니다.

• @await Html.PartialAsync
• @await Html.RenderPartialAsync
• @Html.Partial
• @Html.RenderPartial

제품 모델은 이 문서 전체의 샘플에서 사용됩니다.

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

        public string Name { get; set; }

        public string Description { get; set; }
    }
}

부분 태그 도우미 특성의 인벤토리는 다음과 같습니다.

이름

name 특성이 필요합니다. 렌더링할 부분 보기의 이름 또는 경로를 나타냅니다. 부분 보기 이름이 제공되면 뷰 검색 프로세스가 시작됩니다. 명시적 경로가 제공되면 해당 프로세스가 무시됩니다. 허용되는 모든 name 값은 부분 보기 검색를 참조하십시오.

다음 태그는 명시적 경로를 사용하여 _ProductPartial.cshtml공유 폴더에서 로드되어야 함을 나타냅니다. 모델은 를 특성에 사용하여 바인딩을 위해 부분 보기에 전달됩니다.

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

때문에

for 특성은 ModelExpression을 현재 모델에 대해 평가하기 위해 할당합니다. ModelExpression는 @Model. 구문을 추론합니다. 예를 들어 for="Product"for="@Model.Product"대신 사용할 수 있습니다. 이 기본 유추 동작은 @ 기호를 사용하여 인라인 식을 정의하여 재정의됩니다.

다음 마크업은 _ProductPartial.cshtml을 불러옵니다.

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

부분 보기는 연결된 페이지 모델의 Product 속성에 바인딩됩니다.

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"
            };
        }
    }
}

모델

model 특성은 부분 보기에 전달할 모델 인스턴스를 할당합니다. model 특성은 특성에 대해과 함께 사용할 수 없습니다.

다음 마크업에서 새 Product 객체가 인스턴스화되어 바인딩을 위한 model 속성으로 전달됩니다.

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

데이터 보기

view-data 속성은 부분 보기에 전달할 ViewDataDictionary을(를) 할당합니다. 다음 비표를 사용하면 전체 ViewData 컬렉션에 부분 뷰에서 접근 가능합니다.

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

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

앞의 코드에서 IsNumberReadOnly 키 값은 true 설정되고 ViewData 컬렉션에 추가됩니다. 따라서 ViewData["IsNumberReadOnly"]는 다음 부분적 보기에서 액세스할 수 있게 됩니다.

@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"] 값은 숫자 필드가 읽기 전용으로 표시되는지 여부를 결정합니다.

HTML 도우미에서 마이그레이션

다음 비동기 HTML 도우미 예제를 고려합니다. 제품 컬렉션이 반복되고 표시됩니다. PartialAsync 메서드의 첫 번째 매개 변수에 따라 _ProductPartial.cshtml 부분 보기가 로드됩니다. Product 모델의 인스턴스는 바인딩을 위해 부분 보기로 전달됩니다.

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

다음 부분 태그 도우미는 PartialAsync HTML 도우미와 동일한 비동기 렌더링 동작을 수행합니다. model 특성에는 부분 보기에 바인딩하기 위한 Product 모델 인스턴스가 할당됩니다.

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

추가 리소스

• ASP.NET Core의 부분 보기
• ASP.NET Core MVC 보기