What is the advantage of using Tag Helpers in ASP.Net MVC 6

Question

Apologized that I am not very good in asp.net mvc that I would like to confess. I just come across a good write up for asp.net 5 new feature from this url.

From there I heard about a term called Tag Helpers in ASP.Net MVC 6 and I saw there people say before developer create form this below way:

@model MyProject.Models.Product

@using (Html.BeginForm())
{
    <div>
        @Html.LabelFor(m => p.Name, "Name:")
        @Html.TextBoxFor(m => p.Name)
    </div>
    <input type="submit" value="Create" />
}

and now people can code the same with tag helper the below way

@model MyProject.Models.Product
@addtaghelper "Microsoft.AspNet.Mvc.TagHelpers"

<form asp-controller="Products" asp-action="Create" method="post">
    <div>
        <label asp-for="Name">Name:</label>
        <input asp-for="Name" />
    </div>

    <input type="submit" value="Save" />
</form>

They use some few new syntax called asp-controller, asp-for etc but what it will do? How and why people would be benefited by using this new syntax asp-controller, asp-for etc.

So please some one help me to understand this new tag helper concept and how it will make a developer life easier. Thanks.

Answer 1

The most important improvement I've seen so far is the control it guarantees over your HTML elements. While convenient, the Html helpers used by MVC create problems when you try to do things they weren't built for.

A simple example can be seen when using the TextBox in MVC5:

 @Html.TextBoxFor(m => p.Name)

The resulting HTML markup looks like:

<input class="form-control" id="Name" name="Name" type="text" value="">

Nice and simple. But what if you want to add a placeholder attribute? What if you want to use bootstrap's validation states? What if you have some 3rd party super cool javascript library which needs custom attributes. None of these things were possible in the initial release of MVC5. Though they were eventually added via update in the form of htmlAttributes. Even now adding custom attributes is kludgey at best.

@Html.TextBoxFor(m => p.Name, 
    new {@class="form-control has-error", placeholder="Enter Name", 
    superCoolFeature="Do something cool"})

While you could argue this is still less code that straight HTML, it is no longer a significant advantage. Worse, this solution still doesn't cover dashes in attributes which are fairly common. If you need them you are stuck with a workaround such as ActionLink htmlAttributes

I've gone down the route of fixing these deficiencies with custom editors, and tried building my own TextBox controls. It became obvious pretty quickly that replacing the included TextBox templates would require a lot of work. Worse, your templates have to have knowledge of any extensions you are adding to use them.

It seems like the inclusion of Bootstrap and other 3rd party tools into MVC have made it more obvious that the current design has problems with extending HTML which need to be fixed. Hopefully the tag helpers implementation is complete enough that we can avoid them in the future.

Answer 2

Not to mention, your Web Designers will have real HTML tags to edit that they recognize to re-design your pages. Designers shouldn't have to be coders and there's enough for these sharp folks to keep up with, studying the moving targets of HTML5 and CSS3 specs.

Answer 3

A few things come to mind:

1. As @ChrisWalter points out, these tag helpers give HTML tags an Open/Closed quality. Rather than just letting you write extension methods for common HTML patterns, you can extend an HTML element. This lets you pick-and-mix multiple extensions per component, rather than having to choose between them.

2. HTML Helpers tend to not work super well for elements that need to have inner HTML provided as an argument. They came up with a clever pattern so you can say:

   @using (Html.BeginForm(...)){
   {
       <input ... />
   }
   

   But there's nothing about BeginForm() that would force you to put it in a using statement, and there's nothing to prevent you from using incorrect HTML structure. (<input> technically isn't allowed to be directly inside a <form> tag.)

3. This gives us a really easy transitional stepping stone into the Web Components world of HTML5. A component that you write today for jQuery or Bootstrap to pick up and enhance may make more sense as an Angular 2 or Polymer component in a few years. Using HTML syntax makes it possible to write your HTML the way you want it to look when it's a web component, and have it automatically translated into the structure it has to take on for now (or for specific browsers, later).