asp.net-core
Ayudantes de etiquetas

Parámetros

Ayudante de etiqueta de formulario - Ejemplo básico

<form asp-action="create" asp-controller="Home">
     <!--Your form elements goes here--> 
</form>

Ayudante de etiqueta de formulario - Con atributos de ruta personalizados

<form asp-action="create" 
      asp-controller="Home" 
      asp-route-returnurl="dashboard" 
      asp-route-from="google">
     <!--Your form elements goes here--> 
</form>

Esto generará el siguiente marcado

<form action="/Home/create?returnurl=dashboard&amp;from=google" method="post">
    <!--Your form elements goes here--> 
</form>

Ayudante de etiqueta de entrada

Asumiendo que su vista está fuertemente escrita en un modelo de vista como

public class CreateProduct
{
   public string Name { set; get; }
}

Y estás pasando un objeto de esto a la vista desde tu método de acción.

@model CreateProduct
<form asp-action="create" asp-controller="Home" >

    <input type="text" asp-for="Name"/>   
    <input type="submit"/>

</form>

Esto generará el siguiente marcado.

<form action="/Home/create" method="post"> 

    <input type="text" id="Name" name="Name" value="" />
    <input type="submit"/>
    <input name="__RequestVerificationToken" type="hidden" value="ThisWillBeAUniqueToken" />

</form>

Si desea que el campo de entrada se represente con un valor predeterminado, puede establecer el valor de la propiedad Nombre de su modelo de vista en el método de acción.

public IActionResult Create()
{
  var vm = new CreateProduct { Name="IPhone"};
  return View(vm);
} 

Envío de formulario y enlace de modelo

El enlace del modelo funcionará bien si utiliza CreateProduct como su parámetro del método de acción HttpPost / un parámetro llamado name

Seleccione Tag Helper

Asumiendo que su vista está fuertemente escrita en un modelo de vista como este

public class CreateProduct
{       
   public IEnumerable<SelectListItem> Categories { set; get; }
   public int SelectedCategory { set; get; }
}

Y en su método de acción GET, está creando un objeto de este modelo de vista, configurando la propiedad Categorías y enviando a la vista

public IActionResult Create()
{
    var vm = new CreateProduct();
    vm.Categories = new List<SelectListItem>
    {
        new SelectListItem {Text = "Books", Value = "1"},
        new SelectListItem {Text = "Furniture", Value = "2"}
    };
    return View(vm);
}

y en su opinión

@model CreateProduct

<form asp-action="create" asp-controller="Home">
    <select asp-for="SelectedCategory" asp-items="@Model.Categories">
        <option>Select one</option>
    </select>
    <input type="submit"/>
</form>

Esto representará el marcado a continuación ( incluido solo las partes relevantes del formulario / campos )

<form action="/Home/create" method="post">  
    <select data-val="true" id="SelectedCategory" name="SelectedCategory">
        <option>Select one</option>
        <option value="1">Shyju</option>
        <option value="2">Sean</option>
    </select>
    <input type="submit"/>
</form>

Obtención del valor desplegable seleccionado en el envío del formulario

Puede usar el mismo modelo de vista que su parámetro de método de acción HttpPost

[HttpPost]
public ActionResult Create(CreateProduct model)
{
  //check model.SelectedCategory value
  / /to do : return something
}

Establecer una opción como la seleccionada.

Si desea establecer una opción como la opción seleccionada, simplemente puede configurar el valor de la propiedad SelectedCategory .

public IActionResult Create()
{
    var vm = new CreateProduct();
    vm.Categories = new List<SelectListItem>
    {
        new SelectListItem {Text = "Books", Value = "1"},
        new SelectListItem {Text = "Furniture", Value = "2"},
        new SelectListItem {Text = "Music", Value = "3"}
    };
    vm.SelectedCategory = 2;
    return View(vm);
}

Renderizando un menú desplegable de selección múltiple / ListBox

Si desea representar un menú desplegable de selección múltiple, simplemente puede cambiar la propiedad del modelo de vista que utiliza asp-for atributo asp-for en su vista a un tipo de matriz.

public class CreateProduct
{       
   public IEnumerable<SelectListItem> Categories { set; get; }
   public int[] SelectedCategories { set; get; }
}

En la vista

@model CreateProduct

<form asp-action="create" asp-controller="Home" >
    <select asp-for="SelectedCategories" asp-items="@Model.Categories">
        <option>Select one</option>
    </select>
    <input type="submit"/>
</form>

Esto generará el elemento SELECT con multiple atributos.

<form action="/Home/create" method="post">
     <select id="SelectedCategories" multiple="multiple" name="SelectedCategories">
        <option>Select one</option>
        <option value="1">Shyju</option>
       <option value="2">Sean</option>
     </select>
    <input type="submit"/>
</form>

Ayudante de etiqueta personalizada

Puede crear sus propios ayudantes de etiquetas implementando ITagHelper o derivando de la clase de conveniencia TagHelper .

• La convención predeterminada es apuntar a una etiqueta html que coincida con el nombre del ayudante sin el sufijo opcional TagHelper. Por ejemplo, WidgetTagHelper apuntará a una etiqueta <widget> .
• El atributo [HtmlTargetElement] se puede usar para controlar aún más la etiqueta a la que se dirige
• A cualquier propiedad pública de la clase se le puede asignar un valor como atributo en el marcado de afeitar. Por ejemplo, una propiedad public string Title {get; set;} se le puede dar un valor como <widget title="my title">
• De forma predeterminada, los ayudantes de etiquetas traducen los nombres y las propiedades de las clases de C # en cascos de Pascal para los ayudantes de etiquetas en casos de kebab inferiores. Por ejemplo, si omite el uso de [HtmlTargetElement] y el nombre de la clase es WidgetBoxTagHelper , entonces en Razor escribirá <widget-box></widget-box> .
• Process y ProcessAsync contienen la lógica de representación. Ambos reciben un parámetro de contexto con información sobre la etiqueta actual que se está representando y un parámetro de salida utilizado para personalizar el resultado representado.

Cualquier conjunto que contenga ayudantes de etiquetas personalizadas debe agregarse al archivo _ViewImports.cshtml ( tenga en cuenta que es el conjunto que se está registrando, no el espacio de nombres):

@addTagHelper *, MyAssembly

Asistente de ejemplo de etiqueta personalizada

El siguiente ejemplo crea un ayudante de etiqueta de widget personalizado que se enfocará en el marcado de maquinilla de afeitar como:

<widget-box title="My Title">This is my content: @ViewData["Message"]</widget-box>

El cual será rendido como:

<div class="widget-box">
    <div class="widget-header">My Title</div>
    <div class="widget-body">This is my content: some message</div>
</div>

El código necesario para crear tal ayudante de etiquetas es el siguiente:

[HtmlTargetElement("widget-box")]
public class WidgetTagHelper : TagHelper
{
    public string Title { get; set; }

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        var outerTag = new TagBuilder("div");
        outerTag.Attributes.Add("class", output.TagName);
        output.MergeAttributes(outerTag);
        output.TagName = outerTag.TagName;

        //Create the header
        var header = new TagBuilder("div");
        header.Attributes.Add("class", "widget-header");
        header.InnerHtml.Append(this.Title);
        output.PreContent.SetHtmlContent(header);

        //Create the body and replace original tag helper content
        var body = new TagBuilder("div");
        body.Attributes.Add("class", "widget-body");
        var originalContents = await output.GetChildContentAsync();
        body.InnerHtml.Append(originalContents.GetContent());
        output.Content.SetHtmlContent(body);
    }
}

Etiqueta de etiqueta de ayuda

Label Tag Helper se puede usar para representar label para una propiedad de modelo. Reemplaza el método Html.LabelFor en versiones anteriores de MVC.

Digamos que tienes un modelo:

public class FormViewModel
{
    public string Name { get; set; }
}

En la vista que se puede utilizar label elemento HTML y asp-for Asistente de etiquetas:

<form>
    <label asp-for="Name"></label>
    <input asp-for="Name" type="text" />
</form>

Esto es equivalente al siguiente código en versiones anteriores de MVC:

<form>
    @Html.LabelFor(x => x.Name)
    @Html.TextBoxFor(x => x.Name)
</form>

Los dos fragmentos de código anteriores representan el mismo HTML:

<form>
    <label for="Name">Name</label>
    <input name="Name" id="Name" type="text" value="">
</form>

Ayudante de la etiqueta del ancla

El ayudante de la etiqueta de anclaje se utiliza para generar atributos href para vincular a una acción de controlador particular o ruta MVC. Ejemplo basico

<a asp-controller="Products" asp-action="Index">Login</a>

A veces, necesitamos especificar parámetros adicionales para la acción del controlador a la que está vinculado. Podemos especificar valores para estos parámetros agregando atributos con el prefijo asp-route-.

<a asp-controller="Products" asp-action="Details" asp-route-id="@Model.ProductId">
   View Details
</a>