Udostępnij za pośrednictwem

Pomocnik tagów częściowych w ASP.NET Core

Autor: Scott Addie

Aby zapoznać się z omówieniem pomocników tagów, zobacz Pomocników tagów w ASP.NET Core.

Wyświetl lub pobierz przykładowy kod (jak pobrać)

Overview

Pomocnik tagów częściowych służy do renderowania widoku częściowego w aplikacjach Razor Pages i MVC. Należy wziąć pod uwagę, że:

  • Wymaga ASP.NET Core 2.1 lub nowszej.
  • Jest alternatywą dla składni pomocnika HTML .
  • Renderuje widok częściowy asynchronicznie.

Opcje pomocnika HTML do renderowania widoku częściowego obejmują:

Model Product jest używany w przykładach w tym dokumencie:

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

        public string Name { get; set; }

        public string Description { get; set; }
    }
}

Poniżej przedstawiono spis atrybutów pomocnika tagów częściowych.

name

Wymagany jest atrybut name. Wskazuje nazwę lub ścieżkę widoku częściowego do renderowania. Po podaniu częściowej nazwy widoku inicjowany jest proces odkrywania widoku . Ten proces jest pomijany po podaniu jawnej ścieżki. Wszystkie dopuszczalne wartości name można znaleźć w Odnajdywanie widoku częściowego.

Poniższy znacznik używa jawnej ścieżki wskazującej, że _ProductPartial.cshtml ma zostać załadowany z folderu Udostępnione. Za pomocą atrybutu dla, model jest przekazywany do częściowego widoku w celu powiązania.

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

for

Atrybut for przypisuje ModelExpression do oceny względem bieżącego modelu. ModelExpression wywnioskuje składnię @Model.. Na przykład można użyć for="Product" zamiast for="@Model.Product". To domyślne zachowanie inferencji jest zastępowane poprzez użycie symbolu @ w celu zdefiniowania wyrażenia inline.

Następujący znacznik ładuje _ProductPartial.cshtml:

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

Widok częściowy jest powiązany z właściwością Product odpowiadającego modelu strony.

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

Atrybut model przypisuje wystąpienie modelu do przekazania do widoku częściowego. Atrybutu model nie można używać z atrybutem dla.

W poniższym znaczniku, nowy obiekt Product jest tworzony i przekazywany do atrybutu model w celu powiązania.

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

view-data

Atrybut view-data przypisuje ViewDataDictionary, który ma być przekazany do widoku częściowego. Poniższy znacznik sprawia, że cała kolekcja ViewData jest dostępna dla widoku częściowego:

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

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

W poprzednim kodzie wartość klucza IsNumberReadOnly jest ustawiona na true i dodana do kolekcji ViewData. W związku z tym ViewData["IsNumberReadOnly"] jest dostępny w następującym widoku częściowym:

@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>

W tym przykładzie wartość ViewData["IsNumberReadOnly"] określa, czy pole Liczba jest wyświetlane w trybie tylko do odczytu.

Migrowanie z pomocnika HTML

Rozważmy następujący asynchroniczny przykład pomocnika HTML. Kolekcja produktów jest iterowana i wyświetlana. Zgodnie z pierwszym parametrem metody PartialAsync ładowany jest widok częściowy _ProductPartial.cshtml. Wystąpienie modelu Product jest przekazywane do widoku częściowego do powiązania.

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

Poniższy pomocnik tagów częściowych osiąga to samo zachowanie asynchroniczne renderowania co pomocnik HTML PartialAsync. Atrybut model jest przypisywane wystąpieniu modelu Product do powiązania z widokiem częściowym.

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

Dodatkowe zasoby

  • Last updated on