共用方式為


ASP.NET Core 中的部分標籤輔助程式

Scott Addie

如需標籤協助程式的概觀,請參閱 ASP.NET Core 中的標籤協助程式。

檢視或下載範例程式碼如何下載

Overview

部分標籤協助程式用於在 Pages 和 MVC 應用程式中轉譯 Razor。 請考慮到:

  • 需要 ASP.NET Core 2.1 或更新版本。
  • 這是 HTML 協助程式語法的替代方案。
  • 以異步方式呈現局部檢視。

轉譯部分檢視的 HTML 協助程式選項包括:

本文件範例中會使用 Product 模型:

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

        public string Name { get; set; }

        public string Description { get; set; }
    }
}

Partial Tag Helper 屬性的一覽如下。

name

需要 name 屬性。 指出要轉譯之部分檢視的名稱或路徑。 提供部分檢視名稱時,會起始 檢視探索 程式。 當提供明確路徑時,該過程會被略過。 如需所有可接受的 name 值,請參閱 局部檢視發現

下列標記會使用明確的路徑,指出 _ProductPartial.cshtml 是從 Shared 資料夾載入。 使用 屬性的,模型會傳遞至進行繫結的部分檢視。

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

for

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

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 協助工具相同的非同步渲染效果。 model 屬性會指派 Product 模型實例,以便綁定至部分視圖。

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

其他資源