Modal'的部分视图内容不刷新

本文关键字：视图 刷新 Modal | 更新日期: 2023-09-27 18:16:47

我有一个引导模式，当打开时，它会点击服务器以使用将显示在屏幕上的数据更新模型。它在第一次打开模态时工作得很好，但之后，它总是显示与第一次打开时相同的数据。

在视图中:

<div id="ChangeOrderModal" class="modal hide fade" style="width:1000px">
<div class="modal-body">
    <div id="ChangeOrderTable"></div>
</div>
<div class="modal-footer">
    <a href="#" data-dismiss="modal" class="btn">Close</a>
</div>

在视图中使用脚本来访问服务器并更新数据:

var url = '@Url.Action("SetChangeOrderDate")';
$.post(url, { coDate: date, projId: @Model.Project.id_project }, function (data) {
    $('#ChangeOrderTable').replaceWith(data);
});
$('#ChangeOrderModal').modal('show');

每次都能很好地击中动作:

[HttpPost]
public ActionResult SetChangeOrderDate(string coDate, int projId)
{
    ....
    return PartialView("_ChangeOrderTable", projectVM);
}
然后，在局部视图中: 
@foreach (var record in Model.ChangeOrder.Change_Order_Dash_List
{
     ... create table based on the list...
}

如果我在分部视图中的@foreach上设置了一个断点，并获得了项目的计数，它总是正确的。示例:第一次打开模态时，它的计数为3。然后，将三行呈现到屏幕上。我关闭模态，通过点击另一个图标打开它，这次计数是7。我甚至可以看到它在HTML上循环渲染每一行七次。

但是，与上次相同的三行出现在屏幕上。

我做错了什么?

Modal'的部分视图内容不刷新

您使用.replaceWith()意味着在第一个事件中，您用您的部分生成的html替换<div id="ChangeOrderTable"></div>元素，并且<div>元素不再存在。

在第二个事件中，您返回正确的html，但$('#ChangeOrderTable').replaceWith(data);不再执行，因为没有具有id="ChangeOrderTable"的元素(因此您只看到第一个事件中呈现的元素)。

将更新DOM的代码改为使用.html()来替换元素的内容，而不是元素本身。

$.post(url, { coDate: date, projId: @Model.Project.id_project }, function (data) {
    $('#ChangeOrderTable').html(data);
});

要了解更多信息，请参阅jQuery的replaceWith()和html()之间的区别是什么?

相关文章：