MVC動作鏈接和引導模態提交

Question

我正在開發一個MVC 5 web應用程序。在我的一個Razor Views中，我有一個表格，它可以分出幾行數據。在每一行數據旁邊都有一個刪除按鈕。當用戶點擊刪除按鈕時，我想要有Bootstrap Modal彈出窗口，並要求用戶確認刪除。

@foreach (var item in Model.Data) { 
<tr> 
<td>...</td> 
<td>@Html.ActionLink("Delete", "Delete", new { id = item.ID }, new { @class = "btn btn-danger btn-xs", data_toggle = "modal", data_target = "#myModal" })</td> 
</tr> 
} 

正因爲如此，當用戶點擊刪除按鈕的模態精細彈出，但我似乎無法得到的ActionLink的參數的ID傳遞給確認按鈕我的模態中，使其然後將被髮送到我的控制器中的刪除操作。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h4 class="modal-title" id="myModalLabel">Delete Nomination</h4> 
     </div> 
     <div class="modal-body"> 
      Are you sure you wish to delete this nomination? 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
      <button type="button" id="mySubmit" class="btn btn-primary">Confirm</button> 
     </div> 
     </div> 
     </div> 
</div> 

任何人都可以請幫忙嗎？

謝謝。

Answer 1

<script type="text/javascript"> 

    //Everytime we press delete in the table row 
    $('.delete').click(function(e) { 
     e.preventDefault(); 

     //Update the item to delete id so our model knows which one to delete 
     var id = $(this).data('id'); 
     $('#item-to-delete').val(id); 

    }); 


    //Everytime we press sumbit on the modal form... 
    $('#mySubmit').click(function() { 

     //Get the id to delete from the hidden field 
     var id = $('#item-to-delete').val(); 


     //Call our delete actionresult and pass over this id 
     $.post(@Url.Action("Delete", "Delete"), { id : id } , function (data) { 

      alert("Deleted"); 

     }); 


    }); 

</script> 

和你的HTML ...

@Html.Hidden("item-to-delete", "", new { @id = "item-to-delete"}) 
@foreach (var item in Model.Data) { 
<tr> 
    <td>...</td> 

    <td><a href="" class="btn btn-danger btn-xs delete" data-toggle= "modal" data-target="#myModal" data-id="@item.id">Delete</a></td> 

</tr> 
} 

你的控制器動作我認爲是這樣的......

public ActionResult Delete(Guid id) 
{ 


} 

Answer 2

你需要把一個空之後的第二刪除然後它應該可以工作，但是你仍然會遇到這個問題，因爲它會嘗試做的事情是在你的模式中打開頁面，實現你想要做的最好的方法就是對服務器和成功者進行ajax調用ss將數據帶回到您的模式的div中