PRACTICAL 5 & 6: FORM HANDLING AND MODEL BINDING WITH CLIENT SIDE AND SERVER SIDE VALIDATION

Form Handling : captures user input from a form.
Model Binding : maps form data to C# objects automatically.

STEPS:
1. Create ASP.NET Core Web App (MVC) project.
2. Create a new controller in the Controllers folder named ContactController.
3. Create a class file in the Models folder named ContactForm.cs.
4. In the Views folder, create a new folder named Contact.
5. Inside Views/Contact, add Index.cshtml for the form view.
6. Inside Views/Contact, add Thanks.cshtml for the confirmation page.
7. In Startup.cs / Program.cs, (optional) set the default route to controller "Contact".

SERVER SIDE:

CODE: (Controllers/ContactController.cs)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Prac5.Models;

namespace Prac5.Controllers
{
    public class ContactController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public IActionResult Index(ContactForm form)
        {
            if (ModelState.IsValid)
            {
                return RedirectToAction("Thanks");
            }
            return View(form);
        }

        public IActionResult Thanks()
        {
            return View();
        }
    }
}

CODE: (Views/Contact/Index.cshtml)
@{

}
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
@model Prac5.Models.ContactForm
<form asp-action="Index" method="post">
    <div>
        <label asp-for="Name"></label>
        <input asp-for="Name" />
        <span asp-validation-for="Name"></span>
    </div>
    <div>
        <label asp-for="Email"></label>
        <input asp-for="Email" />
        <span asp-validation-for="Email"></span>
    </div>
    <div>
        <label asp-for="Message"></label>
        <textarea asp-for="Message"></textarea>
        <span asp-validation-for="Message"></span>
    </div>
    <button type="submit">Send</button>
</form>

CODE: (Models/ContactForm.cs)
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace Prac5.Models
{
    public class ContactForm
    {
        [Required(ErrorMessage="Username is mandatory")]
        public string Name { get; set; }

        [Required(ErrorMessage = "Email is mandatory")]
        [EmailAddress(ErrorMessage ="Invalid Email Format")]
        public string Email { get; set; }

        [StringLength(500,ErrorMessage ="Message cannot exceed 500 characters,")]
        public string Message { get; set; }
    }
}

CODE: (Startup.cs - Configure method: only change controller=Contact)
app.UseRouting();

app.UseAuthorization();

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

CODE: (Views/Contact/Thanks.cshtml)
@{
    ViewData["Title"] = "Thanks";
}

<h1>Thankyou! Your form has been submitted!</h1>

OUTPUT:
Leaving Name / Email empty or giving an invalid e-mail shows the error messages.
A valid form redirects to the Thanks page: "Thankyou! Your form has been submitted!"

CLIENT SIDE:
Run the output and inspect (right click > Inspect in the browser).
The validation messages appear without a page reload because of the jQuery validation
scripts (jquery.validate and jquery.validate.unobtrusive) added in Index.cshtml.
