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

Autore:


blog comments powered by Disqus

 

Calendar

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

View posts in large calendar