7

リンク（Ajax.ActionLink）のあるMVC3のページがあります。ユーザーがクリックすると、コントローラーのアクションが呼び出され、結果が置換されて 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 に挿入されたマークアップ コードには、以下のようなフォームが含まれています。

<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 に置き換えようとしていました

    @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 呼び出しが呼び出される前に設定する必要があると思います。

これを実装する方法について、誰かが私にいくつかの指示を与えることができますか?

または、この問題に対する他のより良いアプローチはありますか?

ありがとうございました

4

2 に答える 2

19

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);
       }
   });
});
于 2012-04-25T14:19:55.930 に答える
0

同じページに複数のフォームがある場合 (オンデマンドで表示/非表示になっている場合を想像してください)、 #Id の前に Form を追加する必要があります。

$("#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);
       }
   });
);
于 2015-07-05T17:12:48.463 に答える