Comment puis-je mettre à jour un contenu de page avec jQuery Ajax et ASP.NET MVC?

Question

J'ai un ActionResult nommé « MyPeriods (string dateSelected) » et à la fin de celui-ci, j'ai un vidéotex [ « périodes »] = listOfPeriods (et après cela, je mon point de vue de retour(), fininshing ma méthode). Lorsqu'aucune "date" n'est passée, "date" est aujourd'hui, sinon "date" est la date passée en argument. Et cette "date" est importante pour sélectionner toutes les périodes et les événements qui s'y rapportent. Donc, mon ActionResult envoie une liste de périodes à ma vue. À mon avis, je:

<div id="divEventsPeriods"> 
    <% foreach(UserPeriod period in in (IEnumerable)ViewData["periods"]) 
     Response.Write("<div>PERIOD: " + period.hourBeg + " - " + period.hourEnd + "</div>"); 

     foreach(UserEvents event in period.UserPeriod) { 
     Response.Write("<div>EVENT: " + event.date + "<br />"); 
     Response.Write("DESCRIPTION: " + event.description + "</div>"); 
     } 
    %> 
</div> 

Alors, lorsque je sélectionne une date dans jQuery DatePicker, cette date choisie est passé comme argument à mon ActionResult et tout le processus se produit. Et, à la fin de tout, ma page actualise rendant toutes les périodes et les événements de la date sélectionnée. Une période peut avoir plusieurs événements. Donc, la question est: comment puis-je passer cette date sélectionnée à mon ActionResult, rendant tout le processus se produit et la page est mise à jour sans rafraîchir?

J'ai essayé cela sur l'option DatePicker onSelect:

$.ajax({ 
    type: 'GET', 
    url: '/Admin/Schedule/MyPeriods/?dateSelected=' + dateSelected, 
    data: dateSelected 
}); 

Lorsque je sélectionne une date, la .ajax $ est appelé et le débogage je pouvais voir que la date choisie est transmis correctement à mon ActionResult et le processus se produit, mais la page n'est pas mise à jour.

Qu'est-ce que je fais mal ??

Merci d'avance !!

Answer 1

Vous devez ajouter un rappel réussi à l'appel ajax qui acceptera les données renvoyées et mettre à jour votre page via la manipulation DOM, par exemple, en remplaçant le contenu d'un DIV par le HTML (vraisemblablement) retourné par votre action. Je suppose ici que votre action renvoie un ContentResult. Si vous renvoyez un JsonResult à la place, vous devrez utiliser le résultat et faire ce qui est nécessaire pour mettre à jour le DOM.

Jetez un oeil à la jQuery AJAX options page pour plus d'informations. J'ai décidé de faire cela en une seule méthode, mais en utilisant IsAjaxRequest(). Il se peut que votre code client ne doive pas être modifié du tout, à l'exception de l'utilisation du partiel, comme indiqué ci-dessous.

public ActionResult ViewPage(DateTime dateSelected) 
{ 
     ....do some stuff... 
     ViewData["dateSelected"] = GetPeriods(dateSelected); 
     if (Request.IsAjaxRequest()) { 
      return PartialView("PeriodDisplay", ViewData["dateSelected"]); 
     } 
     else { 
      return View(); 
} 

// common code to populate enumerable 
public IEnumerable<Period> GetPeriods(DateTime selected) 
{ 
     return ...data based on date... 
} 

PeriodDisplay.ascx: cela devrait être un ViewUserControl fortement typé en utilisant un modèle de IEnumerable.

<%@ Page ... %> /// page definition... 

    <% foreach(UserPeriod period in Model) { %> 
     <div>PERIOD: <%= period.hourBeg + " - " + period.hourend %> </div> 

    <% foreach(UserEvents event in period.UserPeriod) { %> 
     <div> 
      EVENT: <%= event.date %><br/> 
      DESCRIPTION: <%= event.description %> 
     </div> 
    <% } %> 

ViewPage.aspx

... 
    <div id="divEventsPeriods"> 
     <% Html.RenderPartial("PeriodDisplay", ViewData["periods"], null); %> 
    </div> 

Answer 2

Votre action doivent retourner soit en HTML ou texte ou tout ce que vous voulez montrer, ou des objets JSON que vous ensuite dans votre processus javascript.De l'jQuery.ajax documentation:

$.ajax({ 
    type: "POST", 
    url: "some.php", 
    data: "name=John&location=Boston", 
    success: function(msg){ 
    alert("Data Saved: " + msg); 
    } 
}); 

Le msg variable dans ce cas est le html/texte que vous revenez de votre action. Votre action peut renvoyer une vue partielle ou quelque chose d'aussi simple que <p>Date Selected feb 12th 2009</p>. Vous pouvez également utiliser ("#message"). Html (msg) pour insérer html dans votre page Web.