How can I update a page content with jQuery Ajax and ASP.NET MVC??

Question

Hi!!

I have a ActionResult named "MyPeriods(string dateSelected)" and in the end of it, I have a ViewData["periods"] = listOfPeriods (and after that, I have my return View(), fininshing up my method). When no "date" is passed, "date" is today, otherwise, "date" is the date passed as argument. And this "date" is important to select all the periods and events relationed to it.

So, my ActionResult is sending a list of periods to my View. In my View, I have:

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

So, when I select a date in jQuery DatePicker, this selected date is passed as an argument to my ActionResult and all the process occurs. And, in the end of all, my page refreshes rendering all the Periods and Events of the selected date. One Period may have many Events.

So, the question is: how can I pass this selected date to my ActionResult, making all process occurs and the page becomes updated without refreshing?

I've tried this on DatePicker onSelect option:

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

When I select a date, the $.ajax is called and debugging I could see that the selected date is passed correctly to my ActionResult and process occurs, but the page is not updated.

What am I doing wrong??

Thanks in advance!!

Answer 1

You need to add a success callback to the ajax call that will accept the returned data and update your page via DOM manipulation, for example, by replacing the contents of a DIV with the HTML (presumably) returned by your action. I'm assuming here that your action returns a ContentResult. If you are returning a JsonResult instead, then you'll need use the result and do what is necessary to update the DOM.

Take a look at the jQuery AJAX options page for more information.

EDIT I decided to do this in one method, but using IsAjaxRequest(). Your client side code may not need to change at all with the exception of using the partial as noted below.

 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 : this should be a strongly typed ViewUserControl using a model of 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

Your action need to return either html or text or whatever you want to show, or JSON objects that you then process in your javascript. From the jQuery.ajax documentation:

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

The msg variable in this case is the html / text that you get back from your action. Your action can return a partial view or something as simple as <p>Date Selected feb 12th 2009</p>. You can also use ("#message").html(msg) to insert html into your webpage.