In questo post conosceremo l’Input TagHelper, questo TagHelper si occupa di generare un campo di tipo input.

image_thumb

L’Input TagHelper mette a disposizione i seguenti attributi:

  • asp-for
  • asp-format

Attributo asp-for

L’attributo asp-for è utilizzato per associare il nostro campo input ad una proprietà del modello (Model) associato.

Per esempio prendiamo in considerazione la classe WebSiteInfoViewModel:

public class WebSiteInfoViewModel { [Required] public int WebSiteId { get; set; } [Required] [MaxLength(200)] public string Description { get; set; } [EmailAddress] public string Email { get; set; } public DateTime LatestUpdate { get; set; } public bool IsPrivate { get; set; } [Url] public string DefaultUrl { get; set; } public string LanguageId { get; set; }

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

 

Se volessimo associare il nostro TagHelper alla proprietà Email possiamo semplicemente scrivere:
<input asp-for="Email" class="form-control" />
  
Il conseguente codice HTML sarà:
<input class="form-control" 
       type="email" 
       data-val="true" 
       data-val-email="The Email field is not a valid e-mail address." 
       id="Email" name="Email" value="" />
  

Come possiamo notare la differenza tra il codice HTML scritto nel TagHelper e quanto generato corrispondono quasi del tutto ma il TagHelper ha anche aggiunto automaticamente gli attributi necessari a verificare che il testo contenuto nell’input sia nel formato di un’indirizzo EmailSmile

L’input TagHelper genera il tag html input assegnando automaticamente il tipo in base al tipo di dato definito nel Model:

.NET Type Input Type
String type="text"
DateTime type="datetime"
Byte type="number"
Int16, Int32, Int64 type="number"
Single, Double type="number"
Boolean type="checkbox"

Nel caso in cui sia presente la dichiarazione di un attributo tramite le Data Annotation, vedi campo Email, il TagHelper genera l’input type corrispondente:

Attributo Input Type
[EmailAddress] type="email"
[Url] type="url"
[HiddenInput] type="hidden"
[Phone] type="tel"
[DataType(DataType.Password)] type="password"
[DataType(DataType.Date)] type="date"
[DataType(DataType.Time)] type="time"

Quindi per esempio il TagHelper:

<input asp-for="DefaultUrl" class="form-control" value=""  />
  

Genererà:

<input class="form-control" 
       type="url" 
       data-val="true" 
       data-val-url="The DefaultUrl field is not a valid fully-qualified http, https, or ftp URL." 
       id="DefaultUrl" name="DefaultUrl" value="" >
  
Attributo asp-format

L’attributo asp-format permette di assegnare una formattazione ai campi di tipo numerico che sono associati al nostro controllo.
La formattazione fa riferimento alle formattazioni standard (https://msdn.microsoft.com/en-us/library/dwhawy9k.aspx) e per esempio, se volessimo definire un numero con 4 cifre decimali, basterebbe scrivere:
<input asp-for="SomeNumber" asp-format="{0:N4}" />
  

ed il risultato sarebbe:

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

<input asp-for="DefaultUrl" class="form-control" value=""  />
  
HtmlHelper
@Html.TextBoxFor( m=>m.DefaultUrl, "",new { @class="form-control", type="Url"})
  
Come possiamo vedere il codice scritto utilizzando il TagHelper risulta molto 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/InputTagHelper.cs

Happy Coding Winking smile

Autore:


blog comments powered by Disqus

 

Calendar

<<  November 2017  >>
MonTueWedThuFriSatSun
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910

View posts in large calendar