how to persist partial view model data during postback in asp.net mvc

Question

I am having partial view Department containing department information. I have Page view of Employee. in Employee view i am using partial view of department to show employees department. My employee model is as below

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

}

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

I have submit button on employee page view. When i submit the employee view I am getting Department object as null. Could you please suggest me how i can get child Department model during 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);
        }

Views

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 searching first. This question has been asked many times before.

Here is one way to do it:

mvc partial view post

Summary: wrap each partial in multiple form tags each with their own submit button.

But this one seems more like what you're after:

Post a form with multiple partial views

Use editortemplates for this instead of partials.

The issue you're having is that when your DepartmentName textbox isn't being named correctly for your controller to read it. Your POST would be EmployeeName=Prashant&DepartmentName=Phy therefore Department is null, hence the error.

Answer 2

Try this,

Also you changed the Department Model entity name. And Department view location 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);
        }