受欢迎的博客标签

Creating an ASP.NET Core TagHelper(3): Common Tag Helpers

Published
FormTagHelper.zip Easily Add PDF Word & Excel Function to Your .NET Apps   IntroductionIn my previous article, I have explained about the tag helper. This article explains about working with forms and other HTML elements that are used with the form using tag helper. The HTML form provides a way to post the data back to the server.Form Tag Helper Form Tag Helper generates the HTML form elements with action attribute value for MVC Controller action (named route). It is an alternative to HTML helpers Html.BeginForm and Html.BeginRouteForm. It generates hidden "Request Verification Token" to prevent the cross-site request forgery if the post method is decorated with ValidateAntiForgeryToken attribute. We can also supply route value parameter of post method using "asp-route-<parameter name>" attribute. Here, <pameter name> is added to the route value. This is same as routeValues parameter passed to Html.BeginForm and Html.BeginRouteForm. Example   <form asp-controller="Home" asp-action="Save" method="post">      <!-- Input and Submit elements -->   </form>   Generated HTML   The action attribute value is generated from the FORM tag helper attributes: asp-controller and asp-action. The Form Tag Helper also generates "Request Verification Token" (in the hidden field) to prevent cross-site request forgery. Input Tag HelperIt binds an HTML input element to the Model expression in Razor View. It can generate the id and name attribute based on the expression specified in the asp-for attribute. It is capable to set HTML type attribute value based on the Model type and data annotation applied to the Model property. It never overwrites the type of an attribute if we have specified. It generates HTML5 base validation attributes from the data annotation applied to the model property. It provides strong typing with model. If we change the Model property name and do not change the tag helper, it throws an error.      .net Type  Input Type  string  text bool  checkbox datetime  datetime byte Number int Number double Number single Number   It also considers the data annotation attributes of Model property to generate the type of input. The following table contains some examples of data annotation and type.      Data Annotation attribute  Input type DataType(DataType.Password)   password  EmailAddress  email  Uri  uri  HiddenInput  hidden  Phone  tel  [DataType(DataType.Date)]  date  [DataType(DataType.Time)]  time   Example - Model Class   using System.ComponentModel.DataAnnotations;      namespace FormTagHelper.Models   {       public class UserViewModel       {           public int UserId { get; set; }           public string UserName { get; set; }           [EmailAddress]           public string EmailAdress { get; set; }       }   }    HTML in cshtml(\Views\Home\index.cshtml)   <div class="row">          <form asp-controller="Home" asp-action="Save" method="post">           <!-- Input and Submit elements -->           UserId : <input asp-for="UserId" /><br />           User Name:<input asp-for="UserName" /><br />           Email Address: <input asp-for="EmailAdress" />       </form>   </div>    Generated HTML   In the preceding example, the data annotation applied to the email property generated the metadata on the Model and the input tag helper uses this metadata to generate HTML5 attribute.     The "asp-for" attribute is a ModelExpression and assignment (right-hand side) is lambda expression. It means, asp-for = "propertyName" is equvalent to o=>o.propertyName in the generated code that does not require prefix model. We can also use @ character to start an inline expression used with the tag helper.   @{       var myNumber = 5;   }   <input asp-for="@myNumber" />   Generated HTML      Textarea Tag HelperIt is very similar to Input Tag Helper. It generates the name and id attribute based on the Model and data annotation attributes from the Model. It provides strong typing with Models. It is an alternative to Html.TextAreaFor.     Example   Address : <textarea asp-for="Address"></textarea>   Generated HTML    Label Tag Helper   It generates the label caption for expression supplied with asp-for attribute. It is an alternative to Html.LabelFor. It will get the description of the lable value from "Display" attribute automatically. It generates less markup than the HTML label element. It is strongly typed with model property.     Example:   <label asp-for="PhoneNumber"></label>   <input asp-for="PhoneNumber" /> <br />   Generated HTML    It generates consistent id and for attribute, so that they can be correctly associated. The caption of the label comes from "Display" attribute on the Model property. If the Model property does not contain the "Display" attribute, it will generate the caption same as property name.     Select Tag Helper   It generates select and associate option elements for our model property. It is an alternative to Html.DropDownListFor and Html.ListBoxFor. It supports binding to the Model property using asp-for attribute and asp-items attribute used for specifying the options.     Example - Model   public class FruitViewModel   {       public string Fruit { get; set; }       public List<SelectListItem> Fruits { get; set; }   }   Controller Action method (HomeController)   public IActionResult SelectExample()   {       FruitViewModel fruit = new FruitViewModel();       fruit.Fruits = new List<SelectListItem>       {           new SelectListItem { Value = "1", Text = "Apple" },           new SelectListItem { Value = "2", Text = "Banana" },           new SelectListItem { Value = "3", Text = "Mango"  },           new SelectListItem { Value = "4", Text = "Orange"  },       };       fruit.Fruit = "2";       return View(fruit);   }   View (\Views\Home\SelectExample.cshtml)   @model FormTagHelper.Models.FruitViewModel      <select asp-for="Fruit" asp-items="Model.Fruits"></select>   Generated HTML   In the preceding example, the “Fruit” model property has value “2” hence selected attribute has generated HTML.A View Model is more robust to provide MVC metadata and generally less problematic than the ViewBag and ViewData. The Select Tag Helper can also be used with enum property and generate the SelectListItem element from the enum values.     ExampleModel   public class CityEnumViewModel   {       public CityEnum EnumCity { get; set; }   }      public enum CityEnum   {       [Display(Name = "Amdavad")]       Ahmedabad,       [Display(Name = "Vadodara")]       Baroda,       Gandhinagar,       Bhavnagar,       Surat,       Bharuch,       Rajkot   }   View (Views\Home\SelectWithEnum.cshtml)   @model FormTagHelper.Models.CityEnumViewModel      <select asp-for="EnumCity" asp-items="Html.GetEnumSelectList<CityEnum>()"></select>   Generated HTML      Option Group   The Option Group (optgroup) element is generated View Model that contains one or more SelectListGroup objects. In the following example, CityViewModelGroup groups the SelectListItem element into the "Gujarat" and "Maharashtra".     Model   public class CityViewModel   {       public string City { get; set; }       public List<SelectListItem> CityList { get; set; }   }   Controller   public IActionResult SelectOptionGroup()   {       var gujaratGroup = new SelectListGroup { Name = "Gujarat" };       var maharastraGroup = new SelectListGroup { Name = "Maharastra" };          CityViewModel city = new CityViewModel();       city.CityList = new List<SelectListItem>       {           new SelectListItem           {               Value = "1",               Text = "Ahmedabad",               Group = gujaratGroup           },           new SelectListItem           {               Value = "2",               Text = "Gandhinagar",               Group = gujaratGroup           },           new SelectListItem           {               Value = "3",               Text = "Bhavangar",               Group = gujaratGroup           },           new SelectListItem           {               Value = "4",               Text = "Mumbai",               Group = maharastraGroup           },           new SelectListItem           {               Value = "5",               Text = "Pune",               Group = maharastraGroup           },           new SelectListItem           {               Value = "6",               Text = "Nasik",               Group = maharastraGroup           }       };       return View(city);   }   View (Views\Home\SelectOptionGroup.cshtml)   @model FormTagHelper.Models.CityViewModel      <select asp-for="City" asp-items="Model.CityList"></select>   Output  Generated HTML   Summary   In this article, I have explained about form tag helper and other common tag helpers, such as input, textarea, drop-down, and label. Also, we saw the equivalent HTML helpers .