Modal的部分视图内容不刷新答案

【问题标题】：Modal's partial view content does not refreshModal的部分视图内容不刷新
【发布时间】：2016-11-08 05:49:49
【问题描述】：

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

在视图中：

<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 上循环以呈现每一行七次。

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

我做错了什么？

【问题讨论】：

您是说第二次点击应该只生成 4 行（但除了这 4 行之外，您还显示了前 3 行）？
抱歉不清楚。它始终只显示原始行。一旦创建，模态的内容就永远不会改变，尽管它背后的数据每次都是正确的。
您的部分是否还包括和封闭<div id="ChangeOrderTable"> your foreach loop here </div> 元素。如果不是你想要$('#ChangeOrderTable').html(data);（不是.replaceWith(data);）
嗯！不，但是有这个：

在第一个事件中，您删除了<div id="ChangeOrderTable">（因为您使用了.replaceWith()，所以在第二个事件中，它不再存在并且没有什么可以“替换”

标签： c# asp.net-mvc twitter-bootstrap bootstrap-modal

【解决方案1】：

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

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

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

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

【讨论】：