Chargement de nouvelles données sur une page sans recharger

Question

Je fais une spécification de haut niveau sur une page ASP.Net qui peut présenter des données différées. Lors du chargement de la page, les données initiales présentées proviendront d'une base de données locale (qui sera rapide à présenter). Ce que je veux, c'est un processus séparé pour sortir et chercher des données mises à jour (à partir de tous les autres services que j'ai). Cela prend plus de temps, mais l'idée est de présenter des données, puis si des données plus récentes sont trouvées, ajoutez-les, à la volée, en haut de la page existante.

Je voudrais des recommandations sur la façon d'accomplir cela.

La portée technologique pour cela est ASP.Net 4.0, C# MVC3 et HTML5.

Merci.

Answer 1

AJAX with jQuery est un bon moyen d'y parvenir. Ainsi, par exemple, vous pouvez mettre un espace réservé contenu div sur votre balisage:

<div id="result" data-remote-url="@Url.Action("Load", "SomeController")"></div> 

puis une fois que le DOM est chargé:

$(function() { 
    $.ajax({ 
     url: $('#result').data('remote-url'), 
     type: 'POST', 
     beforeSend: function() { 
      // TODO: you could show an AJAX loading spinner 
      // to indicate to the user that there is an ongoing 
      // operation so that he doesn't run out of patience 
     }, 
     complete: function() { 
      // this will be executed no matter whether the AJAX request 
      // succeeds or fails => you could hide the spinner here 
     }, 
     success: function(result) { 
      // In case of success update the corresponding div with 
      // the results returned by the controller action 
      $('#result').html(result); 
     }, 
     error: function() { 
      // something went wrong => inform the user 
      // in the gentler possible manner and remember 
      // that he spent some of his precious time waiting 
      // for those results 
     } 
    }); 
}); 

où l'action du contrôleur de charge se chargera de communiquer avec les services à distance et renvoyer une vue partielle contenant les données:

public ActionResult Load() 
{ 
    var model = ... go ahead and fetch the model from the remote service 
    return PartialView(model); 
} 

maintenant, si ce des données aller chercher est d'E/S intensives que vous pourriez prendre ad Avantage de asynchronous controllers des ports d'achèvement d'E/S qui vous éviteront de mettre en péril les threads de travail pendant la longue opération d'extraction de données à partir d'une source distante.