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

Altri Articoli

ASP.NET Core SignalR: Differenze con la versione p...
views 1448
La nuova versione di ASP.NET Core SignalR non è compatibile sia per la parte Server che per la parte Client alla versione precedente ASP.NET SignalR. ...
Novità ASP.NET Core 2 (Preview 2)
views 736
Lo scorso 28 giugno è stata rilasciata la Preview 2 di ASP.NET Core 2. Le principali novità della nuova versione ASP.NET Core sono: Razor Pages...
ASP.NET Core HTML Minifier Middleware
views 552
In questo articolo vedremo come realizzare un Custom Middleware per la minificazione del codice HTML. Nel precedente articolo ASP.NET Core custom M...
ASP.NET Core MVC Image TagHelper
views 465
In questo post conosceremo l’Image TagHelper, questo TagHelper si occupa di inserire un immagine all’interno della pagina. L’image TagHelper mette ...