1

単純なものが欠けていると思いますが、同じコードを何度も見て目がくらみ、別の目を使うことができます。

Form を含む MVC 部分ビューがあります。

<div class="Clear"></div>
 <div class="OverFlow">
     @using (Html.BeginForm(null, null, FormMethod.Post, new {id = "formId"}))
     {
         <div class="ErrorBx1">@Html.GetData()</div>
         <table>
             @Html.EditorFor(m => m.FormModel, "MyEditorTemplate") 
             <tr>
                 <td colspan="2"></td>
                 <td><input type="image" src="@Images.ResolveDefault("btn-send.jpg")" alt="Send" class="Send" /></td>
             </tr>
         </table>
     }
 </div>

このビューには Javascript も含まれています

<script type="text/javascript">
    $(function () {
        $('#formId').submit(function () {
            $.ajax({
                cache: false,
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (res) {
                    if (res.success) {
                        alert("success");
                        closeDialog();
                        window.parent.specialFunction();
                    } else {
                        alert("not success");
                        $('#someElement').replaceWith(res);
                    }
                }
            });
            return false;
        });
    });
</script>

実行されるコントローラーメソッドは次のとおりです

[HttpPost]
public ActionResult Index(MyViewModel viewModel)
{
    if (CheckSuccess())
    {
        return Json(new { success = true });
    }

    return ViewNoLayout("otherView", viewModel);
}

このビューは、jQuery.UI ダイアログに読み込まれます。ダイアログが初めて読み込まれるときに、フォームの送信ボタンをクリックすると、success 関数が正しく実行されます。警告が表示され、ダイアログが閉じられ、親関数が呼び出されます。ダイアログを再度ポップアップして送信ボタンをクリックすると、呼び出しはサーバーに送られ、正しく処理されますが、ページがリロードされ、JSON 文字列のみが表示されます (アラートなどは表示されません)。私が見逃しているある種のクライアント側キャッシング、または同等のものがあると想定しています。何か案は？

4

1 に答える 1

2

ビューから を削除document.readyします。

<script type="text/javascript">
    $('#formId').submit(function () {
        $.ajax({
            cache: false,
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (res) {
                if (res.success) {
                    alert("success");
                    closeDialog();
                    window.parent.specialFunction();
                } else {
                    alert("not success");
                    $('#someElement').html(res);
                }
            }
        });
        return false;
    });
</script>

その理由はdocument.ready、パーシャルを DOM に挿入したときに が 2 回目に実行されなくなったためです。したがって、送信イベントはもう添付されません。事前に注意してください:document.readyこのスクリプトをマークアップのフォームの後に配置する必要があるという意味を削除するか、このページを初めてロードするときにまったく添付されません。

明らかに、私が言っていることはすべて、あなたの現在の問題を解決することだけです.

しかし、実際の問題は、マークアップと HTML が混在しているという事実です。これは決して行うべきではありません。マークアップはビューに属し、スクリプトは JavaScript ファイルに属します。JavaScript ファイルを分離します。したがって、これを別の js ファイルに外部化する必要があります。したがって、実際の解決策は、DOM にまだ存在しない可能性のある要素を活発.on()にサブスクライブするために(または.delegate()、従来の jQuery バージョンを.live()使用していて、以前のバージョンの jQuery を使用している場合) を使用して、別のファイルに次のスクリプトを含めることです。サブスクリプションの時点で:

$(document).on('submit', '#formId', function() {
    $.ajax({
        cache: false,
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function (res) {
            if (res.success) {
                alert("success");
                closeDialog();
                window.parent.specialFunction();
            } else {
                alert("not success");
                $('#someElement').html(res);
            }
        }
    });
    return false;    
});
于 2012-07-09T22:07:56.807 に答える