缓存的问题与装载部分意见纳入JQuery的对话 [英] Caching issue with loading partial views into JQuery dialogs

问题描述

想象一下用户提供编辑链接一个简单的列表。单击编辑打开与所选用户详细信息的对话框。 详细信息弹出窗口的局部视图。

Imagine a simple list of users with "edit" links. Clicking "Edit" opens up a dialog box with details for the selected user. The "Details" popup is a partial view.

我在JQuery的对话窗口打开时，他们被缓存与局部视图的问题。

I have an issue with Partial Views being cached when opening them in JQuery dialog windows.

我的局部视图（注意的OutputCache属性作为的事情之一我试图解决缓存问题）：

My partial view( Notice the OutputCache attribute as one of the things I tried to solve the caching issue):

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

     return PartialView("EditUser",userList);
    }

该PartialView上述请求，并从以下JavaScript函数加载：

The PartialView above is requested and loaded from the following Javascript function:

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");
    });
}

如上图对话框编辑用户（连同对话框的添加用户和对话框的删除用户）位于用户包事业部在DOM内部。

As shown above "dialog-edit-user" ( along with "dialog-add-user" and "dialog-delete-user" ) are located inside of the "user-wrap" Div in the DOM.

功能一切正常，但是当我打开一个对话框，取消，然后尝试为其他用户打开的对话​​框中，直到页面被刷新对话框总是包含的信息从最初显示的对话框。
我想通了一个缓存的问题，但我跑出的方式来解决这个问题。

Functionally everything works but when I open a dialog, cancel and then try opening dialogs for other users, until the page is refreshed the dialogs will always contain info from the initially displayed dialog. I figured its a caching issue but I ran out of ways to solve it.

我想远离$就离开（{缓存：假;}）HTML（内容），如果可能的话。在我看来，它比.load慢了许多（）。

I would like to stay away from $.ajax({ cache:false; }).html(content) if possible. It seems to me that it's a lot slower than .load().

推荐答案

下面是我发现的。

每次JQuery的对话与.dialog（）初始化为表明成为弹出正在取出的DOM和动议的页面底部的格以上。对话框股利不能是另一个事业部的一个孩子。在我的例子是：

Everytime JQuery dialog is initialized with .dialog() as shown above the div that becomes a pop up is being taken out of the DOM and moved the the bottom of the page. Dialog Div cannot be a child of another Div. In my example it was:

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

  </div>
</div>

对话框无法被包裹在其他的div。

Dialog cannot be wrapped in other divs.

第一次点击时显示的对话框JQuery的简单累加开始在页面底部重复的div后。 $（＃）。对话框（开放）打开积累的重复，每次做程序员/用户认为这是一个缓存问题的最顶端DIV。

After the first click, when the dialog is displayed JQuery simply starts accumulating duplicate Divs at the bottom of the page. $("#").dialog('open') opens the very top DIV of accumulated duplicated every time making the programmer/user think it's a caching issue.

因此​​，解决方法是取消对 .dialog的jQuery在页面的底部创建的分区（{收盘：} 事件或回拉升至父包装DIV使用jQuery .append（） / .appendTo（）功能。

So the solution is to either remove the div created by JQuery from the bottom of the page on .dialog({close: } event or to move it back up to the parent wrapper DIV with JQuery .append() / .appendTo() functions.

希望这有助于谁运行到类似的问题，下一个程序员。

Hope this helps to a next programmer who runs into similar issue.

这篇关于缓存的问题与装载部分意见纳入JQuery的对话的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！