代码之家 › 专栏 › 技术社区 › André Miranda

如何使用jQuery Ajax和ASP更新页面内容。网络MVC?

jquery asp.net-mvc

André Miranda · 技术社区 · 16 年前

MyPeriods(字符串dateSelected) “最后,我有一个 (之后,我返回View(),完成我的方法)。当没有传递“日期”时,“日期”是今天,否则,“日期“是作为参数传递的日期。这个“日期”对于选择与之相关的所有时期和事件非常重要。

因此,我的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上试过这个选项:

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

当我选择一个日期时,会调用$.ajax并进行调试。我可以看到所选日期已正确传递给我的ActionResult,并且流程发生了,但页面没有更新。

2 回复 | 直到 16 年前

tvanfosson 16 年前

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

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

编辑我决定用一种方法来实现这一点,但使用IsJaxRequest()。除了使用下面提到的部分代码外,您的客户端代码可能根本不需要更改。

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

查看Page.aspx

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

Morph 16 年前

jQuery.ajax documentation :

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

这消息在这种情况下,变量是您从操作中返回的html/text。您的操作可以返回部分视图或类似以下简单的内容 <p>Date Selected feb 12th 2009</p> 。您还可以使用(“#message”).html(msg)将html插入到您的网页中。