2011-05-03 26 views
10

¿Hay algo así como UpdatePanel (en ASPX) para Razor?"UpdatePanel" en Razor (mvc 3)

Quiero actualizar los datos (por ejemplo, tabla, gráfico, ...) de forma automática cada 30 segundos. Al igual que en clic en el siguiente enlace cada 30 segundos:

@Ajax.ActionLink("Refresh", "RefreshItems", new AjaxOptions() { 
    UpdateTargetId = "ItemList", 
    HttpMethod = "Post"}) 

Gracias Tobi

Editar:

puedo añadir que el enlace de acción hace que una visión parcial.

Código de cshtml:

<div id="ItemList"> 
    @Html.Partial("_ItemList", Model) 
</div> 

Código de controlador:

[HttpPost] 
    public ActionResult RefreshItems() { 
     try { 
      // Fill List/Model 
      ... 

      // Return Partial 
      return PartialView("_ItemList", model); 
     } 
     catch (Exception ex) { 

      return RedirectToAction("Index"); 
     } 
    } 

Sería crear si podría el PartielView refrescarse.

Respuesta

10

Puede probar algo similar al siguiente usando Jquery (no han probado aunque)

<script type="text/javascript"> 
    $(document).ready(function() { 
     setInterval(function() 
     { 
     // not sure what the controller name is 
      $.post('<%= Url.Action("Refresh", "RefreshItems") %>', function(data) { 
      // Update the ItemList html element 
      $('#ItemList').html(data); 
      }); 
     } 
     , 30000); 
    }); 
</script> 

El código anterior se debe colocar en la página que contiene es decir, no la página parcial vista. Tenga en cuenta que la vista parcial no es una página html completa.

Mi conjetura inicial es que este script puede colocarse en el parcial y modificarse de la siguiente manera. Asegúrese de que el tipo de datos ajax esté configurado en html.

<script type="text/javascript"> 
    setInterval(function() 
    { 
     // not sure what the controller name is 
     $.post('<%= Url.Action("Refresh", "RefreshItems") %>', function(data) { 
     // Update the ItemList html element 
     $('#ItemList').html(data); 
     }); 
    } 
    , 30000); 
</script> 

Otra alternativa es almacenar el código JavaScript en un archivo separado js y utilizar la función de devolución de llamada en Jquery getScript éxito ajax.

+0

¿Está $ (document) .ready() también para vistas parciales? – Tobias

+0

Gracias, funciona genial. – Tobias

4

Si alguien quiere el código completo de un selfupdating vista parcial echar un vistazo !

Código del controlador:

[HttpPost] 
public ActionResult RefreshSelfUpdatingPartial() { 

      // Setting the Models Content 
      // ... 

      return PartialView("_SelfUpdatingPartial", model); 
} 

Código del parcial (_SelfUpdatingPartial.cshtml):

@model YourModelClass 

<script type="text/javascript"> 
setInterval(function() { 
    $.post('@Url.Action("RefreshSelfUpdatingPartial")', function (data) { 
      $('#SelfUpdatingPartialDiv').html(data); 
     } 
    ); 
}, 20000); 
</script> 
// Div 
<div id="SelfUpdatingPartialDiv"> 

// Link to Refresh per Click 
<p> 
@Ajax.ActionLink("Aktualisieren", "RefreshFlatschels", new AjaxOptions() { 
UpdateTargetId = "FlatschelList", 
HttpMethod = "Post", InsertionMode = InsertionMode.Replace 
}) 
</p> 

// Your Code 
// ... 

</div> 

código para integrar el parcial en el "principal" -Ver (ViewWithSelfupdatingPartial.cs):

@Html.Partial("_FlatschelOverview", Model) 
2

La etiqueta <meta refresh ..> en HTML va a trabajar para usted. Es la mejor opción

Cuestiones relacionadas