Collect Form Data From Both Main and Partial View in MVC

Sourav Kayal

MVC Partial ViewPartial View in MVCMain and Partial View in MVC

7 Comments

Join the conversation! Your thoughts help the community grow.

Er Kumar6y ago
How can i do with asp.net core mvc..any link
kriishna kanth7y ago
What if partial view has a view model "PersonAddress" and it is a property of Person. This is what we have in a real time scenario, where you would re-use use a partial view, not for sake of a single field.
Ghanshyam Baravaliya11y ago
if on view singal partial view repeated mutiple time than how to get all partial view data on typeview button click as list
Lavanya Jujjavarapu11y ago
Thank you very much for providing this solution.
Bobbin Paulose11y ago
If age is in another model then and refer that model object in "person" then i'm getting null value in that object
luis somoza12y ago
Very ice, quick question,, how about if you had a second class in your model, let's say "membership" can you have a partial membership view inside main "person" view?
- Bobbin Paulose11y ago
  i got the answer for this. but i dont know that's a standard way. Create an instance in main Model. Here create the instance of "membership" in person and in the controller, give an additional parameter with the type membership.

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.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MVC_5.Models
{
public class person
{
public string name { get; set; }
public string surname { get; set; }
public int age { get; set; }
}
}

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.

public class personController : Controller
{
public ActionResult Index()
{
return View();
}
public void GetPerson(person p)
{
}
}

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.

Add one partial view here.

Please note that we have checked the “Create 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.

@model MVC_5.Models.person
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
@{
using (Html.BeginForm("GetPerson", "person"))
{
<input type="text" name="name" /> <br />
<input type="text" name="surname" /> <br />
Html.RenderPartial("personPartial"); <br />
<input type="submit" value="Submit Form" />
}
}
</div>
</body>
</html>

Here is our small partial view:

@model MVC_5.Models.person

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.

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

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.