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

Autore:


blog comments powered by Disqus

 

Calendar

<<  July 2017  >>
MonTueWedThuFriSatSun
262728293012
3456789
10111213141516
17181920212223
24252627282930
31123456

View posts in large calendar