Comment faire la mise à jour du panneau de ASP.NET MVC

Question

Salut Les Gars je fais de la recherche sur la façon de faire la mise à jour du panneau en MVC ,mais , parce qu'il est nouveau , je ne trouve pas de bons échantillons concernant.Comment puis-je mettre en œuvre ce pour MVC? Merci

Answer 1

Vous pouvez utiliser une vue partielle en ASP.NET MVC pour obtenir un comportement similaire. La vue partielle peut toujours construire le code HTML sur le serveur, et vous avez juste besoin de brancher le code HTML dans le bon endroit (en fait, le MVC, Ajax aides peut le configurer pour vous si vous êtes prêt à inclure la MSFT Ajax bibliothèques).

Dans l'écran principal vous pouvez utiliser de l'Ajax.Commencer formulaire de configuration de la asynch demande.

    <% 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>

Une vue partielle encapsule la section de la page que vous souhaitez mettre à jour.

<%@ 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>

Puis l'installation de votre contrôleur d'action pour traiter les deux cas. Une vue partielle résultat fonctionne bien avec le asych demande.

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

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

    return View("Index", movies);      
}

Espérons que cela aide.

Answer 2

Fondamentalement, le "traditionnel" server-contrôles (y compris les ASP.NET AJAX ceux) ne fonctionne pas out-of-the-box avec MVC... la page de cycle de vie est assez différente. Avec MVC vous êtes rendu de votre flux Html directement beaucoup plus que de l'abstrait/pseudo-dynamique de la boîte qui WebForms enveloppements de vous.

Pour "simuler" un UpdatePanel MVC, vous pourriez envisager de remplissage d'un <DIV> l'utilisation de jQuery pour obtenir un résultat semblable. Un vraiment simple, en lecture seul exemple est sur cette page de recherche

Le HTML est simple:

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

Les données pour le "panneau" est en format JSON - MVC pouvez le faire automatiquement voir NerdDinner SearchController.cs

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

et le jQuery/javascript est trop

  <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>

Bien sûr UpdatePanel peut être utilisé dans beaucoup de scénarios plus complexes que cela (il peut contenir des ENTRÉES, prend en charge ViewState et déclenche à travers différents panneaux et d'autres contrôles). Si vous avez besoin de ce genre de complexité dans votre application MVC, je crains que vous pourriez faire pour certains, développement sur mesure...

Answer 3

Si vous êtes nouveau à l'asp.mvc je vous recommande de télécharger le NerdDinner (source) exemple d'application. Vous trouverez dans il y a suffisamment d'informations pour commencer à travailler efficacement avec mvc. Ils ont également ajax exemples. Vous découvrirez que vous n'avez pas besoin et panneau de mise à jour.

Answer 4

C'est l'un de la meilleure et la plus simple des tutoriels pour mettre en œuvre Updatepanel dans ASP.NET MVC

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