Подтверждение Диалог с Bootstrap/JQuery/ASP.MVC

Question

У меня есть простая таблица с записями, и каждый из них имеет BTN с атрибутом данных ид для запуска диалога подтверждения:

@foreach (var dog in Model) 
     { 
      <tr> 
       <td>@dog.Name</td> 
       <td>@dog.Age</td> 
       <td><a href="#" data-id="@dog.Id" class="btn btn-danger deleteBtn">Delete</a></td> 
      </tr> 
     } 

После нажатия кнопки удаления BTN , этот код работает:

$('.deleteBtn').on('click', function() { 
      $.ajax({ 
       url: '@Url.Action("DeleteConfirm", "Home")', 
       data: { 
        id : $(this).attr('data-id') 
       }, 
       success: function(data) 
       { 
        $('#myModal').empty().html(data).modal('show'); 
       } 
      }); 
     }); 

Как вы можете видеть, его запрос Ajax к моему действию в HomeController. Она возвращает PartialView, который загружается в мой Bootstrap диалог:

<div class="modal fade" id="myModal"> 
</div> 

После показа диалога, пользователь может нажать, чтобы подтвердить удаление строки с помощью кнопки с классом saveBtn. То, что происходит после того, как я нажимаю его:

$('#myModal').on('click', '.saveBtn', function() { 
      var numer = $(this).attr('data-id'); 

      $.ajax({ 
       url: '@Url.Action("DeleteDog", "Home")', 
       type: 'POST', 
       dataType: 'JSON', 
       data: { 
        id: numer 
       }, 
       success: function (data) 
       { 
        if (data = 'true') 
         $('a[data-id=' + numer + ']').closest('tr').remove(); 
       } 
      }); 
     }); 

Так как вы можете видеть, что есть другой Ajax POST (на этот раз) запрос, чтобы удалить строку.

Итак, вот мой вопрос. Является ли этот подход хорошей практикой? Я не уверен, потому что для удаления строки мне нужно отправить 2 запроса ajax (чтобы загрузить диалог подтверждения и удалить после подтверждения). Может ли кто-нибудь испытать комментарий разработчика к этому коду и сказать, делает ли он это хорошим или плохим? Буду признателен.

Answer 1

Это всегда хорошая идея, чтобы бросить вызов, может ли вам более эффективно делать то (как вы здесь.) Итак, давайте подумаем об этом ...

Вопрос:

ли это хороший подход к отправке на два запроса ajax - один для загрузки частичного представления, а второй для отправки запроса на удаление из частичного - для одного «действия пользователя»?

Ответ:

Может быть.

Почему?

На основании вашего примера, если ваша цель состоит в том, чтобы просто подтвердить с пользователем, хотят ли они «Удалить идентификатор собаки: foo?» Вы можете абсолютно это сделать, не совершая поездки на сервер для частичного просмотра. Предположительно, в вашем первом вызове ajax - $(this).attr('data-id'); - это идентификатор собаки. У вас уже есть это!

В большинстве случаев, когда вы делаете запрос get с идентификатором, например /dogs/id?='foo', вы используете foo для доступа к дополнительной информации об объекте из постоянного хранилища данных. Например, владельцы собак, похожие породы собак, последний визит к ветеринару и т. Д.

Если дополнительная информация о собаке (владельцы, другие собаки, ветеринар) является важной частью принятия решения о том, удалите собакуИесть веская причина не загружать ее, когда страница загружается по существу, тогда вполне разумно выпустить два вызова ajax.

Возможно также иметь смысл выпустить два вызова ajax, чтобы получить частичный вид html, даже если вам не нужны дополнительные данные «собаки», если вы просто не хотите, чтобы страница «родителя» была большой (следовательно, замедляет время загрузки).

В конечном счете, хотя вы не извлекаете дополнительные данные, и нет особых причин для загрузки дополнительного html, вероятно, лучше всего в этом случае просто обновить модальное диалоговое окно с помощью javascript/JQuery:

Example fiddle