将部分视图加载到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(内容).在我看来,它比.load()慢很多.

Answer 1

这是我发现的.

每次使用.dialog()初始化JQuery对话框时,如上所示,成为弹出窗口的div将从DOM中取出并移动到页面底部.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 .

希望这有助于下一个遇到类似问题的程序员.