Seleziona una pagina

In questo post conosceremo il Select TagHelper questo TagHelper si occupa di generare una casella di selezione con la possibilità di associare le opzioni (option) al proprio modello di dati.

image

Il Select TagHelper mette a disposizione i seguenti attributi:

  • asp-for
  • asp-items

Attributo asp-for

L’attributo asp-for è utilizzato per associare la nostra select ad una proprietà del modello (Model) associato.

Per esempio prendiamo in considerazione la seguente classe WebSiteInfoViewModel:

    public class WebSiteInfoViewModel
    {
        public int WebSiteId { get; set; }
        public string Description { get; set; }

        public string LanguageId { get; set; }
        public List<LanguageViewModel> SupportedLanguages { get; set; }
            
    }
  

Se volessimo associare il nostro TagHelper alla proprietà LanguageId possiamo semplicemente scrivere:

<select asp-for="@Model.LanguageId"  class="form-control">
    <option value="it-IT" selected="selected">Italiano</option>
    <option value="en-US" >Inglese</option>
    <option value="de-DE" >Tedesco</option>
</select>
  

Il conseguente codice HTML sarà:

<select class="form-control" id="LanguageId" name="LanguageId">
    <option value="it-IT" selected="selected">Italiano</option>
    <option value="en-US">Inglese</option>
    <option value="de-DE">Tedesco</option>
</select>
  

Come possiamo notare la differenza tra il codice HTML scritto nel TagHelper e quanto generato corrispondono quasi del tutto Smile

Attributo asp-items

L’attributo asp-items è utilizzato per associare una lista di elementi all’elenco delle opzioni da visualizzare nella nostra View.

Per esempio potremmo ipotizzare di prendere l’elenco delle lingue supportate da un Database ed aggiungerle cosi dinamicamente al nostro controllo Select:

@model WebSiteInfoViewModel
@{
    ViewBag.Data =  new  List<SelectListItem>(){
        new SelectListItem() { Value="it-IT", Text="Italiano", Selected=true }
        ,new SelectListItem() { Value="en-US", Text="Inglese" }
        ,new SelectListItem() { Value="de-DE", Text="Tedesco" }
        ,new SelectListItem() { Value="fr-FR", Text="Francese" }

    };
}

<h2>Select TagHelper</h2>

<select asp-for="@Model.LanguageId" asp-items="ViewBag.Data"  class="form-control"></select>
  

Il conseguente codice HTML sarà:

<select class="form-control" id="LanguageId" name="LanguageId">
    <option selected="selected" value="it-IT">Italiano</option>
    <option value="en-US">Inglese</option>
    <option value="de-DE">Tedesco</option>
    <option value="fr-FR">Francese</option>
</select>
  

In questo caso abbiamo definito un controllo di tipo Select, lo abbiamo associato alla proprietà LanguageId e abbiamo associato anche l’elenco delle lingue disponibili.

MultiSelect

Nel caso in cui sia necessario utilizzare una casella di selezione multipla (MultiSelect) basterà associare all’attributo asp-for una proprietà che implementi l’interfaccia IEnumerable.

Per esempio potremmo associare alla nostra select la proprietà SupportedLanguages:

<select asp-for="@Model.SupportedLanguages" asp-items="ViewBag.Data" class="form-control"></select>
  

Il conseguente codice HTML sarà:

<select class="form-control" id="SupportedLanguages" multiple="multiple" name="SupportedLanguages">
    <option selected="selected" value="it-IT">Italiano</option>
    <option value="en-US">Inglese</option>
    <option value="de-DE">Tedesco</option>
    <option value="fr-FR">Francese</option>
</select>
  

Come possiamo notare il TagHelper riconosce che si tratta di una selezione multipla ed aggiunge in automatico l’attributo multiple all’HTML generato.

TagHelper VS HtmlHelper

L’utilità e la facilità di utilizzo del TagHelper si apprezza quando confrontiamo la sintassi utilizzata nei relativi HtmlHelper che  sono utilizzati per generare lo stesso HTML:

TagHelper

<select asp-for="@Model.LanguageId" asp-items="ViewBag.Data" class="form-control"></select>
  

HtmlHelper

@Html.DropDownList("Data", null, new { @class = "form-control",id="LanguageId" })  
  

Come possiamo vedere il codice scritto utilizzando il TagHelper risulta notevolmente più semplice e leggibile!

Per chi volesse approfondire e/o visualizzare il codice sorgente del TagHelper, può andare direttamente sul repository su GitHub a questo indirizzo:

https://github.com/aspnet/Mvc/blob/dev/src/Microsoft.AspNetCore.Mvc.TagHelpers/SelectTagHelper.cs

Happy Coding Winking smile

Altri Articoli

ASP.NET Core MVC Label TagHelper
views 3
In questo post conosceremo il Label TagHelper questo TagHelper si occupa di generare una casella di testo di tipo Label. Il Label TagHelper mette a...
ASP.NET Core MVC Image TagHelper
views 10
In questo post conosceremo l’Image TagHelper, questo TagHelper si occupa di inserire un immagine all’interno della pagina. L’image TagHelper mette ...
ASP.NET Core MVC TextArea TagHelper
views 2
In questo post conosceremo il TextArea TagHelper questo TagHelper si occupa di generare una casella di testo di tipo Textarea. Il TextArea TagHelpe...
ASP.NET Core HTML Minifier Middleware
views 4
In questo articolo vedremo come realizzare un Custom Middleware per la minificazione del codice HTML. Nel precedente articolo ASP.NET Core custom M...

Sono uno sviluppatore specializzato nella realizzazione di applicazioni web ASP.NET. Mi ritengo una persona fortunata perchè il mio lavoro coincide con la mia passione: Sviluppare codice!!! Ho incominciato a sviluppare codice dall’età di circa dieci anni con il famigerato Commodore 64. La mia svolta epocale è stato l’avvento di internet e dal 1995 ho cominciato a sviluppare siti web prima statici e poi dinamici (ASP) per poi approdare alla piattaforma .NET, da allora… non mi sono piu’ fermato!