MVC Actionlink& Bootstrap Modal提交 [英] MVC Actionlink & Bootstrap Modal Submit

问题描述

我正在开发MVC 5 Web应用程序.在一个剃刀视图"中，我有一张桌子，它吐出几行数据.每行数据旁边都有一个删除"按钮.当用户单击删除按钮时，我要弹出Bootstrap Modal并要求用户确认删除.

I'm developing an MVC 5 web application. Within one of my Razor Views I have a table which spits outs several rows of data. Beside each row of data is a Delete button. When the user clicks the delete button I want to have the Bootstrap Modal popup and ask the user to confirm their deletion.

@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传递给模态内的确认"按钮，以便随后将其发送到我控制器中的删除操作.

As it is, when the user clicks the Delete button the Modal pops up fine, but I can't seem to get the ID in the Actionlink parameter to pass to the Confirm button within my Modal so that it will then be sent to the delete action in my controller.

<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>

任何人都可以帮忙吗?

谢谢.

推荐答案

<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 ...

and your 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>
}

我认为您的控制器动作是这样的...

Your controller action I assume is something like this...

public ActionResult Delete(Guid id)
{


}

这篇关于MVC Actionlink& Bootstrap Modal提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！