Question

我在视图中有一个表单，我使用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>

谢谢。

Answer 1

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

使用jQuery的.on（）方法防止Ajax.BeginForm中提交的默认行为

1 个答案: