Back to: ASP.NET Core Tutorials For Beginners and Professionals
Model Binding in ASP.NET Core MVC with Complex Type
In this article, I will discuss Model Binding in ASP.NET Core MVC with Complex Type with Examples. Please read our previous article, where we discussed FromBody in ASP.NET Core MVC.
Model Binding in ASP.NET Core MVC with Complex Type
The Model Binding in ASP.NET Core MVC Application also works with complex types like Customer, Student, Order, Product, etc. Let us understand this with an example.
First, create a model class to hold the posted form data. Here, we will create a form to hold the student data. First, we need to create the required models as follows:
Gender.cs:
Create a class file with the name Gender.cs, and then copy and paste the following code into it. This is going to be an enum that will represent the gender-named constants.
namespace ModelBindingDemo.Models
{
public enum Gender
{
Male,
Female
}
}
Branch.cs
Create a class file with the name Branch.cs, and then copy and paste the following code into it. This is going to be an enum which will represent the branches named constants.
namespace ModelBindingDemo.Models
{
public enum Branch
{
None,
CSE,
ETC,
Mech
}
}
Student.cs
Create a class file with the name Student.cs and copy and paste the following code into it. This is going to be a class that will hold the student data, and this is going to be our model.
namespace ModelBindingDemo.Models
{
public class Student
{
public int StudentId { get; set; }
public string? Name { get; set; }
public string? Email { get; set; }
public string? Password { get; set; }
public Branch? Branch { get; set; }
public Gender? Gender { get; set; }
public bool IsRegular { get; set; }
public string? Address { get; set; }
public DateTime DateOfBorth { get; set; }
}
}
Creating Student Controller:
Next, create an MVC Controller with the name StudentsController and copy and paste the following code into it.
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using ModelBindingDemo.Models;
namespace ModelBindingDemo.Controllers
{
public class StudentsController : Controller
{
[HttpGet("Student/Create")]
public ViewResult Create()
{
ViewBag.AllGenders = Enum.GetValues(typeof(Gender)).Cast<Gender>().ToList();
ViewBag.AllBranches = new List<SelectListItem>()
{
new SelectListItem { Text = "None", Value = "1" },
new SelectListItem { Text = "CSE", Value = "2" },
new SelectListItem { Text = "ETC", Value = "3" },
new SelectListItem { Text = "Mech", Value = "4" }
};
return View();
}
[HttpPost("Student/Create")]
public IActionResult Create(Student student)
{
if(ModelState.IsValid)
{
return RedirectToAction("Successful");
}
else
{
ViewBag.AllGenders = Enum.GetValues(typeof(Gender)).Cast<Gender>().ToList();
ViewBag.AllBranches = new List<SelectListItem>()
{
new SelectListItem { Text = "None", Value = "1" },
new SelectListItem { Text = "CSE", Value = "2" },
new SelectListItem { Text = "ETC", Value = "3" },
new SelectListItem { Text = "Mech", Value = "4" }
};
return View(student);
}
}
public string Successful()
{
return "Student Created Successfully";
}
}
}
Next, add Create.cshtml view and copy and paste the following code.
@model Student
@{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
var Branches = ViewBag.AllBranches as List<Branch>;
}
<div>
<form asp-controller="Students" asp-action="Create" method="post" class="mt-3">
<div style="margin-top:7px" class="form-group row">
<label asp-for="Name" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<input asp-for="Name" class="form-control" placeholder="Enter Your Name">
</div>
</div>
<div style="margin-top:7px" class="form-group row">
<label asp-for="Email" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<input asp-for="Email" class="form-control" placeholder="Enter Your Email Id">
</div>
</div>
<div style="margin-top:7px" class="form-group row">
<label asp-for="Password" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<input asp-for="Password" class="form-control" placeholder="Enter Your Password">
</div>
</div>
<div style="margin-top:7px" class="form-group row">
<label asp-for="Branch" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<select asp-for="Branch" class="custom-select mr-sm-2"
asp-items="Html.GetEnumSelectList<Branch>()"></select>
@*<select asp-for="Gender" asp-items="ViewBag.AllBranches"></select>*@
</div>
</div>
<div style="margin-top:7px" class="form-group row">
<label asp-for="IsRegular" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<input type="checkbox" class="custom-control-input" asp-for="IsRegular">
</div>
</div>
<div style="margin-top:7px" class="form-group row">
<label asp-for="DateOfBorth" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<input asp-for="DateOfBorth" class="form-control">
</div>
</div>
<div style="margin-top:7px" class="form-group row">
<label asp-for="Gender" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
@foreach (var gender in ViewBag.AllGenders)
{
<label class="radio-inline">
<input type="radio" asp-for="Gender" value="@gender" id="Gender@(gender)" />@gender<br />
</label>
}
</div>
</div>
<div style="margin-top:7px" class="form-group row">
<label asp-for="Address" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<textarea asp-for="Address" class="form-control" placeholder="Enter Your Address"></textarea>
</div>
</div>
<div style="margin-top:10px" class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Create</button>
</div>
</div>
</form>
</div>
How does it work?
When the form is submitted, the values are mapped to the Student object parameter of the Post Create action method. The Model binder in the ASP.NET Core application binds the posted form values to the Student object’s properties that are passed as a parameter to the Create() action method.
The value in the input element with the name attribute set to “Name” is mapped to the Name property of the Student object. Similarly, the value in the Branch input element will be mapped to the Branch property of the Student object. This will be the same for the other properties, like Email and Gender.
With the above changes in place, run the application, and it should work as expected. So, ASP.NET Core’s model binding system is robust and flexible, capable of handling various scenarios from simple types to complex nested objects and collections. This allows developers to focus on their application logic without worrying about the intricacies of parsing request data.
In the next article, I will discuss Custom Model Binding in ASP.NET Core MVC with Examples. In this article, I try to explain Model Binding in ASP.NET Core MVC with Complex Type with Examples. I hope you enjoy this Model Binding in ASP.NET Core MVC with Complex Type article.
