Introduction To Model Binding in ASP.Net MVC: Part 1

Introduction

Today we'll learn about Model Binding in MVC applications. Model Binding allows you to map and bind the HTTP request data with a model. If you want to work with the form data, Model Binding makes it easier because the requested data is submitted automatically into a data model that we specify. The Default Binder is used to do this, if we go deep intp this.

In that context, you'll learn here the model biding working with the various types of models such as:

• No Binding
• Binding with Simple Types
• Binding with Class Types
• Binding with Class Properties

Before Getting Started

You must be familiar with the knowledge of MVC or you can refer to Getting Started with MVC. Here, I am developing an application on Visual Studio 2013 using MVC 5 Project Template. So, start with the following points:

• Open Visual Studio 2013 and click on "New Project"
• Select the ASP.NET Web Application and enter the name to it
• Select the MVC project template to develop the application

No Binding

In this section we'll see how form data is to be used without no Model Binding. So, follow the procedure below.

Step 1: Scaffold a new MVC empty controller named "ModelBinding".

Step 2: Modify the Index() method with the following code:

public ActionResult Index()
{
    if (Request.Form.Count > 0)
    {
        string ID= Request.Form["StudentID"];
        string FirstName = Request.Form["StudentFirstName"];
        ViewBag.Message = "Your Student retrieved successfully with an ID" + " " +ID+ "!!";
    }
    return View();
}

Step 3: Generate the view named Index and replace the code with the following code:

@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
@using (Html.BeginForm())
{
    <div class="form-horizontal">
        <h4>Enter Details</h4>
        <hr />
        <div class="form-group">
            @Html.Label("ID:", new { @class = "col-md-2 control-label" })
            <div class="col-md-10">
                @Html.TextBox("StudentID")
            </div>
        </div>
        <div class="form-group">
            @Html.Label("Name:", new { @class = "col-md-2 control-label" })
            <div class="col-md-10">
                @Html.TextBox("StudentFirstName")
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Submit" class="btn btn-default" />
                @ViewBag.Message
            </div>
        </div>
    </div>
}

Step 4: Run the application and open the Index view of your controller. Enter some data and you can see the following screenshot while clicking on "Submit".

Binding with Simple Types

As you know the DefaultBinder object handles the default Model Binding. The MVC provides the System.Web.Mvc.DefaultModelBinder that is used to work with the simple types or classes and collections. Let's see how it works.

Step 1: Modify the Index() in your controller with the following code:

public ActionResult Index()
{
    return View();
}
[HttpPost]
public ActionResult Index(string studentid, string studentfirstname)
{
    ViewBag.Message = "Your Student retrieved successfully with an ID" + " " + studentid + "!!";
    return View();
}

Step 2: Now run the controller and enter the id.

Note: Please ensure that the variables you define in the Index() is the same name as you defined in the view. Just view at the following screenshot if we define the following variables:

public ActionResult Index(string studentid, string tudentfirstname)

You can see that the null value is assigned in the tudentfirstname variable.

Binding with Class Types

Step 1: Add a class named "Student" in the Models folder and replace the code with the following code:

public class Student
{
    public string StudentID { get; set; }
    public string StudentFirstName { get; set; }
}

Step 2: Now modify the HttpPost Index() method with the following code:

[HttpPost]
public ActionResult Index(Student s)
{
    ViewBag.Message = "Your Student retrieved successfully with an ID" + " " + s.StudentID + "!!";
    return View();
}

Step 3: Now run the application and open the controller.

Binding with Class Properties

Step 1: Add a class named "Contact" in the Models folder and replace the code with the following code:

public class Contact
{
    public Int64 Mobile { get; set; }
    public string Email { get; set; }
}

Step 2: Modify the Student class with the following highlighted code:

public class Student
{
    public string StudentID { get; set; }
    public string StudentFirstName { get; set; }
    public Contact StudentContact { get; set; }
}

Step 3: Add the following markup in the Index.cshtml file:

<div class="form-group">
    @Html.Label("Mobile:", new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.TextBox("StudentContact.Mobile")
    </div>
</div>
<div class="form-group">
    @Html.Label("Email:", new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.TextBox("StudentContact.Email")
    </div>
</div>

Step 4: When you call the StudentContact in the controller and after running the application and providing the information, the defaultbinder maps the property automatically, see in the locals screenshot below:

Summary

This article described the Model Binding with various types like no binding, simple type, class types. In the next part we'll learn more types binding. Thanks for reading.