Problemas de almacenamiento en caché con la carga de vistas parciales en los diálogos de JQuery

Imagina una simple lista de usuarios con enlaces “editar”. Al hacer clic en “Editar” se abre un cuadro de diálogo con los detalles del usuario seleccionado. La ventana emergente “Detalles” es una vista parcial.

Tengo un problema con las Vistas parciales que se almacenan en la memoria caché al abrirlas en las ventanas de diálogo de JQuery.

Mi vista parcial (observe el atributo OutputCache como una de las cosas que intenté resolver el problema de almacenamiento en caché):

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

El PartialView anterior se solicita y carga desde la siguiente función de 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"); }); } 

Como se muestra arriba, “dialog-edit-user” (junto con “dialog-add-user” y “dialog-delete-user”) se encuentran dentro de la Div “user-wrap” en el DOM.

Funcionalmente, todo funciona, pero cuando abro un diálogo, cancelo y luego bash abrir diálogos para otros usuarios, hasta que la página se actualice, los diálogos siempre contendrán información del diálogo que se muestra inicialmente. Me di cuenta de que es un problema de almacenamiento en caché, pero se me acabaron las formas de resolverlo.

Me gustaría mantenerme alejado de $ .ajax ({cache: false;}). Html (contenido) si es posible. Me parece que es mucho más lento que .load ().

Aquí es lo que descubrí.

Cada vez que el cuadro de diálogo JQuery se inicializa con .dialog () como se muestra arriba, el div que se convierte en una ventana emergente se saca del DOM y se mueve al final de la página. Dialog Div no puede ser un hijo de otra Div. En mi ejemplo fue:

 
/// <--- Jquery dialog div

El diálogo no puede ser envuelto en otros divs.

Después del primer clic, cuando se muestra el cuadro de diálogo, JQuery simplemente comienza a acumular Divs duplicados en la parte inferior de la página. $("#").dialog('open') abre el DIV superior del duplicado acumulado cada vez que el progtwigdor / usuario piensa que es un problema de almacenamiento en caché.

Por lo tanto, la solución es eliminar el div creado por JQuery desde la parte inferior de la página en el .dialog({close: } o moverlo de nuevo a la envoltura principal DIV con .append() JQuery .append() / .appendTo() .

Espero que esto ayude a un próximo progtwigdor que se encuentre con un problema similar.

Agrega un hash aleatorio a la URL para que sea único:

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

Esto siempre cargará nuevo contenido.