Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the advantage of using Tag Helpers in ASP.NET Core MVC

I just come across a good write up for a new ASP.NET Core feature called Tag helpers.

From there, I understood that one can replace the following code:

@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" /> } 

with:

@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> 

There's some new syntax such as asp-controller, asp-for, etc. But what does it do? And what's the advantage of this new approach?

like image 641
Mou Avatar asked Mar 12 '15 09:03

Mou


People also ask

What is tag helper in ASP.NET Core MVC?

A Tag Helper Component is a Tag Helper that allows you to conditionally modify or add HTML elements from server-side code. This feature is available in ASP.NET Core 2.0 or later. ASP.NET Core includes two built-in Tag Helper Components: head and body . They're located in the Microsoft. AspNetCore.

What is the purpose of form tag helpers?

The Form Tag HelperGenerates a hidden Request Verification Token to prevent cross-site request forgery (when used with the [ValidateAntiForgeryToken] attribute in the HTTP Post action method) Provides the asp-route-<Parameter Name> attribute, where <Parameter Name> is added to the route values.

Why we use HTML helpers in MVC?

Helper class can create HTML controls programmatically. HTML Helpers are used in View to render HTML content. It is not mandatory to use HTML Helper classes for building an ASP.NET MVC application. We can build an ASP.NET MVC application without using them, but HTML Helpers helps in the rapid development of a view.

What is the purpose of the Environment tag helper in ASP.NET Core 1.0 MVC?

The Environment Tag Helper conditionally renders its enclosed content based on the current hosting environment. The Environment Tag Helper's single attribute, names , is a comma-separated list of environment names. If any of the provided environment names match the current environment, the enclosed content is rendered.


2 Answers

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.

like image 169
Chris Walter Avatar answered Sep 22 '22 08:09

Chris Walter


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.

like image 31
jaygeek Avatar answered Sep 18 '22 08:09

jaygeek