Label, TextArea and Image Tag Helper In ASP.NET Core 3.1


In this blog, we will discuss 3 tag helpers: Label, Textarea and Image Tag Helper. We will also discuss how to use them in application with an example.
Label Tag Helper: The label tag helper is used for text labels in an application. It renders as an HTML label tag.
Textarea Tag Helper: The Textarea tag helper is used for Textarea of description in the application. It renders as an HTML Textarea tag.
Image Tag Helper: The Image Tag Helper renders as an HTML img tag. It is used to display images in the core applications. It provides cache-busting behavior for static image files. It has scr and asp-append-version which is set to true.
Step 1 Create an ASP.NET web application project in Visual Studio 2019.
Step 2 Create a class employee under the Models folder.
  1. using System.ComponentModel.DataAnnotations;  
  3. namespace LabelTextareaImageTagHelper__Demo.Models  
  4. {  
  5.     public class Employee  
  6.     {  
  7.         [Key]  
  8.         public int Id { getset; }  
  10.         [Required]  
  11.         public string Name { getset; }  
  13.         [Required]  
  14.         public string Image { getset; }  
  16.         [Required]  
  17.         [MinLength(10)]  
  18.         [MaxLength(255)]  
  19.         public string Description { getset; }  
  20.     }  
  21. }  

Step 3 Now open index view from views than Home folder.

Step 4 Add model on top of the view to retrieve property of model class.

  1. @model LabelTextareaImageTagHelper__Demo.Models.Employee   

Step 5 Create images folder in wwwroot folder copy and paste some image to display it on browser.

  1. <div class="form-group">  
  2.    <label asp-for="Name" class="control-label"></label>  
  3.    <input asp-for="Name" class="form-control" />  
  4. </div>  
  1. <div class="form-group">  
  2.    <label asp-for="Image" class="control-label"></label>  
  3.    <img src="~/images/855211650_154321.jpg" asp-append-version="true" height="150" width="150" class="img-thumbnail" />  
  4. </div>  
  1. <div class="form-group">  
  2.    <label asp-for="Description" class="control-label"></label>  
  3.    <textarea asp-for="Description" class="form-control"></textarea>  
  4. </div> 
This is how it renders in browser:
  1. <textarea class="form-control" data-val="true" data-val-maxlength="The field Description must be a string or array type with a maximum length of '255'." data-val-maxlength-max="255" data-val-minlength="The field Description must be a string or array type with a minimum length of '10'." data-val-minlength-min="10" data-val-required="The Description field is required." id="Description" maxlength="255" name="Description"></textarea>