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

我在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中的标记代码包含如下表单

 
 @using (Html.BeginForm()) { @Html.HiddenFor(model => model.ID) 
 @Html.LabelFor(model => model.EmailAddress) 
 
 @Html.EditorFor(model => model.EmailAddress) @Html.ValidationMessageFor(model => model.EmailAddress) 
 // ... other fields @Html.ValidationSummary(true) 
 Share 
 }  

问题在于表单的提交：“提交”按钮调用正确的操作，但使用回发，这会导致我的页面刷新。 我需要的是使用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" }) 

然后是一个function

 $("#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); } }); ); 

Answer 2

当你在同一个页面上有多个表单时（想象一下你需要显示/隐藏的情况），你需要在#Id之前添加Form作为Follows：

 $("#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); } }); );