Bootstrap Modal中的Ajax.BeginForm提交两次

Question

我有一个页面调用包含表单的引导模式对话框。该表单是通过 ASP.NET Razor Htmlelpers 呈现的，具体来说，我正在调用 Ajax.BeginForm() 方法。我没有向提交按钮的点击事件添加任何额外的客户 javascript。

当我单击提交按钮时，Bootstrap 和 ASP.NET 帮助程序似乎都将代码附加到表单的提交按钮事件，导致表单发布两次。我正在为我的站点布局使用 Bootstrap，并且我选择使用 Ajax 帮助程序以便能够在我的视图中使用 ASP.NET 验证，并使用适当的代码将表单发布回为我处理的操作。

如何阻止 Bootstrap 代码执行（停止双重发布），但保留 Ajax Helper 代码（保留验证）？

这是页面的 razor/html 布局

@model Valkyrie.Web.Models.Tickets.TicketHistoryViewModel

@{
    ViewBag.Title = String.Format("{0} Ticket History", Model.DisplayName);
}
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
<style>
    div.list-group-item {
        color: #000;
    }

    #myModal {
        color: #000;
    }
</style>


<div class="list-group">
    @foreach (var ticket in Model.Tickets)
    {
        <div class="list-group-item">

            <div class="pull-right">
                TT: #@ticket.TicketId.ToString().PadLeft(7, '0') <br />
                Opened @ticket.DateCreated.ToShortDateString()
                <br /> @ticket.OpenedBy
            </div>
            <div style="clear: both; padding-bottom: 10px;">
                @ticket.Interactions[0].InteractionTypeId <br />
                @ticket.Interactions[0].Notes
            </div>
            <div class="pull-left">
                <a href="#">@(ticket.Interactions.Count-1) follow ups</a>
            </div>
            <div class="pull-right">
                <a href="#myModal" role="button" data-toggle="modal" data-ticket="@ticket.TicketId" class="btn btn-success btn-pop">Add Follow Up</a>
            </div>
            <div class="clearfix"></div>
        </div>
    }
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Add Followup</h4>
            </div>
            <div class="modal-body">

                @using (Ajax.BeginForm("Interaction", "Ticket", new AjaxOptions { AllowCache = false, HttpMethod = "POST", OnSuccess = "doubleStuff" }))
                {
                      <div class="form-horizontal">
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(model => model.InteractionId)
            @Html.HiddenFor(model => model.TicketId, new { @class = "ticket-id" })
            @Html.HiddenFor(model => model.UserId)

            <div class="form-group">
                @Html.LabelFor(model => model.InteractionTypeId, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownListFor(model => model.InteractionTypeId, new SelectList(Model.InteractionTypes, "Value", "Text"), "Select", new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.InteractionTypeId, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Phone, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Notes, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.TextAreaFor(model => model.Notes, new { @class = "form-control", rows = 10 })
                    @Html.ValidationMessageFor(model => model.Notes, "", new { @class = "text-danger" })
                </div>
            </div>

        </div>


                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" id="submit_button_1" class="btn btn-primary">Save changes</button>
                    </div>
                }
            </div>
        </div>
    </div>
</div>

@section Scripts {
<script type="text/javascript">

    var fobj = {};
    fobj.InteractionTypeId = $('#InteractionTypeId');
    fobj.TicketId = $('#TicketId');
    fobj.UserId = $('#UserId');
    fobj.Phone = $('#Phone');
    fobj.Email = $('#Email');
    fobj.Notes = $('#Notes');

    function doubleStuff(data) {
        alert(data.HasErrors);
    }

    $(document).ready(function () {
        $(".btn-pop").on("click", function (event)
        {
            var button = $(this);
            var ticketId = button.data('ticket');
            $('.ticket-id').val(ticketId);
            fobj.Phone.val('');
            fobj.Email.val('');
            fobj.Notes.val('');
            fobj.InteractionTypeId.val('');

        });

        //$('#submit_button_1').on("click",
        //    function (event) {

        //    });

    });



</script>
}

Answer 1

我猜你有两次引用jquery.unobtrusive-ajax.min.js。

此外，如果您想附加按钮的单击事件，请将其类型从提交更改为按钮。 （但如果您想让jquery.unobtrusive-ajax.min.js 为您处理，则不需要）。

首先，确保您只引用一次jquery.unobtrusive-ajax.min.js（并删除$(".btn-pop").on("click"..) 事件）。