时间戳

首页 > 解决方案 > MVC Jquery 帖子被发送两次

jquery - MVC Jquery 帖子被发送两次

问题描述

这似乎是一个反复出现的问题，但我找不到适合我情况的解决方案。我的代码看起来很简单，但我找不到问题所在。

这是整个代码。当我单击“开始”按钮时。弹出一个模型，如果我取消它，一切都很好。但是，如果我单击“确定”，“ConfirmerFamille”操作会发布两次，因此该操作会执行两次，这根本不是理想的解决方案。

这是 Razor 部分的完整代码。

@{
    ViewBag.Title = "Sélection de la famille d'emplois";
}

<h2>@ViewBag.Title</h2>
<br /><br />
<div class="form-group ">
    <div class="row">
        <div class="col-md-6">
            @Html.Label("Veuillez sélectionner la famille d'emplois qui vous intéresse", htmlAttributes: new { @class = "control-label" })<br/>
            @Html.DropDownList("IdFamille", (IEnumerable<SelectListItem>)ViewData["Familles"], "Sélectionner...", htmlAttributes: new { @class = "form-control" })
        </div>

    </div>
    <br /><br />
    <div class="row">
        <div class="col-sm-12">
            <button type="button" class="btn-bootstrap-dialog btn btn-primary" id="btnDebut" >Commencer</button>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal1" role="dialog">

    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h5 class="modal-title">Confirmation</h5>
            </div>
            <div class="modal-body">

                <p>Une fois que vous commencez l’évaluation, il est impossible de changer de famille d’emplois.<br /><br />Continuer ?</p>

            </div>

            <div class="modal-footer">
                <button type="Submit" class="btn btn-success" id="confirmOk">Ok</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Annuler</button>
            </div>
        </div>

    </div>

</div>

<script>

    $(document).ready(function () {

    $('.btn-bootstrap-dialog').click(function () {

        var url = $(this).data('url');
        var title = $(this).attr('title');
        $.get(url, function (data) {
            $('#bootstrapDialog').html(data);
            $('#bootstrapDialog').modal('show');
            $('#ModalPopUp').find('#myModalLabel').html($(this).attr("title"));
        });
    });

    $('.btn-primary').click(function (e) {
        e.preventDefault();
        var std = $(this).attr('id');
        $('#myModal1').modal({
            backdrop: 'static',
            keyboard: false
        })
        .on('click', '#confirmOk', function (e) {
            $.post('@Url.Action("ConfirmerFamille", "Interet")',
                {
                    IdFamille: $('#IdFamille').val()
                    });

            $('#myModal1 ').modal('hide');
            window.location.reload();

            });
     });
});

标签： jquerypostmodel-view-controller

解决方案

$('.btn-primary').on('click', function(e) {
  e.preventDefault();
  var std = this.id;
  
  //leave the modal part in the click logic
  $('#myModal1').modal({
      backdrop: 'static',
      keyboard: false
    });
});

//move this part outside of the click handler, on it's own
//so it only happens once
$('#myModal1').on('click', '#confirmOk', function(e) {
  $.post('@Url.Action("ConfirmerFamille", "Interet")', {
    IdFamille: $('#IdFamille').val()
  });

  $('#myModal1').modal('hide');
  window.location.reload();
});

推荐阅读