Post
Ask Question

Model Binding With View Data in MVC Architecture

This article requires a basic understanding of MVC architecture. If you are very new to MVC then I suggest you continue with this article after getting the basic idea of MVC design pattern.

In this article, we will learn how to bind a Model with a view in the MVC architecture. We know that a Model is nothing but our business class and a view presents the model data to the user. Cool, let’s think that we have defined one model to register the user’s information.

And depending on that we have designed the view to get all the information. Then how will we pass the entire view data to the controller?

This is were the Model binding is relevant. If we bind the model with the view then the MVC engine will automatically collect all the model properties from the view field. Let’s implement the concept with a small example.

At first we will create a Model as in the following.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.ComponentModel.DataAnnotations;  
  4. using System.Linq;  
  5. using System.Web;  
  6. namespace MVC.Models  
  7. {  
  8.     public class person  
  9.     {  
  10.         public string _name{get;set;}  
  11.         public string _surname { get; set; }  
  12.         public int _age { get; set; }  
  13.     }  
  14. } 

The model is extremely simple, it contains only three fields. And please keep in mind that from the view we will collect data only for those three fields.

Here is my view

Please see that I have created a strongly typed view though it is not necessary. In the body:

  1. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MVC.Models.person>" %>  
  2. <!DOCTYPE html>  
  3. <html>  
  4. <head runat="server">  
  5.     <meta name="viewport" content="width=device-width" />  
  6.     <title>person</title>  
  7. </head>  
  8. <body>  
  9.     <div>  
  10.         <% using (Html.BeginForm("SavePerson","person")){ %>  
  11.             Name : <%= Html.TextBox("_name") %> <br />  
  12.             Surname: <%= Html.TextBox("_surname") %> <br />  
  13.             Age: <%= Html.TextBox("_age") %><br />  
  14.             <input value="Register" type="submit" />  
  15.         <% } %>  
  16.     </div>  
  17. </body>  
  18. </html> 

Part we have defined the form element. And in the BeginForm() helper method we have specified two parameters, the first one indicating the action name and the second one is the controller name.

Once we click on the submit button, it will hit the targeted controller.

We will now define the controller to collect form data. Have a look at the following code.

  1. using System;    
  2. using System.Collections.Generic;    
  3. using System.Linq;    
  4. using System.Web;    
  5. using System.Web.Mvc;    
  6. using MVC.Models;    
  7. namespace MVC.Controllers    
  8. {    
  9.     public class personController : Controller    
  10.     {    
  11.         public ActionResult AddNew()    
  12.         {    
  13.             return View("person");    
  14.         }    
  15.         public ActionResult SavePerson([Bind] person p)    
  16.         {    
  17.             return Content("Data Send");    
  18.         }    
  19.     }    
  20. } 

The person controller contains two actions. The AddNew() action will return a “person” view that is nothing but our previous HTML form.

And the savePerson is the targeted controller on the form’s submitting operation. Now if we run the application and a browse/person/AddNew URL then we will find the following view.

run the application

I have provided data to my view and once I submit it, it will hit the SavePerson() action. And we are getting all form data as a parameter of the SavePerson() action.
 
SavePerson action

Conclusion

In this article, we saw how to send data from a view to a controller using a Model binding technique. I hope you have understood it and it will help you in your day-to-day programmer life.


Similar Articles