Bind Data to Multiple Models From View in MVC

This article explains how to bind multiple models from a view. Sometimes the scenario may exist like this; we need to populate more than one model with user's input. Let's implement this in a small example.

At first, we will look at our model classes. Here is a small sample. The classes are fragmented within various namespaces.  Anyway we would like to bind all the classes from a single view. I have kept the abcd class within various namespaces purposefully. Just to show that it's not necessary to be all model class within the same namespace and how strong MVC is in mapping. Haha..

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace abc  
  6. {  
  7.     public class abcd  
  8.     {  
  9.         public string testabc { getset; }   
  10.     }  
  11. }  
  12. namespace MVC_Test.Models  
  13. {  
  14.     public class address  
  15.     {  
  16.         public string location { getset; }  
  17.     }  
  18.     public class work  
  19.     {  
  20.         public string companyName { getset; }  
  21.     }  
  22.     public class person  
  23.     {  
  24.         public string name { getset; }  
  25.         public string surname { getset; }  
  26.     }  
  27. } 

Here is our view that will get user's data as input. We have used an aspx view and HTML helper class to create HTML elements. If we look closely at the HTML form then we will find that we have kept the text box name the same as the property name of the class. Please keep the same name otherwise it will not bind the value, yet you will not see an error.

  1. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MVC_Test.Models.person>" %>  
  2. <!DOCTYPE html>  
  3. <html>  
  4. <head runat="server">  
  5.     <meta name="viewport" content="width=device-width" />  
  6.     <title>Index</title>  
  7. </head>  
  8. <body>  
  9.     <div>   
  10.         <% using (Html.BeginForm("savedata""person")) { %>   
  11.         <%= Html.TextBox("name") %>  
  12.         <%= Html.TextBox("surname") %>  
  13.         <%= Html.TextBox("location") %>  
  14.         <%= Html.TextBox("companyName") %>  
  15.         <%= Html.TextBox("testabc") %>          
  16.         <input type="submit" value="Submit Value" />  
  17.         <% } %>  
  18.     </div>  
  19. </body>  
  20. </html> 

Fine, we are nearly done with our settings. We will now create a controller to receive the form submission event. In the person controller we have defined two actions, the first action (Index) will return the view and when we click on the submit button, it will hit on the savedata action.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using abc;  
  7. using MVC_Test.Models;  
  8. namespace MVC_Test.Controllers  
  9. {  
  10.     public class personController : Controller  
  11.     {  
  12.         public ActionResult Index()  
  13.         {  
  14.             return View("Index");  
  15.         }  
  16.         public void savedata(person p, work w,address a,abcd x)  
  17.         {  
  18.         }  
  19.     }  
  20. } 

Once we run the application and set a breakpoint on savedata, we will find that all model parameters are populated with a value.

run the application

We have expanded the value of the p model but we will get all populated objects here.

Conclusion

In this example, we learned how to bind data to multiple models from a single view. I hope this concept will help you in your day to day project development life.


Similar Articles