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

Cómo hago un panel de actualización en el ASP.NET Model-View-Contoller (MVC) framework?

Author: Michael Currie, 2009-06-07
Source

3 answers

Podría usar una vista parcial en ASP.NET MVC para obtener un comportamiento similar. La vista parcial todavía puede construir el HTML en el servidor, y solo necesita conectar el HTML en la ubicación adecuada (de hecho, los ayudantes Ajax de MVC pueden configurarlo para usted si está dispuesto a incluir las bibliotecas Ajax de MSFT).

En la vista principal se puede usar el Ajax.Iniciar formulario para configurar la solicitud asynch. 

    <% 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 del 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 eso ayude.

 63
Author: OdeToCode,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-06-07 14:43:22

Básicamente los controles del servidor ' tradicionales '(incluyendo ASP.NET AJAX) no funcionará fuera de la caja con MVC... el ciclo de vida de la página es bastante diferente. Con MVC está renderizando su flujo Html mucho más directamente que la caja abstracta/pseudo-stateful en la que WebForms lo envuelve.

Para 'simular' un UpdatePanel en MVC, puede considerar rellenar un <DIV> usando jQuery para lograr un resultado similar. Un realmente simple, ejemplo de solo lectura está en esta 'búsqueda' page

El HTML es simple: 

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

Los datos para el' panel ' están en formato JSON - MVC puede hacer esto automáticamente 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, soporta ViewState y disparadores a través de diferentes paneles y otros controles). Si necesita ese tipo de complejidad en su aplicación MVC, me temo que podría estar listo para algo de desarrollo personalizado...

 4
Author: Conceptdev,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-06-07 12:21:56

Si es nuevo en asp.mvc Te recomiendo descargar el NerdDinner (source) ejemplo de aplicación. Usted encontrará en allí suficiente información para empezar a trabajar con eficacia con mvc. También tienen ejemplos de ajax. Usted descubrirá que no necesita y actualizar el panel.

 3
Author: Razvan Dimescu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-11-27 13:59:25