Post
Ask Question

Collect Form Data From Both Main and Partial View in MVC

The name might be a little odd to you, but the concept is something like this. We have one view, it's our main view (though there is nothing like this theoretically) and in a portion of the main view one partial view is there. In this partial view a few controls are available and in the main view a few other controls.

The definition of form is that in the main view and in the form's submit event we would like to submit all data, even from a partial view.

Haha; you may think, how did I get this scenario? One day one of my colleagues asked me the question. So, in this article I will provide the same answer that I gave him. If you have a better implementation then please let me know.

So, take one empty MVC application and proceed with the following code.

Implement model class

Here is my simple model class, that has only three properties, we are interested in getting the name and surname property value from the main view and the age value from the partial view.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace MVC_5.Models  
  6. {  
  7.     public class person  
  8.     {  
  9.         public string name { get; set; }  
  10.         public string surname { get; set; }  
  11.         public int age { get; set; }  
  12.     }  
  13. }  

Add one controller

We will now add one controller call “person” and the implementation is as the following. The Index action will return one main view that we will implement shortly. And the main view will contain one partial view.

  1. public class personController : Controller  
  2. {  
  3.     public ActionResult Index()  
  4.     {  
  5.         return View();  
  6.     }  
  7.     public void GetPerson(person p)  
  8.     {  
  9.     }  
  10. }   

After clicking on the submit button in the main view, the data will be bound to the person class and it will pass to the GetPerson() action.

Fine, now we will add two views, both main and partial. Here we are adding the main view and it's a strongly typed view that we can see in the screen. Please don't forget to uncheck the "Create as a partial view" CheckBox.

partial view

Add one partial view here.

Please note that we have checked the “Create partial view” checkbox.
 
partial view checkbox

Here is code for main view

Here is our main view, we are seeing that it's a strongly typed view and the TextBox name matches the property name of the person class.
  1. @model MVC_5.Models.person  
  2. @{  
  3.     Layout = null;  
  4. }  
  5. <!DOCTYPE html>  
  6. <html>  
  7. <head>  
  8.     <meta name="viewport" content="width=device-width" />  
  9.     <title>Index</title>  
  10. </head>  
  11. <body>  
  12.     <div>  
  13.         @{  
  14.             using (Html.BeginForm("GetPerson", "person"))  
  15.             {  
  16.                 <input type="text" name="name" /> <br />  
  17.                 <input type="text" name="surname" /> <br />  
  18.                 Html.RenderPartial("personPartial"); <br />  
  19.                 <input type="submit" value="Submit Form" />  
  20.             }  
  21.          }  
  22.     </div>  
  23. </body>  
  24. </html>  

Here is our small partial view:

@model MVC_5.Models.person

<input type="text" name="age" />

There is nothing much here. As we said we will collect the age property from the partial view. Please look into the main view and we will see that the partial view is rendering within the form of the main view. So, when the entire HTML is generated then we will get the following output.

view
And once we submit the form, we will see that all the data has been bound to the model class.
 
form

Conclusion

Though the solution is a little tricky, I found this as the solution of my friend's problem. If anything is better then this then please show me. Thanks, happy reading.


Similar Articles