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

Introduction

Since I described the Model Binding in ASP.NET MVC in the previous article, we'll move further here. We learned about the model binding process with various types of models in the previous article and here we'll learn some more types such as the following:

• Binding with a List of Simple Types
• Binding with a List of Class Types

Binding with a List of Simple Types

In this process we'll receive multiple records at a time. Use the following procedure to create the sample.

Step 1: Edit the Index.cshtml page with the following code:

<div class="form-horizontal">
  <h4>Enter Details</h4>
  <hr />
  <div class="form-group">
       @Html.Label("StudentID:", new { @class = "col-md-2 control-label" })
       <div class="col-md-10">
           @Html.TextBox("StudentID")                           
       </div>
  </div>
  <div class="form-group">
      @Html.Label("StudentName:", new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBox("StudentName")
        </div>
  </div>
   <div class="form-group">
       @Html.Label("StudentID:", new { @class = "col-md-2 control-label" })
       <div class="col-md-10">
           @Html.TextBox("StudentID")
        </div>
   </div>
   <div class="form-group">
       @Html.Label("StudentName:", new { @class = "col-md-2 control-label" })
       <div class="col-md-10">
           @Html.TextBox("StudentName")
       </div>
   </div>
   <div class="form-group">
       @Html.Label("StudentID:", new { @class = "col-md-2 control-label" })
       <div class="col-md-10">
           @Html.TextBox("StudentID")
        </div>
   </div>
   <div class="form-group">
       @Html.Label("StudentName:", new { @class = "col-md-2 control-label" })
       <div class="col-md-10">
           @Html.TextBox("StudentName")
       </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>

In the code above you can see that the StudentID and StudentName are used to accept the ID and Names value. Based on these names the default model binder considers all the values with same name as a part of a single collection.

Step 2: Now modify the Index() in the controller with the following code:

[HttpPost]
public ActionResult Index(IList<string> StudentID, IList<string> StudentName)
{
     ViewBag.Message = "Your Student data retrieved successfully for" + " " +  StudentID.Count + "Records!!";
     return View();
}

Step 3: Now run the application and open the controller as in the following:

Step 4: You can see in the Locals that both the parameters of IList types will hold the three values as in the following:

Binding with a List of Class Types

We used a list of strings to hold the values in the previous section. We can also receive the values as a list of any class objects. Use the following procedure to use it.

Step 1: Create a class named Customer in the Models folder and replace the code with the following code:

public class Customer
{
    public int CustomerID { get; set; }
    public string CustomerName { get; set; }
    public string CustomerContact { get; set; }
}

Step 2: Design the Index() in the controller with the following code:

public ActionResult Index(IList<Customer> Customers)
{
    ViewBag.Message = "Your Student data retrieved successfully for" + " " + Customers.Count + "Records!!";
    return View();
}

Step 3: Now design the view with the following code:

<div class="form-horizontal">
    <h4>Enter Details</h4>
    <hr />
    <div class="form-group">
        @Html.Label("CustomerID:", new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBox("[0].CustomerID")
            @Html.TextBox("[1].CustomerID")
            @Html.TextBox("[2].CustomerID")
        </div>
    </div>
    <div class="form-group">
        @Html.Label("CustomerName:", new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBox("[0].CustomerName")
            @Html.TextBox("[1].CustomerName")
            @Html.TextBox("[2].CustomerName")
        </div>
    </div>
    <div class="form-group">
        @Html.Label("CustomerConact:", new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBox("[0].CustomerContact")
            @Html.TextBox("[1].CustomerContact")
            @Html.TextBox("[2].CustomerContact")
        </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>

In the code above, we've created a strongly typed view with the Customer class as its model. Using the naming convention the default binder can pick the values that belong to the specific index and assign to the corresponding properties.

Step 4: Now run the application and open the controller as in the following:

Step 5: You can see the multiple Customer objects received as a list as in the following:

Summary

This article described the DefaultModelBinder class that can take care of primitive types, class types and collections. We can also create a custom model binder. Thanks for reading.