asp.net-mvc - 如何使用 jQuery Ajax 和 ASP.NET MVC 更新页面内容？

Question

我有一个名为“MyPeriods(string dateSelected)”的 ActionResult，最后，我有一个 ViewData["periods"] = listOfPeriods (之后那，我有我的 return View()，完成了我的方法)。当没有传递“日期”时，“日期”是今天，否则，“日期”是作为参数传递的日期。这个“日期”对于选择与其相关的所有时期和事件非常重要。

因此，我的 ActionResult 正在将句点列表发送到我的 View 。在我看来，我有:

<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 操作更新您的页面，例如，通过用您的操作返回的 HTML(大概)替换 DIV 的内容。我在这里假设您的操作返回一个 ContentResult。如果您返回 JsonResult，那么您需要使用该结果并执行更新 DOM 所需的操作。

看看 jQuery AJAX options page了解更多信息。

编辑 我决定用一种方法来执行此操作，但使用 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:这应该是使用 IEnumerable 模型的强类型 ViewUserControl。

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