Блог

У меня будет этот код в index.cshtml

 <a href='@Url.Action("Create", "ShippingMethods")' data-toggle="modal" data-target=".modal" data-wrap="modal-lg"><i class="fa fa-edit fa-fw"></i> Edit</a>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!--Content Inside Here-->
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
  

И мой JQUERY:

 'use strict';

(function ($) {
     /* Ajax Form Submit for Modal */
    var ajaxFormSubmit = function () {

        var $form = $(this);

        $.ajax({
            url: $form.attr('action'),
            type: $form.attr('method'),
            data: $form.serialize(),
            beforeSend: function () {
                $('.spinner').addClass('fa fa-spinner fa-pulse fa-2x fa-fw');
            }
        })
        .done(function (data) {
            var $target = $($form.attr('data-target'));

            if (data.status == true) {
                $('.modal').modal('hide');
                location.reload();
            } else {
                $target.replaceWith(data);
            }
        });

        return false;
    }

    /* Empty Modal Content on Hide */
    $('.modal').on('hide.bs.modal', function (e) {
        $('.modal-content').empty();
        $('.modal-dialog').removeClass('modal-lg modal-sm');
    });

    $('.ShippingMethods')
        .on('click', 'a[data-toggle="modal"]', function () { // show modal
            $('.modal-dialog').addClass($(this).attr('data-wrap'));
            $('.modal-content').load($(this).attr('href'));
        })

        .on('submit', '.ajaxForm', ajaxFormSubmit); // modal ajax form submit

})(jQuery);
  

Мне было интересно, почему метод в контроллере вызывается дважды. Когда на самом деле я щелкнул по нему только один раз. Эта функция вызывалась дважды каждый раз, когда я нажимал на кнопку.

  public ActionResult Create()
        {
            var whs = new PluginManager().GetAllData();
            ViewBag.PluginId = new SelectList(whs, "PluginId", "Description");
            return View();
        }
  

У кого-нибудь есть идеи, почему он ведет себя странно? Я не могу понять, в чем здесь проблема? Заранее спасибо за помощь и советы 🙂

Вы не препятствуете поведению ссылки по умолчанию. У вас есть прослушиватель onclick, который выполняет вызов с использованием jQuery load , но после выполнения прослушивателя click ссылка перейдет к своему поведению по умолчанию, которое заключается в переходе по ссылке в href , и это ваш второй вызов.

Примите событие в качестве параметра для вашего слушателя и вызовите preventDefault его, чтобы остановить переход вашего браузера по ссылке.

 .on('click', 'a[data-toggle="modal"]', function (e) {
        e.preventDefault();
        $('.modal-dialog').addClass($(this).attr('data-wrap'));
        $('.modal-content').load($(this).attr('href'));
    })
  

 <a data-href="@Url.Action("Create", "ShippingMethods")"
  data-toggle="modal" 
  data-target=".modal" 
  data-wrap="modal-lg"><i class="fa fa-edit fa-fw"></i> Edit</a>

.on('click', 'a[data-toggle="modal"]', function () {
    $('.modal-dialog').addClass($(this).data('wrap'));
    $('.modal-content').load($(this).data('href'));
})