1

を使用するビューにフォームがありますAjax.BeginForm。送信ボタンのデフォルトの動作を Javascript コードで変更したい。メソッドを使用してハンドラーをアタッチし、ハンドラー.on()内でメソッドを呼び出しましたpreventDefault()。ハンドラーをルート DOM 要素にアタッチするとデフォルトの動作がキャンセルされないのに、ハンドラーをフォーム DOM 要素に直接アタッチするとデフォルトの動作がキャンセルされる理由を知りたいと思っています。

景色：

@using (this.Ajax.BeginForm("GetList", "Report", null, new AjaxOptions(), new {id = "OptionForm"}))
{
   <input type="submit" id="submitButton"/>
}

ハンドラーをルート DOM 要素にアタッチするスクリプト (動作しません):

<script type="text/javascript">
   $(function () {         
      $(document).on("submit", "#OptionForm", refreshGrid);
   })
</script>

ハンドラー:

refreshGrid: function (event) {
    event.preventDefault();

    $.ajax({
        url: url,
        type: "POST",
        data: $(this).serialize(),
        success: function (data) {
            if (data.success) {
                $("#ReferenceList").html(data.result);
            }
            else {
                $("#ValidationSummary").html(data.result);
            }
        }
    });
}

最後に、ハンドラーをフォーム DOM 要素にアタッチするコード (動作):

<script type="text/javascript">
   $(function () {         
      $("#OptionForm").submit = refreshGrid;
   })
</script>
4

1 に答える 1

7

Ajax.BeginFormAJAX送信を手動で処理する場合は、を使用しても意味がありません。複数のハンドラーHtml.BeginFormを累積する必要がないため、標準で十分です。.submit()

@using (Html.BeginForm("GetList", "Report", null, FormMethod.Post, new { id = "OptionForm" }))
{
   <input type="submit" id="submitButton" />
}

その後：

<script type="text/javascript">
   $(function () {         
      $(document).on('submit', '#OptionForm', refreshGrid);
   });
</script>

およびrefreshGrid機能：

var refreshGrid = function () {
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function (data) {
            if (data.success) {
                $('#ReferenceList').html(data.result);
            }
            else {
                $('#ValidationSummary').html(data.result);
            }
        }
    });

    return false;
}
于 2012-08-28T13:28:42.027 に答える