部分视图替换父视图

Question

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

父视图有一个 HTML 下拉菜单，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 助手中删除 onchange 事件，并将 AJAX 回调绑定到 change 事件：

查看

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

jQuery（里面$(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 回调参数同名的字符串参数，还要确保操作方法 returns 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>

部分视图替换父视图

Partial View replaces Parent view

asp.net-mvc

partial-views