Ajaxを使用してコントローラのアクションにフォームデータを投稿する

Question

MVC3にリンク（Ajax.ActionLink）を持つページがあります。ユーザーがクリックすると、コントローラーのアクションが呼び出され、その結果がdivで置き換えられます。

コードを以下に示します。

@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> 
@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> 

以下のように今のポップアップを作成するdiv要素に挿入されたマークアップコードは、フォームが含まれています：提出尻onは適切なアクションを呼び出しますが、ポストバックを呼び出すとページがリフレッシュされます。私に必要なのは、Ajaxでデータをポスト応答を受信し、

に挿入されます別の部分図である私は

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

以下のようAjax.ActionLinkで送信]ボタンを交換しようとしていたことですコントローラのコードは次のようになります。

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

問題はコントローラの私のPOSTアクションが唯一のIDパラメータを受け取るように、（フォームがロードされるとき）アヤックスActionLinkのがレンダリングされる瞬間にModel.EmailAddressには値が存在しない、あります。

どうすれば対応できますか？理想的には、私は

OnBegin = "PreparePostData()" 

を追加すべきだと思う。しかし、私は唯一基本的にJavaScriptを知っているので、私はこれを実装することができますか見当がつかない。私はこのPreparePostData（）はフォームフィールドを収集し、ajax呼び出しが呼び出される前に設定されるオブジェクトrouteValuesパラメータを準備する必要があると思います。

これを実装する方法については、誰でも教えていただけますか？

また、この問題については、他の方法より優れていますか？

は、私はちょうどjQueryを使って独自のAJAX呼び出しを書いてお勧めしたいあなたに

Answer 1

ありがとうございます。それはとにかくMVCのヘルパーよりも、あなたが同じページ上の複数のフォームを持っている場合は、あなたが必要とする（必要に応じて表示/非表示y're場合を想像）

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

@Html.ActionLink("Share", "Share", new { }, new { id = "share" }) 

そして機能、より柔軟です#Idの前にフォームを追加する方法は次のとおりです。

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