Modelo de vista parcial de MVC sin actualizar

Question

Tengo una vista parcial que se está cargando en un modal de jQuery en asp.net MVC 3. El problema es que la vista no se actualiza correctamente. Aquí está el orden de los eventos:

1) La vista principal tiene una tabla que enumera los diferentes registros de eventos. Hay un enlace en cada fila de la tabla para mostrar los detalles del evento. 2) Cuando se hace clic en el enlace de esta tabla, la vista parcial se carga en el modal.

Esto funciona bien en algunos casos, en otros casos el modelo tardará mucho en cargarse. Después de cerrar la vista parcial/modal y hacer clic en otro enlace de la tabla en la vista principal, la vista parcial se cargará mostrando los datos de la carga anterior. No es refrescante correctamente

Definición de modal en Vista principal: Cargando, por favor espere ...

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#EventRegistrantSummary").dialog({ 
      bgiframe: true, autoOpen: false, height: 500, width: 980, resizable: false, modal: true 
     }); 
    }); 
    function showEventRegistrantSummary(id) { 
     $.get("/Event/EventRegistrantSummary/" + id, function (data) { 
      $("#EventRegistrantSummary").html(data); 
     }); 
     $("#EventRegistrantSummary").dialog('open'); return false; 
    } 
</script> 

controlador:

public PartialViewResult EventRegistrantSummary(Guid id) 
    { 
     ModelState.Clear(); 
     Event e = db.Events.Single(ev => ev.ID == id); 
     return PartialView(e); 
    } 

Vista parcial:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<model.Event>" %> 
<% using (Ajax.BeginForm("EditUpdate", new AjaxOptions { UpdateTargetId="Target", InsertionMode= InsertionMode.Replace})) 
     {%> 

     <h6 style="text-align:center">Registration Summary: <%= Model.Name %></h6> 

     <div style="float:left;width:35%"> 
      <fieldset id="Overview"> 
       <legend>Overview</legend> 
       <div class="editor-label"> 
        Total Registrants: <%= Model.BoatEventRegistrations.Count() %> 
       </div> 
      </fieldset> 
      </div> 
    <% } %> 

Cualquier ayuda es muy apreciada.

Answer 1

Suena como un problema de almacenamiento en caché. Las solicitudes GET pueden ser almacenadas en caché por algunos navegadores. Trate de reemplazar la llamada AJAX $.get por un $.ajax estableciendo cache: false o tratar una solicitud $.post:

$.ajax({ 
    url: '<%= Url.Action("EventRegistrantSummary", "Event") %>', 
    type: 'GET', 
    cache: false, 
    data: { id: id }, 
    success: function(data) { 
     $('#EventRegistrantSummary').html(data); 
    } 
}); 

también que no es necesario despejar el ModelState en su acción EventRegistrantSummary ya que no está modificando cualquiera de los valores.

Answer 2

Use el OutputCacheAttribute en la acción de su controlador para desactivar el almacenamiento en caché.

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")] 
public PartialViewResult EventRegistrantSummary(Guid id) 
{ 
    ModelState.Clear(); 
    Event e = db.Events.Single(ev => ev.ID == id); 
    return PartialView(e); 
} 

Answer 3

Otro enfoque es attatch un número aleatorio a la cadena de consulta que se utiliza el de construir ayudantes MVC.

Por ejemplo:

@Ajax.ActionLink("LinkText", "Index", "Home", new { rnd = DateTime.Now.Ticks }, new AjaxOptions { UpdateTargetId = "main", OnSuccess = "pageloadSuccess" }) 

O para un formulario:

using (Ajax.BeginForm("EditUpdate", new { rnd = DateTime.Now.Ticks }, new AjaxOptions { UpdateTargetId="Target", InsertionMode= InsertionMode.Replace})) 

No

siempre la mejor manera de hacer las cosas, pero si se quiere evitar el etiquetado de cada uno de sus métodos (Si usted tiene un montón que necesita evitar los problemas de caché) o el uso de jQuery para manejar el envío usted mismo es un trabajo rápido.