Introduction to Tag Helpers in ASP.NET Core ( MVC6 )

facebooktwittergoogle_plusredditpinterestlinkedinmail

Tag Helpers in ASP.NET Core Feature

In ASP.NET 4 ( MVC 5) we have HtmlHelper to render HTML. It is basically C# code that starts with @ however, it will render as the HTML element on the browser . Tag Helpers are an alternative to HtmlHelper in ASP.NET Core (Formally ASP.NET 5) to generate HTML.
Let’s start by looking the syntax of HtmlHelper and TagHelper . In the following code you can see the HtmlHelper implementation for label and text box.

Html Helpers for label and text box.

       @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
        </div>

In the following code you can see the corresponding Tag Helpers for email label and text box.

Tag Helpers for label and text box.

        <label asp-for="Email" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="Email" class="form-control" />
         </div>

In the following code you can see the model property for both approaches.

       [Required]
        [EmailAddress]
        [Display(Name = "Email")]
        public string Email { get; set; }

Both of these approaches will generate the same html.

<input class="form-control" type="email" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="The Email field is required." id="Email" name="Email" value="">

The tag helpers are just a syntax change with no other benefits. The tag helpers syntax seems more readable compare to HtmlHelper. Visual studio 2015 has nice syntax highlighter and Intellisense for tag helper.

Tag Helpers

Here is the registration page with Htmlhelper in ASP.NET 4.6 default template.

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h4>Create a new account.</h4>
    <hr />
    @Html.ValidationSummary("", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
 
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register" />
        </div>
    </div>
}

The registration page using Tag Helpers in ASP.NET Core .

<form asp-controller="Account" asp-action="Register" method="post" class="form-horizontal" role="form">
    <h4>Create a new account.</h4>
    <hr />
    <div asp-validation-summary="ValidationSummary.All" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="Email" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="Email" class="form-control" />
            <span asp-validation-for="Email" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">
        <label asp-for="Password" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="Password" class="form-control" />
            <span asp-validation-for="Password" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">
        <label asp-for="ConfirmPassword" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="ConfirmPassword" class="form-control" />
 
            <span asp-validation-for="ConfirmPassword" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <button type="submit" class="btn btn-default">Register</button>
        </div>
    </div>
</form>

Another nice thing is we do not need to explicitly add the AntiForgeryToken . The form Tag helper does this automatically. However, we can explicitly turn it off by using

asp-anti-forgery=”false”
The following two tabs change content below.

Tom Mohan

Tom Mohan is a technologist who loves to code and build. He enjoys working on Microsoft Technologies. Tom specializes in ASP.NET MVC, Web API , Azure, C# ,WPF, SQL etc and holds a Bachelor engineering degree in Computer Science. Certification : MCSD , MCTS
  • Matt Marshall

    Any development team that works with UI designers who don’t understand Razor syntax will find tag helpers a blessing. Pages can be designed with standard html controls and the developers can then add the new tag helper “asp-* attributes to the page.

    • DotnetReference.com

      Yeah. Tag helpers are simple and easy to understand .

  • Zhao Yun

    New feature of ASP.NET Core MVC is tag-helper replacing HTML helper helps developer to build application like classic ASP.NET.
    Using Irwsoft NETCore ASP to render control without complicated html and javascript initialization improves developement speed.

    Please click http://irwsoft.com/Irwsoft.NETCore.Asp/Default.htm for more information.