如何使用 jQuery Ajax 和 ASP.NET MVC 更新页面内容？答案

【问题标题】：How can I update a page content with jQuery Ajax and ASP.NET MVC?如何使用 jQuery Ajax 和 ASP.NET MVC 更新页面内容？
【发布时间】：2009-02-11 15:24:01
【问题描述】：

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

所以，我的 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 并进行了处理，但页面没有更新。

我做错了什么？？

提前致谢！！

【问题讨论】：

标签： asp.net-mvc jquery

【解决方案1】：

您需要向 ajax 调用添加一个成功回调，该回调将接受返回的数据并通过 DOM 操作更新您的页面，例如，将 DIV 的内容替换为您的操作返回的 HTML（可能）。我在这里假设您的操作返回一个 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>

【讨论】：

我添加了一个成功回调......它部分工作。我补充说：成功：函数（html）{$（“#divPeriodsEvents”）.append（html）;我也试过 $("#divPeriodsEvents").text(html);但也不好。
您要替换全部内容吗？如果是这样，您想使用 $('#divPeriodsEvents").html(html)。我假设您返回的数据是正确的，它只是显示不起作用的数据。
没错！来自 ActionResult 的数据是正确的，但是这个数据的显示是不正确的。我现在也尝试了 $('#divPeriodsEvents").html(html)，但是这个新内容被插入到我的页面中。我有我的页面，这个新内容出现在我的页面中，作为一个新页面...页面内的页面
我只是不想在我的页面中创建一个新页面（非常奇怪的哈哈！）所以，用新的更新这个 div 内容。
对要替换的页面部分使用局部视图。有两种控制器方法：一种用于您的页面，另一种用于局部视图。在您的页面视图中，使用 RenderAction 获取返回部分视图的方法的结果。从 Ajax 调用局部视图操作。

【解决方案2】：

您的操作需要返回 html 或文本或您想要显示的任何内容，或者您随后在 javascript 中处理的 JSON 对象。来自jQuery.ajax documentation：

 $.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 插入到您的网页中。

【讨论】：