asp.net mvc 复杂的 ajax 更新答案

【问题标题】：asp.net mvc complex ajax updatesasp.net mvc 复杂的 ajax 更新
【发布时间】：2013-02-26 04:38:21
【问题描述】：

我想以某种方式执行一些 ajax 调用。

我有一个页面。在这个页面中有 2 个 ViewUserControl，比如 control1 和 control2。

control1 有一个调用 control2 的 Ajax.ActionLink 列表，如下所示：

<%= Ajax.ActionLink(page.Name, "PageDetails", new { pageSysName = page.SysName }, new AjaxOptions { UpdateTargetId = "pageEdit" })%>

control2 有一个 Ajax 表单，可以很好地更新。 Ajax.BeginForm 方法如下所示：

Ajax.BeginForm("SavePage", "Admin", new AjaxOptions { UpdateTargetId = "pageEditUpdated" })

当用户点击“保存”按钮时，它当前会使用来自控制器的基本 Content("updated") 返回类型更新一个名为 pageEditUpdated 的 div。

我被难住的部分是如何更新 control2 以反映新的变化。

总而言之，一个页面有 2 个控件。我希望 control2 刷新自身并更新 div 以通知用户已执行更新。

【问题讨论】：

标签： asp.net asp.net-mvc

【解决方案1】：

让您的 SavePage 方法返回反映更新后的表单内容的部分内容，包括更新消息。让更新目标成为表单的“内部容器”。

<% Ajax.BeginForm("SavePage", "Admin", new AjaxOptions { UpdateTargetId = "innerForm" }) { %}
   <div id="innerForm">
   <% Html.RenderPartial( "EditPageContents" ) %>
   </div>
<% } %>

您的保存操作应该会返回

updatedModel.UpdateMessage = "updated";
return PartialView( "EditPageContents", updateModel );

你的局部视图应该有

<% if (!string.IsNullOrEmpty( UpdateMesage )) { %>
   <%= Html.Encode( UpdateMessage ) %>
<% } %>

不过，老实说，使用 jQuery 通过 AJAX 发布表单会容易得多：

$(function() {
    $('form').submit( function() {
        $.post( $(this).attr('action'), $(this).serialize(), function(data) {
            $('#updateMessage').html(data).show();
        });
        return false;
    });
});

【讨论】：

为答案喝彩。我还没有尝试过 jquery 版本。我需要更多地了解 jquery 才能弄清楚那部分。

【解决方案2】：

我不得不赞同 tvanfosson 的评论（我会投票给他，但我的声誉显然还不够高）。无论如何，当我将 Ajax 功能与我的 MVC 站点集成时，我发现 Microsoft 提供的 Ajax 方法相当笨拙。所以我转而使用 jQuery.form 插件（很好的例子here）。我发现它使事情变得更容易使用。我刚刚为我想成为 ajax 的页面部分创建了 MVC 用户控件，并根据需要重新加载了该用户控件。

【讨论】：