Asp.Net Core Tag Helpers And Html Helpers Complete Guide

ASP.NET Core Tag Helpers and HTML Helpers

Overview

ASP.NET Core provides two primary ways to render HTML within Razor views:

1. HTML Helpers: Methods that are invoked on an HtmlHelper object (Html) to generate HTML output.
2. Tag Helpers: Self-closing HTML elements with special attributes used to invoke server-side code.

Setting Up a New ASP.NET Core Project

Let's create a simple ASP.NET Core MVC application to demonstrate HTML Helpers and Tag Helpers.

Step 1: Create a New ASP.NET Core MVC Project

• Open Visual Studio.
• Select "Create a new project".
• Choose "ASP.NET Core Web App (Model-View-Controller)".
• Enter the project name (e.g., TagHelpersDemo).
• Click "Create".
• Select .NET 6.0 (Long-term support) or the latest version, and click "Create".

Step 2: Create a Model

Create a simple model to work with.

Step 2.1: Add a Student Model

using System.ComponentModel.DataAnnotations;

namespace TagHelpersDemo.Models
{
    public class Student
    {
        [Required]
        [StringLength(20, MinimumLength = 2, ErrorMessage = "Name must be between 2 and 20 characters.")]
        public string Name { get; set; }

        [Required]
        [Range(18, 100, ErrorMessage = "Age must be between 18 and 100.")]
        public int Age { get; set; }

        [Required]
        [EmailAddress(ErrorMessage = "Invalid email address.")]
        public string Email { get; set; }
    }
}

Step 3: Add a Controller

Create a StudentsController with actions for showing a form and handling that form submission.

Step 3.1: Add a StudentsController

using Microsoft.AspNetCore.Mvc;
using TagHelpersDemo.Models;

namespace TagHelpersDemo.Controllers
{
    public class StudentsController : Controller
    {
        public IActionResult Create()
        {
            return View();
        }

        [HttpPost]
        public IActionResult Create(Student student)
        {
            if (ModelState.IsValid)
            {
                // Perform some action with the student data (save to database, send email, etc.)
                return RedirectToAction("Success", new { name = student.Name });
            }

            return View(student);
        }

        public IActionResult Success(string name)
        {
            ViewBag.Name = name;
            return View();
        }
    }
}

Step 4: Create Views

Create the necessary views for the actions in the StudentsController.

Step 4.1: Create a Create.cshtml View

Using HTML Helpers

@model Student
@{
    ViewData["Title"] = "Create Student";
}

<h2>Create Student</h2>

<form asp-action="Create" method="post">
    <div>
        <label asp-for="Name"></label>
        @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Name, "", new { @class = "text-danger" })
    </div>
    <div>
        <label asp-for="Age"></label>
        @Html.TextBoxFor(m => m.Age, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Age, "", new { @class = "text-danger" })
    </div>
    <div>
        <label asp-for="Email"></label>
        @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
    </div>
    <div>
        <button type="submit" class="btn btn-primary">Create</button>
    </div>
</form>

Using Tag Helpers

@model Student
@{
    ViewData["Title"] = "Create Student";
}

<h2>Create Student</h2>

<form asp-action="Create" method="post">
    <div>
        <label asp-for="Name"></label>
        <input asp-for="Name" class="form-control" />
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>
    <div>
        <label asp-for="Age"></label>
        <input asp-for="Age" class="form-control" />
        <span asp-validation-for="Age" class="text-danger"></span>
    </div>
    <div>
        <label asp-for="Email"></label>
        <input asp-for="Email" class="form-control" />
        <span asp-validation-for="Email" class="text-danger"></span>
    </div>
    <div>
        <button type="submit" class="btn btn-primary">Create</button>
    </div>
</form>

Step 4.2: Create a Success.cshtml View

Shared Layout (Optional)

Ensure you have a _Layout.cshtml file for styling and navigation if you haven't already.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - TagHelpersDemo</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="/">TagHelpersDemo</a>
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" asp-controller="Students" asp-action="Create">Create Student</a>
            </li>
        </ul>
    </nav>
    <div class="container mt-3">
        @RenderBody()
    </div>
</body>
</html>

Success View

@{
    ViewData["Title"] = "Success";
}

<h2>Success</h2>

<p>Student <strong>@ViewBag.Name</strong> has been created successfully!</p>

Step 5: Configure Routing

Ensure routing is set up correctly in Startup.cs (for ASP.NET Core 3.0 and later, this is typically done in Program.cs).

using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace TagHelpersDemo
{
    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=Students}/{action=Create}/{id?}");
            });
        }
    }
}

Step 6: Run the Application

Run the application and navigate to https://localhost:5001/Students/Create (or the appropriate URL).

• You should see a form to create a student.
• Fill out the form and submit it.
• On success, you should see a confirmation page.

Summary

• HTML Helpers: Methods called on an HtmlHelper object (Html) to generate HTML.
• Tag Helpers: Self-closing HTML elements with special attributes to invoke server-side code.

Both serve similar purposes but have different syntax and capabilities. Tag Helpers provide a more clean and declarative approach, while HTML Helpers are more programmatic.