Asp.Net Core Model Binding And Model Validation Complete Guide

Prerequisites:

• Visual Studio or any other C# IDE.
• .NET SDK installed.

Step 1: Create a New ASP.NET Core Web Application

1. Open Visual Studio and select Create a new project.
2. Choose ASP.NET Core Web App (Model-View-Controller) and click Next.
3. Configure your project (name, location, etc.) and click Create.
4. Select the target framework (e.g., .NET 7.0) and ensure Authentication type is set to No Authentication. Click Create again.

Step 2: Define the Product Model

1. In the Models folder (or create one if it doesn't exist), add a new class named Product.cs.

using System.ComponentModel.DataAnnotations;

namespace YourProjectName.Models
{
    public class Product
    {
        [Key]
        public int Id { get; set; }

        [Required(ErrorMessage = "Name is required")]
        [StringLength(100, ErrorMessage = "Name cannot be longer than 100 characters")]
        public string Name { get; set; } = string.Empty;

        [Required(ErrorMessage = "Price is required")]
        [Range(0.01, double.MaxValue, ErrorMessage = "Price must be greater than zero")]
        public decimal Price { get; set; }

        [Required(ErrorMessage = "Category is required")]
        public string Category { get; set; } = string.Empty;

        [Url(ErrorMessage = "Invalid URL format")]
        public string ImageUrl { get; set; } = string.Empty;
    }
}

Step 3: Create a Data Context Class

If you want to persist data, you can use Entity Framework Core. Here we'll define a simple data context class.

1. Install the Entity Framework Core packages via NuGet Package Manager or the terminal:

   dotnet add package Microsoft.EntityFrameworkCore.SqlServer
   dotnet add package Microsoft.EntityFrameworkCore.Design
   

2. In the Data folder (create it if necessary), add a new class named AppDbContext.cs.

using Microsoft.EntityFrameworkCore;
using YourProjectName.Models;

namespace YourProjectName.Data
{
    public class AppDbContext : DbContext
    {
        public AppDbContext(DbContextOptions<AppDbContext> options) : base(options) { }
        public DbSet<Product> Products { get; set; }
    }
}

3. Configure the database connection string in appsettings.json (replace with your actual connection string):

"ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=YourProjectDb;Trusted_Connection=True;"
}

4. Update Startup.cs or Program.cs (depending on your version of ASP.NET Core) to configure the services and use the data context:

For ASP.NET Core 6:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();

builder.Services.AddDbContext<AppDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

var app = builder.Build();

using (var scope = app.Services.CreateScope())
{
    var dbContext = scope.ServiceProvider.GetRequiredService<AppDbContext>();
    dbContext.Database.EnsureCreated();
}

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

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

app.UseRouting();

app.UseAuthorization();

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

app.Run();

Step 4: Create a Controller

1. In the Controllers folder, add a new class named ProductsController.cs.

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using YourProjectName.Data;
using YourProjectName.Models;
using System.Threading.Tasks;

namespace YourProjectName.Controllers
{
    public class ProductsController : Controller
    {
        private readonly AppDbContext _context;

        public ProductsController(AppDbContext context)
        {
            _context = context;
        }

        // GET: Products/Create
        public IActionResult Create()
        {
            return View();
        }

        // POST: Products/Create
        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create([Bind("Id,Name,Price,Category,ImageUrl")] Product product)
        {
            if (ModelState.IsValid)
            {
                _context.Add(product);
                await _context.SaveChangesAsync();
                return RedirectToAction(nameof(Index));
            }
            return View(product);
        }

        // GET: Products
        public async Task<IActionResult> Index()
        {
            return View(await _context.Products.ToListAsync());
        }
    }
}

Step 5: Create Views

Create View

1. Open the Products controller.
2. Right-click inside the Create action method and select Add View....
3. Set the view name to Create, choose Template as Create, and Model class as Product.
4. Click Add to generate the view.

The Create view will look something like this:

@model YourProjectName.Models.Product

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

<h1>Create</h1>
<hr />

<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Name" class="control-label"></label>
                <input asp-for="Name" class="form-control" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Price" class="control-label"></label>
                <input asp-for="Price" class="form-control" />
                <span asp-validation-for="Price" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Category" class="control-label"></label>
                <input asp-for="Category" class="form-control" />
                <span asp-validation-for="Category" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="ImageUrl" class="control-label"></label>
                <input asp-for="ImageUrl" class="form-control" />
                <span asp-validation-for="ImageUrl" class="text-danger"></span>
            </div>
            <div class="form-group mt-2">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
}

Index View

1. Repeat the steps for adding a controller action method but this time for Index.
2. Select the List template.

The Index view might look something like this:

@model IEnumerable<YourProjectName.Models.Product>

@{
    ViewData["Title"] = "Product List";
}

<h1>@ViewData["Title"]</h1>
<p>
    <a asp-action="Create">Create New Product</a>
</p>

<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Price)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Category)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ImageUrl)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Price)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Category)
            </td>
            <td>
                <img src="@item.ImageUrl" alt="@item.Name" width="150" />
            </td>
            <td>
                <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
                <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
                <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
            </td>
        </tr>
}
    </tbody>
</table>

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
}

Step 6: Enable Client-Side Validation

Ensure that jQuery Validation and Unobtrusive validation are enabled in your layout view (_Layout.cshtml):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - YourProjectName</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/YourProjectName.styles.css" asp-append-version="true" />
</head>
<body>
    <header>
        <!-- Your header content here -->
    </header>

    <main role="main" class="pb-3">
        @RenderBody()
    </main>

    <footer class="border-top footer text-muted">
        <!-- Your footer content here -->
    </footer>

    <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>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

Step 7: Test the Application

1. Run the application.
2. Navigate to /Products/Create.
3. Try submitting the form without filling all the fields; validation messages should appear.
4. Fill the form correctly and submit; it should redirect you to the product list displaying the newly created product.

Conclusion

In this example, we demonstrated how to leverage Model Binding and Model Validation in ASP.NET Core MVC. The [Bind] attribute in the Create method controls which properties should be bound to the model during posts. The [Required] and other validation attributes enforce rules and provide feedback to the user directly in the browser through client-side validation and also ensure data integrity on the server side.