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 元素（Works）的代码：

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

1 回答 1

7

Ajax.BeginForm如果您要手动处理 AJAX 提交，那么使用真的没有意义。一个标准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 回答