使用 Ajax 将表单数据发布到控制器操作答案

【问题标题】：Post form data to Controller's action with Ajax使用 Ajax 将表单数据发布到控制器操作
【发布时间】：2012-05-06 05:23:47
【问题描述】：

我在 MVC3 中有一个页面，带有一个链接 (Ajax.ActionLink)。当用户点击它时，它会调用控制器的动作，并将结果插入到一个div中，并带有replace。

代码如下：

@Ajax.ImageActionLink("/Images/btn_share.png", "Share pool", "SharePool", new { poolKey = Model.Id, poolName = Model.Name },
    new AjaxOptions { 
        UpdateTargetId="popup", 
        HttpMethod="GET", 
        InsertionMode = InsertionMode.Replace,
        LoadingElementId="loading_dialog",
        OnSuccess = "ShowPopup('#popup_share', true, true)"
    }

ImageLinkAction 是使用图像作为链接的自定义扩展方法，ShowPopup 是一个显示更新的 div 的 javascript 函数（使其看起来像弹出窗口）

现在插入到创建弹出窗口的 div 中的标记代码包含如下表单

<div>
@using (Html.BeginForm()) {

    @Html.HiddenFor(model => model.ID)

    <div class="editor-label">
        @Html.LabelFor(model => model.EmailAddress)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.EmailAddress)
        @Html.ValidationMessageFor(model => model.EmailAddress)
    </div>

    // ... other fields

    @Html.ValidationSummary(true)
    <p>
        <button type ="submit">Share</button>       
    </p>
}
</div>

问题在于表单的提交：提交按钮调用了正确的操作，但带有回发，这会导致我的页面刷新。我需要的是用 ajax 发布数据，接收响应，这是另一个插入到

我试图用 Ajax.ActionLink 替换提交按钮，如下所示

    @Ajax.ActionLink("Share", "Share",
        new Models.MyModel 
            {
                ID = Model.ID,
                EmailAddress = Model.EmailAddress
            },
        new AjaxOptions
            {
                UpdateTargetId="popup", 
                HttpMethod="POST", 
                InsertionMode = InsertionMode.Replace,
                LoadingElementId="loading_dialog",
                OnSuccess = "ShowPopup('#popup_share', true, true)"
            }

控制器的代码如下所示：

[HttpPost]
public ActionResult SharePool(MyModel model)
{
    // ...
    return PartialView("_MyPartialView", model)
}

问题是，在呈现 Ajax ActionLink 的那一刻（加载表单时），Model.EmailAddress 中没有值，所以我在控制器中的 POST 操作只接收 ID 参数。

我该如何处理？理想情况下，我认为我应该添加

OnBegin = "PreparePostData()"

但由于我基本上只知道 javascript，所以我不知道如何实现这一点。我认为这个 PreparePostData() 应该收集表单字段并准备对象 routeValues 参数，在调用 ajax 调用之前设置。

谁能给我一些关于如何实现它的指示？

或者还有其他更好的方法来解决这个问题吗？

谢谢

【问题讨论】：

标签： ajax asp.net-mvc-3 jquery asp.net-ajax

【解决方案1】：

我建议您只使用 jQuery 编写您自己的 AJAX 调用。反正它比 MVC 的 helpers 更灵活

@Html.ActionLink("Share", "Share", new { }, new { id = "share" })

然后是一个函数

$("#share").click(function (e) {
   e.preventDefault();
   //Show loading display here
   var form= $("#shareForm");
   $.ajax({
       url : '@Url.Action("Share")',
       data: form.serialize(),
       type: 'POST',
       success: function(data){
          //Show popup
          $("#popup").html(data);
       }
   });
});

【讨论】：

感谢您的建议。我实际上对javascript不太熟悉，所以感谢您的示例代码。但是我怎样才能在成功函数中真正做
元素的 innerHtml 的替换集呢？
@bzamfir 哈哈，哎呀，我误读了，以为你说“我基本上只知道 javascript”而不是“我基本上只知道 javascript”。尽管如此，做你自己的ajax调用是要走的路。 MVC Ajax 的东西只有在您使用 Ajax.BeginForm 时才能轻松发布表单。在代码示例中添加了替换弹出窗口。
谢谢。我会试一试，让你知道
它不起作用。我编辑了你的帖子，只是为了给你我试图做的事情的信息。请在您查看我的 cmets 后将其删除（此评论字段太小）。知道我做错了什么吗？谢谢。
@bzamfir 我错过了阻止在点击触发后启动 url 的行。我将其添加到示例中。如果仍然存在问题，请尝试在单击的第一行设置断点，以确保它正在调用它并且不会在函数中的任何地方出错。

【解决方案2】：

当您在同一页面上确实有多个表单时（想象一下您按需显示/隐藏的情况），您需要在 #Id 之前添加表单，如下所示：

$("#share").click(function (e) {
   e.preventDefault();
   //Show loading display here

// Need to add Form before #id 
   var form= $("Form#share");

   $.ajax({
       url : '@Url.Action("Share")',
       data: form.serialize(),
       type: 'POST',
       success: function(data){
          //Show popup
          $("#popup").html(data);
       }
   });
);

【讨论】：