Modal的部分視圖內容不會刷新

Question

我有一個bootstrap模式，當打開時，命中服務器以使用將顯示在屏幕上的數據更新模型。 它在第一次打開模態時效果很好，但在此之后，它始終顯示與第一次打開時相同的數據。

在視圖中：

<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以呈現每行七次。

但是，屏幕上出現與上次相同的三行。

我究竟做錯了什么？

Answer 1

使用.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（）之間的區別是什么？