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

我有一个名为MyPeriodsstring 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>

当我选择一个日期时，将调用$.ajax，调试时，我可以看到所选日期被正确地传递到我的ActionResult，并且进程发生了，但是页面没有更新

我做错了什么

---

提前谢谢

您需要向ajax调用添加一个成功回调，该调用将接受返回的数据并通过DOM操作更新页面，例如，用您的操作可能返回的HTML替换DIV的内容。这里我假设您的操作返回ContentResult。如果您返回的是一个JsonResult，那么您需要使用该结果并执行更新DOM所需的操作

查看jQueryAjax以获取更多信息

编辑我决定用一种方法，但使用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或文本或任何您想要显示的内容，或JSON对象，然后在javascript中处理这些对象。从：

---

本例中的msg变量是从操作返回的html/文本。您的操作可以返回一个局部视图或类似于2009年2月12日选择的日期这样简单的内容。您还可以使用message.htmlmsg将html插入您的网页。

我添加了一个成功回调。。。它起了部分作用。我添加了：suces:function html{$divPeriodsEvents.appendhtml；}我还尝试了$divPeriodsEvents.texthtml；但这也不好。你是想替换全部内容吗？如果是这样，您希望使用$'divPeriodsEvents.htmlhtml。我假设你得到的数据是正确的，只是数据的显示不起作用。没错！来自ActionResult的数据正确，但此数据的显示不正确。我现在也尝试了$'divPeriodsEvents.htmlhtml，但是这个新内容被插入到我的页面中。我有我的页面，这个新内容出现在我的页面中，作为一个新页面。。。页面内的页面，我只是不想在我的页面内创建一个新页面非常奇怪的LOL！因此，使用新的div内容更新此div内容。对要替换的页面部分使用局部视图。有两个控制器方法：一个用于页面，另一个仅用于部分视图。在页面视图中，使用RenderAction获取返回局部视图的方法的结果。从Ajax调用部分视图操作。

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

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