The difference between HTML Helpers and Tag Helpers

Tag Helpers are attached to HTML elements inside your Razor views and can help you write markup that is both cleaner and easier to read than the traditional HTML Helpers. HTML Helpers, on the other hand, are invoked as methods that are mixed with HTML inside your Razor views.

Visual Studio also provides minimum IntelliSense support when writing HTML Helpers, as the parameters for the HTML Helper methods are all strings. For example, in the following code, the LabelFor and TextBoxFor HTML Helper methods are used to create a label and textbox for a model property:

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

Because the class is a reserved word in C#, you will notice in the preceding code how you have to append the @ sign in order to specify a CSS class name for the label and textbox. For a frontend designer who is familiar with HTML, CSS, and JavaScript, but not C# or Razor, the code would be very hard to read and interpret.

On the other hand, Visual Studio's IntelliSense writes all of the markup for Tag Helpers. For example, the same code shown previously can be written in the following manner using Tag Helpers:

<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" />         
    </div> 
</div> 

The preceding markup can easily be read by a frontend designer, as it uses a standard HTML element, but the elements contain asp- attributes. Even though the asp- attributes still use strings for their value, Visual Studio, using IntelliSense, assists in writing all of the markup for the Tag Helper.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.191.134