我在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替换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()应该收集表单字段并准备在调用ajax调用之前设置的对象routeValues参数。
任何人都可以给我一些有关如何执行此操作的指示?
还是在这个问题上有其他更好的方法?
谢谢
我建议仅使用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); } }); });