局部视图替换父视图

Question

我正在开发用 ASP.Net MVC 开发的 web 应用程序，它有一个应该在其父视图中呈现的部分视图。

• 父视图有一个 HTML Dropdown，on-change 事件应该将各自的数据绑定到局部视图。但在选择更改时，完整的父视图将替换为部分视图（子视图）。

父视图（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>

部分视图 (_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>    
    }    
}

我认为可能的错误是在更改下拉选择时返回部分视图。

[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);    
}

Answer 1

您需要使用jQuery.ajax() 函数在不替换父视图的情况下加载HTML 元素内的部分视图，而不是标准的表单提交。以下是这些步骤：

1) 从DropDownList helper 中移除onchange 事件，并分配绑定到change 事件的AJAX 回调：

查看

@Html.DropDownList("DepartmentName", ViewBag.DepartmentList as SelectList, "-- Select --", new { @class = "form-control" })

jQuery (inside$(document).ready())

$('#DepartmentName').change(function () {
   var selectedValue = $(this).val();

   if (selectedValue && selectedValue != '')
   {
       $.ajax({
           type: 'POST',
           url: '@Url.Action("EmployeeDeptHistory", "ControllerName")',
           data: { departmentName: selectedValue };
           success: function (result) {
               $('#targetElement').html(result); // assign rendered output to target element's ID
           }
       });
   }
});

2) 移除FormCollection 并使用与AJAX 回调参数同名的字符串参数，同时确保action 方法返回PartialView：

控制器

[HttpPost] 
public ActionResult EmployeeDeptHistory(string departmentName)    
{
    IEnumerable<EmployeeDepartmentHistory> empHistList;    
    using (IDbConnection con = new SqlConnection(connectionString))    
    {    
        empHistList = con.Query<EmployeeDepartmentHistory>("sp_StoredProc", new { DeptId = departmentName }, commandType: CommandType.StoredProcedure);    
    }

    return PartialView("_EmployeeDeptHistory", empHistList);    
}

3) 最后，不要忘记为 AJAX 回调的 success 部分指定的目标元素添加 ID 以加载部分视图：

查看

<div id="targetElement">
    @Html.Partial("_EmployeeDeptHistory")
</div>