Cómo hacer el panel de actualización en ASP.NET MVC

Question

¿Cómo puedo crear un panel de actualización en el marco ASP.NET Model-View-Contoller (MVC)?

Answer 1

Puede usar una vista parcial en ASP.NET MVC para obtener un comportamiento similar. La vista parcial aún puede construir el HTML en el servidor, y solo necesita enchufar el HTML en la ubicación correcta (de hecho, los ayudantes de MVC Ajax pueden configurar esto para usted si está dispuesto a incluir las bibliotecas Ajax de MSFT).

En la vista principal, puede usar el formulario Ajax.Begin para configurar la solicitud de asincronización.

<% using (Ajax.BeginForm("Index", "Movie", 
          new AjaxOptions { 
           OnFailure="searchFailed", 
           HttpMethod="GET", 
           UpdateTargetId="movieTable",  
          })) 

     { %> 
      <input id="searchBox" type="text" name="query" /> 
      <input type="submit" value="Search" />    
    <% } %> 

    <div id="movieTable"> 
     <% Html.RenderPartial("_MovieTable", Model); %> 
    </div> 

Una vista parcial encapsula la sección de la página que desea actualizar.

<%@ Control Language="C#" Inherits="ViewUserControl<IEnumerable<Movie>>" %> 

<table> 
    <tr>  
     <th> 
      Title 
     </th> 
     <th> 
      ReleaseDate 
     </th>  
    </tr> 
    <% foreach (var item in Model) 
     { %> 
    <tr>   
     <td> 
      <%= Html.Encode(item.Title) %> 
     </td> 
     <td> 
      <%= Html.Encode(item.ReleaseDate.Year) %> 
     </td>  
    </tr> 
    <% } %> 
</table> 

Luego configure la acción de su controlador para manejar ambos casos. Un resultado de vista parcial funciona bien con la solicitud asych.

public ActionResult Index(string query) 
{   
    var movies = ... 

    if (Request.IsAjaxRequest()) 
    { 
     return PartialView("_MovieTable", movies); 
    } 

    return View("Index", movies);  
} 

Espero que ayude.

Answer 2

Si es nuevo en asp.mvc, le recomendamos que descargue la aplicación de ejemplo NerdDinner (source). Allí encontrará suficiente información para comenzar a trabajar eficazmente con mvc. También tienen ejemplos de ajax. Descubrirá que no necesita y actualizar el panel.

Answer 3

Básicamente los controles de servidor 'tradicionales' (incluidos los ASP.NET AJAX) no funcionarán de fábrica con MVC ... el ciclo de vida de la página es bastante diferente. Con MVC se renderiza el torrente de HTML y mucho más directamente que la caja abstracta/pseudo-stateful que WebForms se envuelve en.

Para 'simular' un UpdatePanel en MVC, es posible considerar llenar una <DIV> usando jQuery para lograr una resultado similar Un ejemplo realmente simple, de sólo lectura está en this 'search' page

El HTML es simple:

<input name="query" id="query" value="dollar" /> 
<input type="button" onclick="search();" value="search" /> 

Los datos para el 'Panel' es en JSON format - MVC puede hacer esto automágicamente ver NerdDinner SearchController.cs

public ActionResult SearchByLocation(float latitude, float longitude) { 
     // code removed for clarity ... 
     return Json(jsonDinners.ToList()); 
    } 

y el jQuery/javascript es demasiado

<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script> 
    <script type="text/javascript"> 
    // bit of jquery help 
    // http://shashankshetty.wordpress.com/2009/03/04/using-jsonresult-with-jquery-in-aspnet-mvc/ 
    function search() 
    { 
    var q = $('#query').attr("value") 
    $('#results').html(""); // clear previous 
    var u = "http://"+location.host+"/SearchJson.aspx?searchfor=" + q; 
    $("#contentLoading").css('visibility',''); // from tinisles.blogspot.com 
    $.getJSON(u, 
     function(data){ 
      $.each(data, function(i,result){ 
      $("<div/>").html('<a href="'+ result.url+'">'+result.name +'</a>' 
          +'<br />'+ result.description 
          +'<br /><span class="little">'+ result.url +' - ' 
          + result.size +' bytes - ' 
          + result.date +'</span>').appendTo("#results"); 
      }); 
     $("#contentLoading").css('visibility','hidden'); 
     }); 
    } 
    </script> 

Por supuesto, UpdatePanel se puede utilizar en escenarios mucho más complejos que este (puede contener ENTRADAS, admite ViewState y desencadenadores en diferentes paneles y otros controles). Si necesita ese tipo de complejidad en su aplicación MVC, me temo que podría estar buscando desarrollo personalizado ...

Answer 4

Ésta es una de las mejores y más simples tutoriales para implementar UpdatePanel de ASP.NET MVC

http://weblogs.asp.net/dwahlin/archive/2009/05/14/emulating-the-updatepanel-in-asp-net-mvc-1-0-with-ajaxhelper.aspx