將部分視圖加載到JQuery對話框中時出現緩存問題

Question

想象一個簡單的帶有“編輯”鏈接的用戶列表。 單擊“編輯”將打開一個對話框，其中包含所選用戶的詳細信息。 “詳細信息”彈出窗口是局部視圖。

我在JQuery對話框窗口中打開局部視圖時遇到了問題。

我的局部視圖（注意OutputCache屬性是我嘗試解決緩存問題的事情之一）：

    [HttpGet]
    [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
    public PartialViewResult EditUser(int id)
    {
     var userList = userRepository.GetByRole(id);

     return PartialView("EditUser",userList);
    }

上面的PartialView是從以下Javascript函數中請求並加載的：

function editUserOpen(id) {

    $.ajaxSetup({  ///// Another thing I tried to solve caching
        cache: false
    });

    var url = "/User/PartialViewResult/" + id;

    $('#user-wrap').empty().load(url, function () {

    $("#dialog-edit-user").dialog({
        title: "Edit User",
        autoOpen: false,
        height: 300,
        width: 500,
        modal: true
    });

        $('#dialog-edit-user').dialog("open");
    });
}

如上所示，“ dialog-edit-user”（以及“ dialog-add-user”和“ dialog-delete-user”）位於DOM中的“ user-wrap” Div內部。

從功能上講，一切正常，但是當我打開對話框時，請取消然后嘗試為其他用戶打開對話框，直到刷新頁面為止，對話框將始終包含最初顯示的對話框中的信息。 我發現這是一個緩存問題，但是我想不出辦法解決它。

如果可能，我想遠離$ .ajax（{cache：false;}）。html（content）。 在我看來，它比.load（）慢很多。

Answer 1

這是我發現的。

每次使用.dialog（）初始化JQuery對話框時，如上圖所示，從DOM中取出成為彈出窗口的div並將其移動到頁面底部。 Dialog Div不能是另一個Div的子代。 在我的示例中是：

<div id="user-wrap">
  <div id="dialog-edit-user">  /// <--- Jquery dialog div

  </div>
</div>

對話框不能包裝在其他div中。

第一次單擊后，顯示對話框時，JQuery只是開始在頁面底部開始累積重復的Div。 $("#").dialog('open')每次使程序員/用戶認為這是一個緩存問題時，都會打開最高重復副本的DIV。

因此，解決方案是從.dialog({close: }事件上，從頁面底部刪除由JQuery創建的div，或者使用JQuery .append() / .appendTo()函數將其移回父包裝DIV。 。

希望這對遇到類似問題的下一個程序員有所幫助。

Answer 2

在網址中添加一些隨機哈希以使其保持唯一：

...
var url = "/User/PartialViewResult/" + id + "?t=" + new Date().getTime();
...

這將始終加載新內容。