Asistente de etiquetas parciales en ASP.NET Core

Artículo
11/30/2023

Para obtener información general sobre los asistentes de etiquetas, consulte Asistentes de etiquetas en ASP.NET Core.

Vea o descargue el código de ejemplo (cómo descargarlo)

Información general

El asistente de etiquetas parciales sirve para representar una vista parcial en las páginas de Razor y las aplicaciones MVC. Tenga en cuenta lo siguiente:

Es necesario ASP.NET Core 2.1 o una versión posterior.
Es una alternativa a la sintaxis del asistente de HTML.
Presenta la vista parcial de forma asincrónica.

Las opciones del asistente de HTML para representar una vista parcial son estas:

En los ejemplos de todo este documento se usa el modelo Product:

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

        public string Name { get; set; }

        public string Description { get; set; }
    }
}

Ahora pasaremos a ver una relación de los atributos del asistente de etiquetas parciales.

name

El atributo name es necesario. Señala el nombre o la ruta de acceso de la vista parcial que se va a representar. Cuando se indica el nombre de una vista parcial, se inicia el proceso de detección de vista. Este proceso se omite cuando se proporciona una ruta de acceso explícita. Para conocer todos los valores name aceptables, consulte Detección de vistas parciales.

En el siguiente marcado se usa una ruta de acceso explícita, lo que indica que _ProductPartial.cshtml debe cargarse desde la carpeta Shared. Mediante el atributo for, se pasa un modelo a la vista parcial para el enlace.

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

para

El atributo for asigna una ModelExpression para que se evalúe según el modelo actual. ModelExpression deduce la sintaxis de @Model.. Por ejemplo, se puede usar for="Product" en lugar de for="@Model.Product". Este comportamiento predeterminado de deducción queda invalidado si se usa el símbolo @ para definir una expresión insertada.

En el marcado siguiente se carga _ProductPartial.cshtml:

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

La vista parcial se enlaza a la propiedad Product del modelo de página asociado correspondiente:

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

El atributo model asigna una instancia de modelo para pasarla a la vista parcial. El atributo model no se puede usar con el atributo for.

En el siguiente código de marcado, se crea un objeto Product y se pasa al atributo model para el enlace:

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

view-data

El atributo view-data asigna una ViewDataDictionary para pasarla a la vista parcial. El siguiente marcado hace que toda la colección ViewData esté accesible para la vista parcial:

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

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

En el código anterior, el valor de clave IsNumberReadOnly está establecido en true y se ha agregado a la colección ViewData. Por tanto, ViewData["IsNumberReadOnly"] estará accesible dentro de la vista parcial siguiente:

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

En este ejemplo, el valor de ViewData["IsNumberReadOnly"] determina si el campo Number se muestra como de solo lectura.

Migración desde un asistente de HTML

Tenga en cuenta el siguiente ejemplo del asistente de HTML asincrónico. Se itera y se muestra una colección de productos. Según el primer parámetro del método PartialAsync, se carga la vista parcial _ProductPartial.cshtml. Se pasa una instancia del modelo Product a la vista parcial para el enlace.

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

El siguiente asistente de etiquetas parciales logra el mismo comportamiento de representación asincrónica que el asistente de HTML PartialAsync. El atributo model tiene asignada una instancia del modelo Product para el enlace a la vista parcial.

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