发布表单数据到控制器的动作与阿贾克斯 [英] Post form data to Controller's action with Ajax

问题描述

我在MVC3一个网页，一个链接（Ajax.ActionLink）。当用户点击它时，它调用控制器的动作，其结果被插入到一个div，替换

I have a page in MVC3, with a link (Ajax.ActionLink). When user clicks it, it calls controller's action, and the result is inserted into a div, with replace.

code如下所示：

@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是一个JavaScript函数，它显示了更新股利（使它看起来像一个弹出）

ImageLinkAction is custom extension method to use image as link, and ShowPopup is a javascript function that shows the updated div (to make it look as a popup)

现在标记code插入创建弹出的div包含一个形式如下

Now the markup code inserted into the div which creates the popup contains a form as below

<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，接收响应，这是被插入到另一个局部视图的

The issue is with the form's submit: the Submit button calls the proper action but with a postback, which cause my page to refresh. What I need is to post data with ajax, receive the response, which is another partial view that gets inserted into the

我试图取代Ajax.ActionLink提交按钮，如下图

I was trying to replace the Submit button with Ajax.ActionLink as below

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

控制器的code是这样的：

The controller's code looks like this:

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

现在的问题是，在当下的Ajax ActionLink的呈现（当窗体加载）没有在Model.EmailAddress没有价值，所以在控制我的POST操作只收到ID参数。

The problem is, in the moment the Ajax ActionLink is rendered (when form is loaded) there is no value in Model.EmailAddress, so my POST action in controller receives only ID parameter.

我该如何处理呢？理想情况下，我认为我应该补充

How can I handle this? Ideally, I think I should add

OnBegin = "PreparePostData()"

但自从我知道的JavaScript只是基本上，我不知道我怎样才能实现这一点。我想，这preparePostData（）应收集的表单域和prepare对象routeValues​​参数，要设置的Ajax调用被调用之前。

But since I know javascript only basically, I have no idea how can I implement this. I think this PreparePostData() should collect form fields and prepare the object routeValues parameter, to be set before the ajax call is invoked.

任何人都可以给我就如何落实这方面的一些迹象？

Anyone can give me some indications on how to implement this?

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

Or is any other, better approach on this problem?

感谢您

推荐答案

我建议只写自己的Ajax和jQuery的调用。它比MVC的助手更灵活反正

I'd recommend just writing your own AJAX calls with jQuery. It's more flexible than MVC's helpers anyway

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

这篇关于发布表单数据到控制器的动作与阿贾克斯的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！