Partial View replaces Parent view

Question

Hi all,

 

I'm working on web app developed in ASP.Net MVC, having a partial view which should be rendered inside its parent view.

• Parent view has a HTML Dropdown, on-change event should bind respective data to partial view. But on selection change, the complete parent view is replaced with partial view (child view).

Parent View (Index.cshtml)

<h3>Please Select Group</h3>
@using (Html.BeginForm("EmployeeDeptHistory", "Home", FormMethod.Post))
{
    @Html.AntiForgeryToken()
    if (ViewBag.DepartmentList != null)
    {
        @Html.DropDownList("DepartmentName", ViewBag.DepartmentList as SelectList, "-- Select --", new { Class = "form-control", onchange = "this.form.submit();" })
    }
}
<div>
    @{Html.RenderPartial("_EmployeeDeptHistory");}
</div>

Partial View (_EmployeeDeptHistory.cshtml)

@model IEnumerable<PartialViewApplSol.Models.EmployeeDepartmentHistory>
@if (Model != null)
{
    <h3>Employees Department History : @Model.Count()</h3>

    foreach (var item in Model)
    {
        <div style="border:solid 1px #808080; margin-bottom:2%;">
            <div class="row">
                <div class="col-md-2">
                    <strong>Name</strong>
                </div>
                <div class="col-md-5">
                    <span>@item.Name</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2">
                    <strong>Shift</strong>
                </div>
                <div class="col-md-5">
                    <span>@item.Shift</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2">
                    <strong>Department</strong>
                </div>
                <div class="col-md-5">
                    <span>@item.Department</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2">
                    <strong>Group Name</strong>
                </div>
                <div class="col-md-5">
                    <span>@item.GroupName</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2">
                    <strong>Start Date</strong>
                </div>
                <div class="col-md-5">
                    <span>@item.StartDate</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2">
                    <strong>End Date</strong>
                </div>
                <div class="col-md-5">
                    <span>@item.EndDate</span>
                </div>
            </div>
        </div>
    }
}

I think the possible mistake is returning partial-view on drop down selection changed.

[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult EmployeeDeptHistory(FormCollection form)
        {
            IEnumerable<EmployeeDepartmentHistory> empHistList;
            using (IDbConnection con = new SqlConnection(connectionString))
            {
                empHistList = con.Query<EmployeeDepartmentHistory>("sp_StoredProc", new { DeptId = form["DepartmentName"] }, commandType: CommandType.StoredProcedure);
            }
            return View("_EmployeeDeptHistory", empHistList);
        }

Please help me to figure out my mistake.