twitter-bootstrap 在MVC中使用ActionLink打开Modal并传递参数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21113950/
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
Use ActionLink to open Modal and pass parameter in MVC
提问by user2906420
I am trying to open my bootstrap modal on the same page by clicking on the ActionLink and passing a parameter as below:
我试图通过单击 ActionLink 并传递如下参数在同一页面上打开我的引导模式：
@foreach (Items item in Model)
{
@Html.ActionLink("Download", "#", new { data-id = '@item.Name' } )
}
//Modal
<div id="dModal" class="modal hide fade" aria-hidden="true">
<div class="modal-body">
@using (Html.BeginForm("getCSV", "Download", new { filename = data-id }, FormMethod.Post, null))
{
<button id="btnCSV" type="submit">Download CSV</button>
}
//other options for excel, word etc
</div>
</div>
In the ActionLink I have kept actionName parameter to #, this is because the modal is on the same page and the action will be decided when the user selects the options in the modal. The reason for not calling the download action method directly is because the user has options to download in various formats excel, csv etc.
在 ActionLink 中，我将 actionName 参数保留为 #，这是因为模态在同一页面上，当用户选择模态中的选项时将决定操作。之所以不直接调用下载动作方法，是因为用户可以选择下载各种格式的excel、csv等。
回答by NesNej Otto
This is how I show a bootstrap modal form using an html.actionlink
这就是我使用 html.actionlink 显示引导模式表单的方式
@Html.ActionLink("ModalPopUp", "#", new { id = parameter }, new { @data_toggle = "modal", @data_target = "#YourModalId"})
回答by Maxim Gershkovich
Opening a bootstrap modal dialog doesn't require you to use an ActionLinkand as Adriano mentions above you're confusing client and server code.
打开引导模式对话框不需要您使用ActionLinkand 正如阿德里亚诺上面提到的那样，您混淆了客户端和服务器代码。
A bootstrap modal can be manipulated using the following options as described in this question.
可以使用本问题中所述的以下选项操作引导模式。
$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');
and in your case your code should look something like this.
在你的情况下，你的代码应该是这样的。
@foreach (Items item in Model)
{
<a href="javascript:void(0);" data-id="@item.Name" class="OpenDialog">Download</a>
}
$(function () {
$(".OpenDialog").click(function (e) {
$('#myModal').modal('show');
});
});
In terms of passing data to the modal that's really a separate question but it is covered here.
就将数据传递给模态而言，这确实是一个单独的问题，但在此处进行了介绍。
Basically you can handle the click event and put the value in a visible or hidden field (whichever is appropriate).
基本上你可以处理点击事件并将值放在可见或隐藏字段中（以适当的为准）。
So you might change the above code to something like this
所以你可以把上面的代码改成这样
$(function () {
$(".OpenDialog").click(function (e) {
$("#myModal #id").val($(this).data("id"));
$("#myModal").modal('show');
});
});
and now you have the value stored in your modal which can be accessed as required.
现在您将值存储在您的模态中，可以根据需要访问该值。
