Découverte des tag helper–Les remplaçants de HtmlControl-Mes projets avec asp.net core

Reprenons notre jeu-vidéo. Nous souhaitons afficher une liste de Jedi pour en choisir un. Il sera le héros de notre histoire.

Ainsi, nous avons deux classes :

• Jedi
• Histoire

Préparons notre Controller

Du côté controller, nous avons une liste de Jedi.

Et nous la renvoyons à la Vue, à travers, par exemple, le ViewBag.

public IActionResult Histoire()
         {
             List<Models.Jedi> list = new List<Jedi>()
             {
                 new Jedi() { Id = 1, Name = « Test1 » },
                 new Jedi() { Id = 2, Name = « Test2 » },
                 new Jedi() { Id = 3, Name = « Test3 » },
                 new Jedi() { Id = 4, Name = « Test4 » }
             };
             this.ViewBag.JediList = list;

            return this.View(new Histoire());
         }

NOTE: nous renvoyons une instance vide d’Histoire.

Du temps de MVC avec les MVC Html Control

Avant l’émergence des TagHelper, nous aurions du générer notre select grâce à un Helper Html Control :

@{

List<TestAspNetFor.Models.Jedi> list = this.ViewBag.JediList;

    List<SelectListItem> listItems = list.Select(item => new SelectListItem()
     { Value = item.Id.ToString(), Text = item.Name }).ToList();

}

@Html.DropDownList(« HerosId », listItems);

NOTE: nous avons besoin d’une liste de SelectListItem, que nous avons construit à partir de la liste des Jedis.

Avec le TagHelper select asp-for et asp-items

Maintenant, utilisons le Tag Helper pour le select.

Nous avons besoin de renseigner deux informations :

1. Le asp-for : la propriété du model de la Vue
2. Le asp-items : la liste des SelectListItems représentant les items à afficher

<select asp-for= »HerosId » asp-items= »listItems »></select>

NOTE: nous avons utilisons la même liste (de SelectListItem), déclarée en amont de la Vue.