How to save partial view model data during postback in asp.net mvc

Question

I have a partial view department containing department information. I have an Employee page view. in Employee view I use a partial department view to show the department of employees. My employee model below

class Employee { public string EmployeeName{get;set}; public Department EmployeeName{get;set}; } class Department { public string DepartmentName{get;set}; } 

I have a submit button to view the employee page. When I submit an employee view, I get the Department object as null. Could you suggest me how I can get a model of the children's department during the postback. Coltroller Code

 [HttpGet] public ActionResult Employee2() { Employee e = new Employee(); e.EmployeeName = "Prashant"; e.Department = new Department() { DepartmentName = "Phy" }; return View(e); } [HttpPost] public ActionResult Employee2(Employee e) { return View(e); } 

representation

Department

 @model MvcApplication2.Models.Department <script src="~/Scripts/jquery-1.7.1.min.js"></script> <script src="~/Scripts/jquery.validate.min.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> <fieldset> <legend>Department</legend> <div class="editor-label"> @Html.LabelFor(model => model.DepartmentName) </div> <div class="editor-field"> @Html.EditorFor(model => model.DepartmentName) @Html.ValidationMessageFor(model => model.DepartmentName) </div> </fieldset> <div> @Html.ActionLink("Back to List", "Index") </div> 

Employee

 @model MvcApplication2.Models.Employee @{ ViewBag.Title = "Employee"; } <h2> Employee</h2> @using (Html.BeginForm("Index","Home")) { <fieldset> <legend>Employee</legend> <div class="editor-label"> @Html.LabelFor(model => model.EmployeeName) </div> <div class="editor-field"> @Html.EditorFor(model => model.EmployeeName) @Html.ValidationMessageFor(model => model.EmployeeName) </div> @Html.Partial("Department", Model.Department) <p> <input type="submit" value="EmployeeSave" /> </p> </fieldset> } @section Scripts { @Scripts.Render("~/bundles/jqueryval") } 

Answer 1

Try a search first. This question has been asked many times.

Here is one way to do this:

mvc partial view comment

Summary: wrap each snippet in multiple form tags, each with its own submit button.

But this is similar to what you need:

Publish a form with multiple partial views

Use editortemplates for this instead of partial ones.

The problem you are facing is that when the text box of your department is incorrectly specified for your controller to read it. Your POST will be EmployeeName=Prashant&DepartmentName=Phy , so the Department is null , hence the error.

Answer 2

Try it,

You also changed the name of the unit model object. And the location of the department view in Shared / EditorTemplates.

VIEW:

 @using (Html.BeginForm("Employee", "Content")) { @Html.EditorFor(model => model.dptEmployeeName.DepartmentName) <fieldset> <legend>Employee</legend> <div class="editor-label"> @Html.LabelFor(model => model.EmployeeName) </div> <div class="editor-field"> @Html.EditorFor(model => model.EmployeeName) @Html.ValidationMessageFor(model => model.EmployeeName) </div> @Html.EditorFor(model => model.dptEmployeeName.DepartmentName) //This is partial view <p> <input type="submit" value="EmployeeSave" /> </p> </fieldset> } 

CONTROLLER:

 [HttpPost] public ActionResult Employee(Employee e,FormCollection frm) { var asd = frm["dptEmployeeName.DepartmentName"]; return View(e); }