ASP.NET Core의 부분 태그 도우미
작성자: 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" />
}
추가 리소스
ASP.NET Core
피드백
https://aka.ms/ContentUserFeedback
출시 예정: 2024년 내내 콘텐츠에 대한 피드백 메커니즘으로 GitHub 문제를 단계적으로 폐지하고 이를 새로운 피드백 시스템으로 바꿀 예정입니다. 자세한 내용은 다음을 참조하세요.다음에 대한 사용자 의견 제출 및 보기