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

我有一个名为“MyPeriods（字符串dateSelected）”，并在它结束时，我有一个计算机[“时期”] = listOfPeriods（和在那之后，我有我返回查看（）的ActionResult，fininshing我的方法）。当没有“日期”通过时，“日期”是今天，否则，“日期”是作为参数传递的日期。这个“日期”对于选择与它有关的所有时期和事件很重要。如何使用jQuery Ajax和ASP.NET MVC更新页面内容？

所以，我的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 
});

当我选择一个日期，$就被称为调试我可以看到，选定的日期是否正确传递给我的ActionResult并发生进程，但该页面未更新。

我在做什么错？

在此先感谢！

来源

2009-02-11 AndreMiranda

您需要将成功回调添加到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>

来源

2009-02-11 15:39:03 tvanfosson

我添加了一个成功回调...它部分工作。我加入：成功：function（html）{ $（“＃divPeriodsEvents”）。append（html）; } 我也试过$（“＃divPeriodsEvents”）。text（html）;但它也不好。 – AndreMiranda 2009-02-11 16:06:56

你的动作需要返回HTML或任何你想显示文本或，或者JSON对象，你那么过程在你的JavaScript。从jQuery.ajax documentation：

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

在这种情况下，味精变量是HTML /文本你从你的行动了。你的动作可以返回一个局部视图，或者像<p>Date Selected feb 12th 2009</p>那样简单。您也可以使用（“#message”）.html（msg）将html插入到您的网页中。

来源

2009-02-12 08:55:17 Morph

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

回答

相关问题