Partial View replaces Parent view

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)

Please Select Group
@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();" })
}
}
@{Html.RenderPartial("_EmployeeDeptHistory");}

Hi Avid,

you can easily acchieve it using Jquery Ajax Call,

Please try this,

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

Parent View

<h3>Please Select Grouph3>
@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", @id="ddlDepartments" })
}
}
<div id="employeeDeptHistoryDiv">
@{Html.RenderPartial("_EmployeeDeptHistory");}
div>
<script>
$(document).ready(function()
{
$( "#ddlDepartments" ).change(function() {
$.ajax({
url: 'Controller/youractionresultname',
type: Type,
data: {DepartmentName:$(this).val()},
success: function (data) {
$('#employeeDeptHistoryDiv').html('');
$('#employeeDeptHistoryDiv').html(data);
},
error: function () {
alert("An error has occured!!!");
}
});
});
script>

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Ramesh Palanivel8y ago
Accepted answer
Hi Avid,

you can easily acchieve it using Jquery Ajax Call,

Please try this,
[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult EmployeeDeptHistory(FormCollection form)
        {
            IEnumerable empHistList;
            using (IDbConnection con = new SqlConnection(connectionString))
            {
                empHistList = con.Query("sp_StoredProc", new { DeptId = form["DepartmentName"] }, commandType: CommandType.StoredProcedure);
            }
            return PartialView("_EmployeeDeptHistory", empHistList);
        }
Parent View
<h3>Please Select Grouph3>
@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", @id="ddlDepartments" })
    }
}
<div id="employeeDeptHistoryDiv">
    @{Html.RenderPartial("_EmployeeDeptHistory");}
div>

<script>
$(document).ready(function()
{
$( "#ddlDepartments" ).change(function() {
  $.ajax({
            url: 'Controller/youractionresultname',
            type: Type,
            data: {DepartmentName:$(this).val()},
           success: function (data) {
           $('#employeeDeptHistoryDiv').html('');
           $('#employeeDeptHistoryDiv').html(data);
        },
        error: function () {
            alert("An error has occured!!!");
        }
});
});
script>
L A8y ago
Hi Ramesh, in Parent View (Index.cshtml) i'm using @Html.DropDownList but how to set default value to default text '-- Select --' because when i go back selecting default text after selecting valid listitem, its making an ajax call, which isn't correct.
L A8y ago
Thanks Ramesh for your response. As suggested i would use jQuery Ajax to bind the partial view but i would like to know where i'm going wrong in my case?

Partial View replaces Parent view

Please Select Group

Employees Department History : @Model.Count()