Tag Helpers and HTML Helpers and Web server controls comparison

Tag Helpers and HTML Helpers comparison

Tag Helpers is appended to the HTML element in the Razor view, and ' HTML Helpers is invoked as a method interspersed to HTML in the Razor view. Consider the following Razor tag, which creates an HTML label tag with the "caption" CSS class:

@Html. Label ("FirstName""first Name:"new {@class="caption"})

The @ at () symbol tells Razor that this is the beginning of the code. The next two parameters ("FirstName" and "first Name:") are strings, so ' IntelliSense does not help. The final parameter:

New {@class="caption"}

is an anonymous object that is used to represent an attribute. Because class is a reserved keyword for C #, use a @ symbol to force C # to interpret "@class =" as a symbol (attribute name). For a front-end designer (some people familiar with Html/css/javascript and other client technologies but are unfamiliar with C # and Razor), the bulk of the line is unfamiliar. The entire line must be written with the help of no IntelliSense.

Use LabelTagHelper , the same token can be written as:

   class="caption"for ="FirstName">first name</label>

With the version of Tag Helper, once you enter in the Visual Studio editor <l , IntelliSense displays the matching elements:

IntelliSense helps you write entire lines of code. The LabelTagHelper asp-for contents of the attribute value ("FirstName") are also defaulted to "first name"; it transforms the Hump name attribute into a sentence consisting of the name of the property that is capitalized by each initial letter. In the following markup:

Generated:

class="caption"asp-for="FirstName">first name</label>

If you want to add content to the <label> , camel-cased to sentence-cased content is not being used. For example:

The following code picture shows the form portion of the views/account/register.cshtml Razor view that was generated from a traditional template that contains ASP. NET 4.5.x MVC in Visual Studio 2015.

The Visual Studio Editor uses a gray background to display C # code. For example, AntiForgeryToken HTML Helper:

@Html. AntiForgeryToken ()

is displayed on a gray background. Most of the marks in the Register view are C #. Compared to the equivalent method using Tag Helpers:

These tags are much cleaner and easier to read, edit, and maintain than the HTML Helpers method. C # code reduces the minimum value that the server needs to know. The Visual Studio Editor displays the target of the tag through a unique font.

Consider the Email Group:

<divclass="Form-group"> <label asp- for="Email" class="Col-md-2 Control-label"></Label> <divclass="Col-md-10"> <input asp- for="Email" class="Form-control" /> <span asp-validation- for="Email" class="Text-danger"></Span> </div></Div>

Each "asp-" feature has an "email" value, but "email" is not a string. In this context, "Email" is for RegisterViewModel the C # model expression properties.

Using the methods in the tag Helper registration form, the Visual Studio editor helps you write all the markup, and Visual Studio does not provide help with the code for the HTML Helpers method IntelliSense support for Tag Helpers _ Details Tag Hel Pers work in the Visual Studio editor.

Tag Helpers and Web server controls comparison

• Tag Helpers does not own the elements they are associated with, they simply participate in the rendering of elements and content. Asp.netweb Server controls is declared and called on the page.

• ' Web server controls have a different life cycle that makes development and debugging difficult.

• Web server controls allow you to add functionality to client-side Document object models (Ocument object model, DOM) through client-side controls. Tag Helpers does not have a DOM.

• The WEB server control contains automatic browser detection. Tag Helpers does not recognize the browser.

• Multiple Tag Helpers can act on the same element, and you typically cannot form a WEB server control.

• Tag Helpers can modify the contents of tags and HTML elements within their scope, but not directly modify any content on the page. Web server controls have a small, specific range that can perform actions that affect other parts of the page, resulting in unintended side effects.

• The WEB server control uses type converters to convert a string to an object. With Tag Helpers, you work with C #, so you don't need to do type conversions.

• Web server controls use System.ComponentModel to implement run-time and design-time behavior for components and controls. System.ComponentModelincludes base classes and interfaces for implementing properties and type converters, binding to data sources and authorization components. In contrast to Tag Helpers, usually comes from, and the TagHelper TagHelper base class exposes only two methods Process and ProcessAsync .

<input asp- for="Id"Type="Hidden"/><divclass="Form-group"> <label> name </label> <input asp- for="Name" class="Form-control"/></div><divclass="Form-group"> <label> symbols </label> <input asp- for="Code" class="Form-control"/></div><divclass="Form-group"> <label> version </label> <opt:versionselect x for="Version"x-param="1" class="Form-control"></opt:versionselect></div>

Tag Helpers and HTML Helpers and Web server controls comparison