asp.net-core
Tag Helpers

Paramètres

Form Tag Helper - Exemple de base

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

Form Tag Helper - Avec des attributs de route personnalisés

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

Cela générera le balisage ci-dessous

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

Assistant de saisie

En supposant que votre vue est fortement saisie dans un modèle de vue tel que

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

Et vous transmettez un objet de ceci à la vue de votre méthode d'action.

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

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

</form>

Cela générera le balisage ci-dessous.

<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 vous souhaitez que le champ de saisie soit rendu avec une valeur par défaut, vous pouvez définir la valeur de la propriété Name de votre modèle de vue dans la méthode d'action.

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

Soumission de formulaire et liaison de modèle

La liaison de modèle fonctionnera CreateProduct si vous utilisez CreateProduct comme paramètre de méthode d'action HttpPost / paramètre nommé name

Sélectionnez Tag Helper

En supposant que votre vue est fortement typée dans un modèle de vue comme celui-ci

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

Et dans votre méthode d'action GET, vous créez un objet de ce modèle de vue, en définissant la propriété Catégories et en l'envoyant à la vue.

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);
}

et à votre avis

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

Cela rendra le balisage ci-dessous ( inclus uniquement les parties pertinentes du formulaire / champs )

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

Obtenir la valeur de liste déroulante sélectionnée dans la soumission du formulaire

Vous pouvez utiliser le même modèle de vue que votre paramètre de méthode d'action HttpPost

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

Définir une option comme celle sélectionnée

Si vous souhaitez définir une option en tant qu'option sélectionnée, vous pouvez simplement définir la valeur de la propriété 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);
}

Rendu d'une liste déroulante à sélection multiple / ListBox

Si vous voulez rendre une liste déroulante à sélection multiple, vous pouvez simplement modifier votre propriété de modèle de vue que vous utilisez asp-for attribut asp-for dans votre vue en un type de tableau.

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

Dans la vue

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

Cela va générer l'élément SELECT avec multiple attributs

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

Assistant de tag personnalisé

Vous pouvez créer vos propres aides au tag en implémentant ITagHelper ou en dérivant de la classe de commodité TagHelper .

• La convention par défaut consiste à cibler une balise html correspondant au nom de l'assistant sans le suffixe facultatif TagHelper. Par exemple, WidgetTagHelper ciblera une <widget> .
• L'attribut [HtmlTargetElement] peut être utilisé pour contrôler davantage la balise ciblée
• Toute propriété publique de la classe peut recevoir une valeur en tant qu'attribut dans le balisage de rasoir. Par exemple une propriété public string Title {get; set;} peut recevoir une valeur comme <widget title="my title">
• Par défaut, tag helpers convertit les noms et les propriétés de la classe C # en cascade pour les helpers de tag en cas de kebab inférieur. Par exemple, si vous omettez d'utiliser [HtmlTargetElement] et que le nom de la classe est WidgetBoxTagHelper , alors dans Razor, vous écrirez <widget-box></widget-box> .
• Process et ProcessAsync contiennent la logique de rendu. Les deux reçoivent un paramètre de contexte avec des informations sur la balise en cours de rendu et un paramètre de sortie utilisé pour personnaliser le résultat rendu.

Tout assembly contenant des aides de balises personnalisées doit être ajouté au fichier _ViewImports.cshtml (notez que c'est l'assembly en cours d'enregistrement, pas l'espace de noms):

@addTagHelper *, MyAssembly

Exemple de tag personnalisé

L'exemple suivant crée un assistant de balise de widget personnalisé qui ciblera le balisage de rasoir comme:

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

Qui sera rendu comme:

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

Le code nécessaire pour créer un tel assistant est le suivant:

[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);
    }
}

Assistant d'étiquette

Label Tag Helper peut être utilisé pour rendre une label pour une propriété de modèle. Il remplace la méthode Html.LabelFor dans les versions précédentes de MVC.

Disons que vous avez un modèle:

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

Dans la vue, vous pouvez utiliser l’élément HTML label et l’assistant de tag asp-for :

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

Ceci est équivalent au code suivant dans les versions antérieures de MVC:

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

Les deux extraits de code ci-dessus rendent le même code HTML:

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

Assistant de marquage d'ancre

L'assistant de balise d'ancrage est utilisé pour générer des attributs href afin d'établir un lien avec une action de contrôleur ou un itinéraire MVC particulier. Exemple de base

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

Parfois, vous devez spécifier des paramètres supplémentaires pour l'action du contrôleur à laquelle vous êtes lié. Nous pouvons spécifier des valeurs pour ces paramètres en ajoutant des attributs avec le préfixe asp-route.

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