In questo post conosceremo il TextArea TagHelper questo TagHelper si occupa di generare una casella di testo di tipo Textarea.

image

Il TextArea TagHelper mette a disposizione i seguenti attributi:

  • asp-for

Attributo asp-for

L’attributo asp-for è utilizzato per associare la nostra textarea 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; }

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

    }
  

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

<textarea asp-for="Description" class="form-control" cols="20" rows="5"></textarea>
  

Il conseguente codice HTML sarà:

<textarea class="form-control" cols="20" rows="5"
          data-val="true"
          data-val-maxlength="The field Description must be a string or array type with a maximum length of &#x27;200&#x27;."
          data-val-maxlength-max="200"
          data-val-required="The Description field is required."
          id="Description" name="Description">
</textarea>
  

Come possiamo notare la differenza tra il codice HTML scritto nel TagHelper e quanto generato corrispondono quasi del tutto ma in più il TagHelper ha aggiunto in automatico tutti gli attributi html che permettono di controllare che il campo sia riempito e che abbia una lunghezza massima di 200 caratteri proprio come descritto nella definizione della classe WebSiteInfoModel Smile

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

<textarea asp-for="Description" class="form-control" cols="20" rows="5"></textarea>
HtmlHelper
@Html.TextArea("Description", null, new { @class = "form-control", cols = "20", rows = "5" })  
  
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/TextAreaTagHelper.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 735
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 464
In questo post conosceremo l’Image TagHelper, questo TagHelper si occupa di inserire un immagine all’interno della pagina. L’image TagHelper mette ...