使用Ajax将表单数据发布到Controller的操作

Question

我在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是使用image作为链接的自定义扩展方法,ShowPopup是一个javascript函数,显示更新的div(使其看起来像弹出窗口)

现在插入到创建弹出窗口的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替换Submit按钮,如下所示

    @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调用之前设置它.

任何人都可以给我一些关于如何实现这一点的指示？

或者是针对这个问题的任何其他更好的方法？

谢谢

Answer 1

我建议用jQuery编写自己的AJAX调用.无论如何,它比MVC的助手更灵活

@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);
       }
   });
});