Asp.Net Mvc Html Helpers And Tag Helpers Complete Guide

Introduction to ASP.NET MVC HTML Helpers and Tag Helpers

In ASP.NET MVC, HTML Helpers and Tag Helpers are mechanisms that simplify the creation of HTML elements in Razor views. They help maintain clean, readable, and maintainable code.

HTML Helpers

• HTML Helpers are methods that return an MvcHtmlString containing the HTML elements.
• They are called by using the Html object in the Razor view.

Tag Helpers

• Tag Helpers provide a server-side way to transform HTML elements into more powerful elements in Razor files.
• They are declared using special attributes within HTML tags.

Setting Up an ASP.NET MVC Project

Before we dive into HTML Helpers and Tag Helpers, let's set up a simple ASP.NET MVC project to illustrate their usage.

1. Open Visual Studio and select Create a new project.
2. Choose ASP.NET Core Web App (Model-View-Controller) and give your project a name, e.g., MvcHtmlTagHelpers.
3. Click Create.
4. Make sure to select ASP.NET Core 5.0+ as the framework version.

Example Model: Product

Create a simple model class named Product that will be used in the examples.

Create the Product Model

Add a new class named Product under a folder named Models:

// Models/Product.cs
namespace MvcHtmlTagHelpers.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }
}

HTML Helpers Examples

HTML Helpers use methods called on the Html object in Razor views to generate HTML elements.

Example 1: Basic HTML Helper Methods

Create a view named HtmlHelpersExample.cshtml under Views/Home and add the following code:

@model MvcHtmlTagHelpers.Models.Product

@{
    ViewBag.Title = "HTML Helpers Example";
}

<h2>HTML Helper Examples</h2>

@* Textbox for the product's name *@
<p>
    <strong>Name:</strong> @Html.TextBoxFor(model => model.Name)
</p>

@* Textbox with placeholder for the product's name *@
<p>
    <strong>Name with Placeholder:</strong> @Html.TextBoxFor(model => model.Name, new { @placeholder = "Enter product name" })
</p>

@* Textbox for the product's price *@
<p>
    <strong>Price:</strong> @Html.TextBoxFor(model => model.Price, new { @type = "number" })
</p>

@* Hidden field for the product's ID *@
<p>
    @Html.HiddenFor(model => model.Id)
    <strong>ID (Hidden):</strong> @Model.Id
</p>

@* Label for the product's name *@
<p>
    @Html.LabelFor(model => model.Name, "Product Name")
</p>

@* Submit button *@
<p>
    <input type="submit" value="Submit" />
</p>

Example 2: DropdownList HTML Helper

Create a new view named DropdownExample.cshtml under Views/Home with the following code:

@model MvcHtmlTagHelpers.Models.Product

@{
    ViewBag.Title = "Dropdown Example";
}

<h2>DropdownList HTML Helper Example</h2>

@* Dropdown for categories *@
@{
    var categories = new List<string> { "Electronics", "Books", "Clothing" };
}

@Html.DropDownListFor(model => model.Name, new SelectList(categories), "Select Category")

@* Submit button *@
<p>
    <input type="submit" value="Submit" />
</p>

Example 3: Validation HTML Helpers

Add validation to the HtmlHelpersExample view.

1. Modify the Product Model to include validation attributes:

   // Models/Product.cs
   using System.ComponentModel.DataAnnotations;
   
   namespace MvcHtmlTagHelpers.Models
   {
       public class Product
       {
           public int Id { get; set; }
   
           [Required(ErrorMessage = "Product name is required.")]
           [StringLength(100, ErrorMessage = "Product name cannot exceed 100 characters.")]
           public string Name { get; set; }
   
           [Required(ErrorMessage = "Price is required.")]
           [Range(0, double.MaxValue, ErrorMessage = "Price must be a positive number.")]
           public decimal Price { get; set; }
       }
   }
   

2. Include validation scripts in the HtmlHelpersExample.cshtml:

   @model MvcHtmlTagHelpers.Models.Product
   
   @{
       ViewBag.Title = "HTML Helpers Example";
   }
   
   @using (Html.BeginForm())
   {
       <h2>HTML Helper Examples</h2>
   
       <p>
           <strong>Name:</strong> @Html.TextBoxFor(model => model.Name, new { @placeholder = "Enter product name" })
           @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
       </p>
   
       <p>
           <strong>Price:</strong> @Html.TextBoxFor(model => model.Price, new { @type = "number" })
           @Html.ValidationMessageFor(model => model.Price, "", new { @class = "text-danger" })
       </p>
   
       <p>
           @Html.HiddenFor(model => model.Id)
           <strong>ID (Hidden):</strong> @Model.Id
       </p>
   
       <p>
           @Html.LabelFor(model => model.Name, "Product Name")
       </p>
   
       <p>
           <input type="submit" value="Submit" />
       </p>
   }
   
   @section Scripts {
       @Scripts.Render("~/bundles/jqueryval")
   }
   

Tag Helpers Examples

Tag Helpers provide a more natural, HTML-like experience for writing Razor code.

Example 1: Basic Tag Helpers

Create a view named TagHelpersExample.cshtml under Views/Home and add the following code:

@model MvcHtmlTagHelpers.Models.Product

@{
    ViewBag.Title = "Tag Helpers Example";
}

<h2>Tag Helper Examples</h2>

<form asp-action="TagHelpersExample" method="post">

    @* Textbox for the product's name *@
    <p>
        <strong>Name:</strong> <input asp-for="Name" placeholder="Enter product name" />
    </p>

    @* Textbox for the product's price *@
    <p>
        <strong>Price:</strong> <input asp-for="Price" type="number" />
    </p>

    @* Hidden field for the product's ID *@
    <p>
        <input type="hidden" asp-for="Id" />
        <strong>ID (Hidden):</strong> @Model.Id
    </p>

    @* Label for the product's name *@
    <p>
        <label asp-for="Name">Product Name</label>
    </p>

    @* Submit button *@
    <p>
        <input type="submit" value="Submit" />
    </p>
</form>

Example 2: Select Tag Helper

Create a new view named SelectExample.cshtml under Views/Home with the following code:

@model MvcHtmlTagHelpers.Models.Product

@{
    ViewBag.Title = "Select Example";
}

<h2>Select Tag Helper Example</h2>

@{
    var categories = new List<string> { "Electronics", "Books", "Clothing" };
}

<form asp-action="SelectExample" method="post">

    @* Dropdown for categories *@
    <p>
        <label asp-for="Name">Category</label>
        <select asp-for="Name" asp-items="@(new SelectList(categories))">
            <option value="">--Select Category--</option>
        </select>
    </p>

    @* Submit button *@
    <p>
        <input type="submit" value="Submit" />
    </p>
</form>

Example 3: Validation Tag Helpers

Modify the TagHelpersExample view to use validation tag helpers.

1. Ensure the Product model includes validation attributes (done in the HTML Helpers example).

2. Add validation tag helpers to the TagHelpersExample.cshtml:

   @model MvcHtmlTagHelpers.Models.Product
   
   @{
       ViewBag.Title = "Tag Helpers Example";
   }
   
   <form asp-action="TagHelpersExample" method="post">
       <h2>Tag Helper Examples</h2>
   
       @* Textbox for the product's name *@
       <p>
           <strong>Name:</strong> <input asp-for="Name" placeholder="Enter product name" />
           <span asp-validation-for="Name" class="text-danger"></span>
       </p>
   
       @* Textbox for the product's price *@
       <p>
           <strong>Price:</strong> <input asp-for="Price" type="number" />
           <span asp-validation-for="Price" class="text-danger"></span>
       </p>
   
       @* Hidden field for the product's ID *@
       <p>
           <input type="hidden" asp-for="Id" />
           <strong>ID (Hidden):</strong> @Model.Id
       </p>
   
       @* Label for the product's name *@
       <p>
           <label asp-for="Name">Product Name</label>
       </p>
   
       @* Submit button *@
       <p>
           <input type="submit" value="Submit" />
       </p>
   </form>
   
   @section Scripts {
       <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
       <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
   }
   

Setting Up the Controller

To make sure the views render correctly, set up a simple controller that will pass data to the views.

Create a Home Controller

1. Add a new Controller named HomeController under Controllers:

   // Controllers/HomeController.cs
   using Microsoft.AspNetCore.Mvc;
   using MvcHtmlTagHelpers.Models;
   
   namespace MvcHtmlTagHelpers.Controllers
   {
       public class HomeController : Controller
       {
           public IActionResult HtmlHelpersExample()
           {
               var product = new Product
               {
                   Id = 1,
                   Name = "Sample Product",
                   Price = 99.99m
               };
               return View(product);
           }
   
           [HttpPost]
           public IActionResult HtmlHelpersExample(Product product)
           {
               if (ModelState.IsValid)
               {
                   // Handle the valid form submission
                   // For example, save the product or redirect to another action
               }
   
               // Return the same view with the invalid model state
               return View(product);
           }
   
           public IActionResult TagHelpersExample()
           {
               var product = new Product
               {
                   Id = 1,
                   Name = "Sample Product",
                   Price = 99.99m
               };
               return View(product);
           }
   
           [HttpPost]
           public IActionResult TagHelpersExample(Product product)
           {
               if (ModelState.IsValid)
               {
                   // Handle the valid form submission
               }
   
               return View(product);
           }
   
           public IActionResult DropdownExample()
           {
               var product = new Product
               {
                   Id = 1,
                   Name = "Sample Product",
                   Price = 99.99m
               };
               return View(product);
           }
   
           [HttpPost]
           public IActionResult DropdownExample(Product product)
           {
               if (ModelState.IsValid)
               {
                   // Handle the valid form submission
               }
   
               return View(product);
           }
   
           public IActionResult SelectExample()
           {
               var product = new Product
               {
                   Id = 1,
                   Name = "Sample Product",
                   Price = 99.99m
               };
               return View(product);
           }
   
           [HttpPost]
           public IActionResult SelectExample(Product product)
           {
               if (ModelState.IsValid)
               {
                   // Handle the valid form submission
               }
   
               return View(product);
           }
       }
   }
   

Configure Routes

Make sure to set up routing in Startup.cs to point to your default route:

// Startup.cs
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllersWithViews();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();

        app.UseRouting();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "{controller=Home}/{action=HtmlHelpersExample}/{id?}");
        });
    }
}

Summary

In this comprehensive guide, we covered:

1. Setting up an ASP.NET MVC project.
2. Creating a simple Product model.
3. Examples of HTML Helpers, including:
   • Basic HTML Helper methods.
   • Dropdown list.
   • Validation.
4. Examples of Tag Helpers, including:
   • Basic Tag Helpers.
   • Select Tag Helper.
   • Validation.
5. Configuring routes to render the views correctly.