twitter-bootstrap MVC Actionlink & Bootstrap Modal 提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23831745/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
MVC Actionlink & Bootstrap Modal Submit
提问by tcode
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.
我正在开发一个 MVC 5 Web 应用程序。在我的一个 Razor 视图中，我有一个表格，它吐出几行数据。每行数据旁边都有一个删除按钮。当用户单击删除按钮时，我希望弹出 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>
}
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.
事实上，当用户单击删除按钮时，模态弹出很好，但我似乎无法在 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">×</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>
Can anyone please help?
有人可以帮忙吗？
Thanks.
谢谢。
采纳答案by heymega
<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>
and your html...
还有你的 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)
{
}
回答by Clarence Wilson
You need to put a null after the second Delete then it should work but you will still have an issue with this because what it's going to try and do is open the page inside your modal the best way to achieve what you want to do is to do an ajax call to the server and in the success bring back the data into that div that is around your modal
您需要在第二次删除之后放置一个空值，然后它应该可以工作，但您仍然会遇到问题，因为它将尝试和做的是在您的模态中打开页面，实现您想要做的最佳方法是对服务器进行 ajax 调用，并成功将数据带回模态周围的那个 div
