JQuery называется метод в контроллере (MVC) дважды

Question

Я этот код в 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(); 
     } 

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

Answer 1

Вы не мешаете поведению по умолчанию. У вас есть прослушиватель onclick, который делает вызов с использованием jQuery's load, но после того, как прослушиватель кликов был выполнен, ссылка перейдет к по умолчанию, которая должна следовать по ссылке в 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')); 
    }) 

---

UPDATE:
Я понимаю, что собственный слушатель Bootstrap к data-toggle="modal" предотвратит действие по умолчанию для вас, так что нет необходимости делать это, как это было предложено в моем inital ответ.

Что вы видите здесь, однако, это Bootstrap, автоматически интерпретирующий значение в href как параметр remote, и загружает контент для вас.

Обратите внимание, что remote устарел в 3.3 и удален в Bootstrap 4. Если вы полагаетесь на этот метод, обратите внимание, что он перестанет работать, если вы обновите Bootstrap до более новой версии.

Моим советом было бы вручную контролировать, когда, где и как загружается ваш контент. Держите свой $('.modal-content').load звонок там, но так как Bootstrap угон href, вам нужно использовать что-то еще, например data-href.

Также: Я отмечаю, что вы используете attr('data-...') для доступа к атрибутам данных. Обратите внимание, что JQuery также подвергает их через data('...'):

<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')); 
})