2016-07-11 2 views
1

Я пытаюсь сделать диалог с bootstrap modal, чтобы подтвердить удаление. Удаление работает хорошо, за исключением того, что он не получает данные, которые я выбираю, но он получает первые данные в порядке идентификатора из базы данных. Я новичок в программировании на стороне клиента, поэтому, если кто-то может мне помочь, было бы хорошо.Удалить Подтвердить с помощью Bootstrap modal в Asp.Net MVC

Код:

[HttpPost] 
public async Task<ActionResult> Delete(int id) 
{ 
    RepFilter repFilter = await db.RepFilters.FindAsync(id); 
    db.RepFilters.Remove(repFilter); 
    await db.SaveChangesAsync(); 
    return RedirectToAction("Index"); 
} 


(razor) 
@foreach (var item in Model) 
{ 
    using (Html.BeginForm("Delete", "RepFilters", new { id = item.ID })) 
    { 
    <tr> 
     <td>@index</td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Description) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Report.Description) 
     </td> 
     <td> 
      @Html.ActionLink("Edit", "Edit", new { id = item.ID }) | 
      @Html.ActionLink("Details", "Details", new { id = item.ID }) | 
      <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal">Delete</button> 
     <!-- Modal --> 
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
      <div class="modal-dialog modal-sm" role="document"> 
      <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title" id="myModalLabel">Confirm Delete</h4> 
      </div> 
      <div class="modal-body">Are you sure you want to delete: <span><b>@item.Description</b></span> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <input type="submit" value="Delete" class="btn btn-danger" /> 
      </div> 
      </div> 
      </div> 
     </div> 
     </td> 
     </tr> 

      } 
     } 
</tbody> 

Кнопка, которая открывает модальное получает правильный идентификатор, но модальный не делает!

Итак, как сделать модальным взять адекватные данные для удаления?

Я пытаюсь избежать написания JavaScript и использовать атрибуты данных, пока нет другого выбора

ответ

1

Модальное этот путь не имеет тот же идентификатор, независимо от того, какие данные вы пытаетесь удалить. Так просто добавить переменную, чтобы указать другой идентификатор для mmodal:

using (Html.BeginForm("Delete", "RepFilters", new { id = item.ID })) 
{ 
var myModal = "myModal" + item.ID; 
<tr> 
    <td>...</td> 
    <td>...</td> 
    <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#@myModal">Delete</button> 
    <!-- Modal --> 
<div class="modal fade" id="@myModal" tabindex="-1" role="dialog" data-keyboard="false" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog modal-sm"> 
    ...........<!--And the rest of the modal code--> 
0

Вы первым написать функцию удаления в JQuery .for displaye сообщение подтверждения вы можете использовать sweetalert и написать специальный файл для sweetalert ,

yo необходимо добавить refrence sweetalert css и script на странице вашего просмотра.

function Delete(id) { 
 
      var submitdelete=function(){ $.ajax({ 
 
        url: '@Url.Action("/mycontroller/Delete)', 
 
        type: 'Post', 
 
        data: { id: id } 
 
       }) 
 
       .done(function() { 
 
        $('#' + id).remove();//if you want to delete table row 
 
        msgBox.success("Success","Ok"); 
 
       });} 
 
      msgBox.okToContinue("warning", "Are you sure to delete ?", "warning", "ok","cancel", submitdelete); 
 

 
     }

Подтвердите диалоговое


 
var msgBox = { 
 
    message: { 
 
     settings: { 
 
      Title: "", 
 
      OkButtonText: "", 
 
      type:"info" 
 
     } 
 
    }, 
 
    okToContinue: function(title, text, type, okButtonText,closeButtonText, isConfirmDo) { 
 
     swal({ 
 
       title: title, 
 
       text: text, 
 
       type: type, 
 
       showCancelButton: true, 
 
       confirmButtonClass: 'btn-danger', 
 
       confirmButtonText: okButtonText, 
 
       cancelButtonText: closeButtonText, 
 
       closeOnConfirm: false, 
 
       closeOnCancel: true 
 
      }, 
 
      function(isConfirm) { 
 
       if (isConfirm) { 
 

 
        isConfirmDo(); 
 
       } 
 
      }); 
 
    }, 
 
    
 
    confirmToContinue: function(title, text, type, confirmButtonText, cancelButtonText, isConfirmDo, isNotConfirmDo, showLoader) { 
 
     if (!showLoader) { 
 
      showLoader = false; 
 
     } 
 

 
     swal({ 
 
       title: title, 
 
       text: text, 
 
       type: type, 
 
       showCancelButton: true, 
 
       confirmButtonColor: "#DD6B55", 
 
       confirmButtonText: confirmButtonText, 
 
       cancelButtonText: cancelButtonText, 
 
       closeOnConfirm: true, 
 
       closeOnCancel: true, 
 
       showLoaderOnConfirm: showLoader 
 

 
      }, 
 
      function(isConfirm) { 
 
       if (isConfirm) { 
 
        isConfirmDo(); 
 
       } 
 
      }); 
 
    } , 
 

 
    success: function (title, text,okButtontex) { 
 
     
 
     swal({ 
 
      title: title, 
 
      text: text, 
 
      type: "success", 
 
      confirmButtonText: okButtontex 
 
     }); 
 

 
    }, 
 
    info: function (title, text) { 
 

 
     swal({ 
 
      title: title, 
 
      text: text, 
 
      type: "info", 
 
      confirmButtonText: "OK" 
 
     }); 
 

 
    }, 
 
    warning: function (title, text) { 
 

 
     swal({ 
 
      title: title, 
 
      text: text, 
 
      type: "warning", 
 
      confirmButtonText: "OK" 
 
     }); 
 

 
    }, 
 
    error: function (title, text) { 
 

 
     swal({ 
 
      title: title, 
 
      text: text, 
 
      type: "error", 
 
      confirmButtonText: "OK" 
 
     }); 
 

 
    }, 
 

 
} 
 

 

 

+0

но в начальной загрузки документации он говорит, что я могу избежать JavaScript, и вместо того, чтобы использовать атрибуты данных. Это то, что я пытаюсь выяснить, какой атрибут передает нужные мне данные. – Arianit

1

Есть на самом деле довольно много вещей, которые вы можете обратиться с вашей точки зрения. Вы перемещаете элементы в своей модели и создаете отдельную форму (и модальную) для каждого элемента. Это, вероятно, не идеально, однако, если вы действительно хотите это сделать, вы можете добавить ссылку на идентификатор элемента в html для модального. Просто добавьте скрытый ввод и установите его значение item.id.

Однако я бы не рекомендовал этот подход. Я не уверен в ваших причинах, желая уклониться от JavaScript, но функциональность, которую вы хотите создать здесь, на самом деле довольно простая.

Смотрите этот пост: Confirm delete modal/dialog with Twitter bootstrap?

Edit:

@foreach (var item in Model) 
{  
<tr> 
    <td>@index</td> 
    <td> 
     @Html.DisplayFor(modelItem => item.Description) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.Report.Description) 
    </td> 
    <td> 
     @Html.ActionLink("Edit", "Edit", new { id = item.ID }) | 
     @Html.ActionLink("Details", "Details", new { id = item.ID }) | 
     <button type="button" class="btn btn-danger btn-sm" data-item-id="@item.ID" data-item-description="@item.Report.Description" data-toggle="modal" data-target="#confirm-delete">Delete</button>     
    </td> 
</tr>  
} 

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
<div class="modal-dialog modal-sm" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title" id="myModalLabel">Confirm Delete</h4> 
     </div> 
     <div class="modal-body"> 
      Are you sure you want to delete: <span class="description"></span> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <input type="submit" value="Delete" class="btn btn-danger" /> 
     </div> 
    </div> 
</div> 

<script> 
$('#confirm-delete').on('click', '.btn-ok', function(e) { 
    var $modalDiv = $(e.delegateTarget); 
    var id = $(this).data('itemId');   
    $modalDiv.addClass('loading'); 
    $.post('/RepFilters/Delete/' + id).then(function() { 
     $modalDiv.modal('hide').removeClass('loading'); 
    }); 
}); 
$('#confirm-delete').on('show.bs.modal', function(e) { 
    var data = $(e.relatedTarget).data(); 
    $('.description', this).text(data.itemDescription); 
    $('.btn-ok', this).data('itemId', data.itemId); 
}); 
</script> 
+0

Можете ли вы показать мне код, как в Asp.Net MVC, пожалуйста? – Arianit

+0

, так что вы говорите, что лучше использовать javascript, а не хорошую практику, чтобы избежать этого? – Arianit

+1

Нет, я бы не рекомендовал избегать использования JavaScript. – Steve

Смежные вопросы