Jak zrobić panel aktualizacji w ASP.NET MVC

Question

Jak utworzyć panel aktualizacji w ramach ASP.NET Model-View-Contoller (MVC)?

Answer 1

Możesz użyć częściowego widoku w ASP.NET MVC, aby uzyskać podobne zachowanie. Widok częściowy może nadal budować kod HTML na serwerze i wystarczy podłączyć kod HTML do właściwej lokalizacji (w rzeczywistości pomocnicy Ajax MVC mogą ustawić to dla ciebie, jeśli chcesz włączyć biblioteki Ajax MSFT).

W widoku głównym można użyć formularza Ajax.Begin do skonfigurowania żądania 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> 

Widok częściowy zamyka sekcję strony, którą chcesz zaktualizować.

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

Następnie skonfiguruj działanie kontrolera, aby obsłużyć oba przypadki. Wynik częściowego wyświetlenia działa dobrze z żądaniem asych.

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

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

    return View("Index", movies);  
} 

Nadzieję, że pomaga.

Answer 2

Jeśli jesteś nowy w asp.mvc, zalecamy pobranie przykładowej aplikacji NerdDinner (source). Znajdziesz tam wystarczająco dużo informacji, aby zacząć efektywnie pracować z mvc. Mają także przykłady ajaxowe. Przekonasz się, że nie potrzebujesz i zaktualizuj panel.

Answer 3

Zasadniczo "tradycyjne" kontrole serwera (w tym ASP.NET AJAX) nie będą działać natychmiast po uruchomieniu z MVC ... cykl życia strony jest całkiem inny. Z MVC jesteś renderowania swój strumień HTML znacznie bardziej bezpośrednio niż/pseudo-Stateful polu pobieranej że WebForms otula się.

Aby „symulacyjnej” an UpdatePanel w MVC, można rozważyć podczas wypełniania <DIV> jQuery w celu osiągnięcia podobny wynik. naprawdę proste, tylko do odczytu przykładem jest this 'search' page

HTML jest prosta:

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

dane dla 'panelu' jest w JSON format - MVC może zrobić to automagicznie zobaczyć NerdDinner SearchController.cs

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

i jQuery/javascript jest zbyt

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

Oczywiście UpdatePanel może być używany w znacznie bardziej złożonych scenariuszach niż ten (może zawierać INPUTS, obsługuje ViewState i wyzwalacze na różnych panelach i innych kontrolkach). Jeśli potrzebujesz tego rodzaju złożoności w swojej aplikacji MVC, obawiam się, że możesz być gotowy do niestandardowego rozwoju ...

Answer 4

Jest to jeden z najlepszych i najprostszych ćwiczeń do realizacji UpdatePanel w ASP.NET MVC

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