Question

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

父视图具有HTML下拉列表，更改事件应将相应的数据绑定到部分视图。但是在选择更改时，完整的父视图将替换为部分视图（子视图）。

父视图（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）从onchange帮助器中删除DropDownList事件，并分配绑定到change事件的AJAX回调：

查看

@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回调参数同名的字符串参数，并确保操作方法返回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>

部分视图取代了父视图

1 个答案: