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

아티클
11/30/2023

작성자: Scott Addie

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

샘플 코드 보기 및 다운로드(다운로드 방법)

개요

부분 태그 도우미는 Razor Pages 및 MVC 앱에서 부분 보기를 렌더링하는 데 사용됩니다. 고려 사항은 다음과 같습니다.

ASP.NET Core 2.1 이상이 필요합니다.
HTML 도우미 구문 대신 사용할 수 있습니다.
부분 보기를 비동기적으로 렌더링합니다.

부분 보기를 렌더링하기 위해 선택할 수 있는 HTML 도우미로는 다음과 같은 것들이 있습니다.

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

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

        public string Name { get; set; }

        public string Description { get; set; }
    }
}

부분 태그 도우미의 특성 목록은 다음과 같습니다.

name

name 특성은 필수입니다. 이 특성은 렌더링할 부분 보기의 이름 또는 경로를 나타냅니다. 부분 보기의 이름을 지정할 경우 보기 검색 과정이 시작됩니다. 명시적인 경로가 지정되면 이 과정이 생략됩니다. 허용되는 모든 name 값은 부분 보기 검색을 참조하세요.

다음 태그는 공유 폴더에서 로드될 것임을 _ProductPartial.cshtml 나타내는 명시적 경로를 사용합니다. for 특성을 사용하면 바인딩을 위한 모델이 부분 보기에 전달됩니다.

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

for

특성은 for 현재 모델에 대해 평가할 값을 할당 ModelExpression 합니다. ModelExpression은 @Model. 구문을 추론합니다. 예를 들어 for="@Model.Product" 대신 for="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 특성은 부분 보기에 전달할 모델 인스턴스를 할당합니다. model 특성은 for 특성과 함께 사용할 수 없습니다.

다음 태그에서는 새 Product 개체가 인스턴스화되고 바인딩을 위해 model 특성에 전달됩니다.

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

view-data

이 특성은 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"] 값은 Number 필드가 읽기 전용으로 표시될지 여부를 결정합니다.

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

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

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

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

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