Как я могу обновить содержимое страницы с помощью jQuery Ajax и ASP.NET MVC?

Question

У меня есть ActionResult с именем " MyPeriods (строка dateSelected) ", и в конце у меня есть ViewData ["period"] = listOfPeriods (и после этого, У меня есть мой возврат View (), заканчивая мой метод). Когда «date» не передается, «date» - это сегодня, в противном случае «date» - это дата, переданная в качестве аргумента. И эта «дата» важна для выбора всех периодов и событий, связанных с ней.

Итак, мой ActionResult отправляет список периодов в мое представление. На мой взгляд, у меня есть:

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

Итак, когда я выбираю дату в jQuery DatePicker, эта выбранная дата передается в качестве аргумента моему ActionResult, и происходит весь процесс. И, в конце концов, моя страница обновляет , отображая все периоды и события выбранной даты. В одном периоде может быть много событий.

Итак, вопрос: как я могу передать эту выбранную дату в свой ActionResult, чтобы все процессы происходили и страница обновлялась без обновления ?

Я пробовал это на DatePicker onSelect опция:

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

Когда я выбираю дату, вызывается $ .ajax и отлаживается, я вижу, что выбранная дата правильно передается в мой ActionResult и происходит процесс, но страница не обновляется.

Что я делаю не так ??

Заранее спасибо !!

Answer 1

Вам необходимо добавить успешный обратный вызов к вызову ajax, который примет возвращенные данные и обновит вашу страницу с помощью манипулирования DOM, например, путем замены содержимого DIV HTML (предположительно), возвращаемым вашим действием. Я предполагаю, что ваше действие возвращает ContentResult. Если вы вместо этого возвращаете JsonResult, вам нужно будет использовать результат и сделать все необходимое для обновления DOM.

Для получения дополнительной информации посмотрите страницу параметров jQuery AJAX .

РЕДАКТИРОВАТЬ Я решил сделать это одним способом, но используя IsAjaxRequest (). Ваш код на стороне клиента может вообще не нуждаться в изменении, за исключением использования частичного, как указано ниже.

 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: это должен быть строго типизированный ViewUserControl, использующий модель 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

Ваше действие должно возвращать либо HTML, либо текст, либо все, что вы хотите показать, либо объекты JSON, которые вы затем обрабатываете в своем JavaScript. Из документации jQuery.ajax :

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

Переменная msg в этом случае - это html / текст, который вы получите от своего действия. Ваше действие может вернуть частичное представление или что-то такое же простое, как <p>Date Selected feb 12th 2009</p>. Вы также можете использовать ("#message"). Html (msg), чтобы вставить html на свою веб-страницу.