使用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);
       }
   });
});

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