Javascript Ajax POST未刷新视图中的数据

我在刷新使用Ajax发布的数据时遇到问题。POST已成功执行，但视图上的数据未使用新数据刷新。当我调试时，来自Ajax POST的值被成功地传递给我的搜索控制器。当控制器返回视图模型

返回视图（模型），我的视图没有刷新新数据。如何在视图中显示新数据

Ajax/jQuery

$(document).ready(function () {
$("#typeId, #scorecardId, #dateId").on('change', function () {
        $.ajax({
            url: "/StaffChange/Search",
            type: "POST",
            dataType: "json",
            data: {
                typeSelected: $('#typeId').val(),
                scorecardSelected: $('#scorecardId').val(),
                effectiveDateSelected: $('#dateId').val()
            }
        })
});
});

查看

<table class="table table-condensed table-hover table-responsive table-striped">
<tr>
    <th>
        <a href="@Html.GetUrlAndRouteObject(Model.Sort, "change_date")">
            Change Date
            @Html.AddSortArrow(Model.Sort, "change_date")
        </a>
    </th>
    <th>
        @Html.EditorFor(model => model.effectiveDate, new { htmlAttributes = new { @class = "datepicker", @placeholder = "Effective Date", @id = "dateId" } })
    </th>
    <th>
        @Html.DropDownListFor(model => model.type, new SelectList(Model.type), "-Type-", new { @id = "typeId" })
    </th>
    <th>
        @Html.DropDownListFor(model => model.type, new SelectList(Model.scorecard), "-Scorecard-", new { @id = "scorecardId" })
    </th>
</tr>

@foreach (var item in Model.get_staff_changelog_results)
{
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Change_Date)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Effective_Date)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Type)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Scorecard)
            </td>
        </tr>
}

因为您没有以任何方式响应AJAX调用。将
.done（）
回调处理程序添加到：

在这一点上，问题变成了。。。你打算做什么样的更新？看起来您正在从控制器返回一个视图：

return View(model);

因此，在AJAX响应中返回的数据是一堆原始HTML。如果它是整个页面的子集（即，没有附加的
、
等标记），则可以使用响应的内容替换现有容器元素：

$('#someContainer').html(response);

然而，这往往有点草率，并可能导致其他问题。（例如，替换附加了处理程序的DOM元素或初始化了插件的DOM元素，需要重新思考如何处理某些事情。）相反，对于AJAX调用，返回JSON数据是很常见的：

return Json(model);

这将只返回数据，而不是所有围绕它的HTML。这很有用，原因如下：

如果你只想做一些小而具体的事情，那么操纵起来就容易多了
它使用更少的网络带宽
返回页面已有的一堆HTML是非常愚蠢的
使用这些数据，您可以更新页面上的特定元素。例如，可能要更新输入的值：

$('#someInput').val(response.SomeProperty);

或显示元素的文本：

$('#someElement').text(response.AnotherProperty);

如何处理响应以及需要对页面做什么来“更新”取决于您。关键是系统不会自动为您执行此操作。您需要处理AJAX响应并相应地编写逻辑。
因为您没有以任何方式响应AJAX调用。将
.done（）
回调处理程序添加到：

在这一点上，问题变成了。。。你打算做什么样的更新？看起来您正在从控制器返回一个视图：

return View(model);

因此，在AJAX响应中返回的数据是一堆原始HTML。如果它是整个页面的子集（即，没有附加的
、
等标记），则可以使用响应的内容替换现有容器元素：

$('#someContainer').html(response);

然而，这往往有点草率，并可能导致其他问题。（例如，替换附加了处理程序的DOM元素或初始化了插件的DOM元素，需要重新思考如何处理某些事情。）相反，对于AJAX调用，返回JSON数据是很常见的：

return Json(model);

这将只返回数据，而不是所有围绕它的HTML。这很有用，原因如下：

如果你只想做一些小而具体的事情，那么操纵起来就容易多了
它使用更少的网络带宽
返回页面已有的一堆HTML是非常愚蠢的
使用这些数据，您可以更新页面上的特定元素。例如，可能要更新输入的值：

$('#someInput').val(response.SomeProperty);

或显示元素的文本：

$('#someElement').text(response.AnotherProperty);

如何处理响应以及需要对页面做什么来“更新”取决于您。关键是系统不会自动为您执行此操作。您需要处理AJAX响应并相应地编写逻辑。
您需要使用从AJAX调用收到的响应。当前，您的搜索方法正在返回视图结果。您可以做的是，如果从xhr调用调用该方法，您可能会返回一个只包含表行标记的部分视图结果（使用新的数据集），并且在ajax调用的
done
事件中，更新DOM（使用此新标记替换现有表行）

因此，首先创建一个名为
\u List.cshtml
的局部视图，并使用代码在其中呈现表行

@model Hierarchy_AdjustmentViewModel 
@if(Model.get_staff_changelog_results!=null)
{
    foreach (var item in Model.get_staff_changelog_results)
    {
        <tr>
            <td> @item.Change_Date </td>
            <td> @item.Effective_Date </td>
            <td> @item.Type </td>
            <td> @item.Scorecard </td>
        </tr>
    }
}

现在您所要做的就是，使用此响应更新表。因为您返回的是视图结果（HTML标记），所以不需要将数据类型指定为json

$("#typeId, #scorecardId, #dateId").on('change', function () {
    var $tbl = $(this).closest("table");
    $tbl.find("tbody").find("tr:gt(0)").remove();

    $.ajax({
        url: "@Url.Action("Search","StaffChange")",
        type: "POST",
        data: {
            typeSelected: $('#typeId').val(),
            scorecardSelected: $('#scorecardId').val(),
            effectiveDateSelected: $('#dateId').val()
        }
    }).done(function(res) {
        $tbl.find("tbody").append(res);
    }).fail(function(x, a, e) {
        alert(e);
    });
});

另一个选项是以JSON数组的形式返回数据，
done
处理程序必须对其进行解析（循环）并为每一行创建标记，并附加到表中（在清除现有行之后）。
您需要使用从ajax调用收到的响应。当前，您的搜索方法正在返回视图结果。您可以做的是，如果从xhr调用调用该方法，您可能会返回一个只包含表行标记的部分视图结果（使用新的数据集），并且在ajax调用的
done
事件中，更新DOM（使用此新标记替换现有表行）

因此，首先创建一个名为
\u List.cshtml
的局部视图，并使用代码在其中呈现表行

@model Hierarchy_AdjustmentViewModel 
@if(Model.get_staff_changelog_results!=null)
{
    foreach (var item in Model.get_staff_changelog_results)
    {
        <tr>
            <td> @item.Change_Date </td>
            <td> @item.Effective_Date </td>
            <td> @item.Type </td>
            <td> @item.Scorecard </td>
        </tr>
    }
}

现在您所要做的就是，使用此响应更新表。因为您返回的是视图结果（HTML标记），所以不需要将数据类型指定为json

$("#typeId, #scorecardId, #dateId").on('change', function () {
    var $tbl = $(this).closest("table");
    $tbl.find("tbody").find("tr:gt(0)").remove();

    $.ajax({
        url: "@Url.Action("Search","StaffChange")",
        type: "POST",
        data: {
            typeSelected: $('#typeId').val(),
            scorecardSelected: $('#scorecardId').val(),
            effectiveDateSelected: $('#dateId').val()
        }
    }).done(function(res) {
        $tbl.find("tbody").append(res);
    }).fail(function(x, a, e) {
        alert(e);
    });
});

另一个选项是以JSON数组的形式返回数据，
done
处理程序必须对其进行解析（循环）并为每一行创建标记并附加到表中（在清除现有行之后）。
返回带有数据的PartialView不是更容易吗？因为AJAX调用永远不会刷新某些东西，所以您只会得到响应（结果），而不会对其进行任何处理。您知道执行AJAX与正常提交相比的一个要点是，页面不会根据经验转换为AJAX调用，对吗？因此，如果您希望页面根据ajax调用的响应进行更改，那么您必须自己进行这些更改。否则，pe