Wie kann ich den Inhalt einer Seite mit jQuery Ajax und ASP.NET MVC aktualisieren?

Question

Ich habe ein ActionResult mit dem Namen " MyPeriods(string dateSelected) " und am Ende habe ich eine ViewData["periods"] = listOfPeriods (und danach habe ich meine Rückgabe View(), die meine Methode abschließt). Wenn kein "date" übergeben wird, ist "date" der heutige Tag, ansonsten ist "date" das als Argument übergebene Datum. Und dieses "Datum" ist wichtig, um alle Zeiträume und Ereignisse auszuwählen, die mit ihm verbunden sind.

Mein ActionResult sendet also eine Liste von Zeiträumen an meine Ansicht. In meiner Ansicht, habe ich:

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

Wenn ich also ein Datum in jQuery DatePicker auswähle, wird dieses ausgewählte Datum als Argument an mein ActionResult übergeben, und der gesamte Prozess findet statt. Und am Ende wird meine Seite erfrischt rendert alle Zeiträume und Ereignisse des ausgewählten Datums. Ein Zeitraum kann viele Ereignisse enthalten.

Also, die Frage ist: wie kann ich dieses ausgewählte Datum an meine ActionResult übergeben, so dass alle Prozess auftritt und die Seite aktualisiert wird ohne Auffrischung ?

Ich habe dies mit DatePicker ausprobiert onSelect Option:

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

Wenn ich ein Datum auswähle, wird die $.ajax aufgerufen und Debuggen konnte ich sehen, dass das ausgewählte Datum korrekt an meine ActionResult übergeben wird und Prozess auftritt, aber die Seite wird nicht aktualisiert.

Was mache ich falsch?

Vielen Dank im Voraus!!

Answer 1

Sie müssen dem Ajax-Aufruf einen Erfolgs-Callback hinzufügen, der die zurückgegebenen Daten akzeptiert und Ihre Seite über DOM-Manipulationen aktualisiert, z. B. durch Ersetzen des Inhalts eines DIV mit dem (vermutlich) von Ihrer Aktion zurückgegebenen HTML. Ich gehe hier davon aus, dass Ihre Aktion ein ContentResult zurückgibt. Wenn Sie stattdessen ein JsonResult zurückgeben, müssen Sie das Ergebnis verwenden und das Notwendige tun, um das DOM zu aktualisieren.

Werfen Sie einen Blick auf die jQuery AJAX Optionen-Seite für weitere Informationen.

EDIT Ich habe beschlossen, dies in einer Methode zu tun, aber mit IsAjaxRequest(). Ihr client-seitiger Code muss nicht geändert werden, mit Ausnahme der Verwendung der partiellen Methode wie unten beschrieben.

 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 : Dies sollte ein stark typisiertes ViewUserControl sein, das ein Modell von IEnumerable verwendet.

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

AnsichtSeite.aspx

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

Answer 2

Ihre Aktion muss entweder html oder Text oder was auch immer Sie anzeigen möchten, oder JSON-Objekte zurückgeben, die Sie dann in Ihrem Javascript verarbeiten. Von der jQuery.ajax-Dokumentation :

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

Le site msg Variable ist in diesem Fall die HTML / der Text, den Sie von Ihrer Aktion zurückbekommen. Ihre Aktion kann eine Teilansicht zurückgeben oder etwas so Einfaches wie <p>Date Selected feb 12th 2009</p> . Sie können auch ("#message").html(msg) verwenden, um HTML in Ihre Webseite einzufügen.