将部分视图加载到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();
...

这将始终加载新内容。