Question

我有一个页面调用包含表单的Bootstrap Modal对话框。表单通过ASP.NET Razor Htmlelpers呈现，特别是我调用Ajax.BeginForm（）方法。我没有在提交按钮的点击事件中添加任何其他客户javascript。

当我单击提交按钮时，似乎Bootstrap和ASP.NET Helpers都将代码附加到表单的提交按钮事件，导致表单发布两次。我使用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

我的猜测是你有两次引用<script type="text/javascript"> function get_values() { var x = document.getElementById("quantity").value; var y = document.getElementById("code").value; var arr = {barcode:x}; $.ajax({ url: 'insert.php', data: arr, type: 'post', success: function(output) { document.getElementById("code").value = output; } }); } </script>。

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

首先，请确保仅引用jquery.unobtrusive-ajax.min.js一次（并删除jquery.unobtrusive-ajax.min.js事件）。

Bootstrap Modal中的Ajax.BeginForm提交两次

1 个答案: