twitter-bootstrap MVC 将数据传入和传出 Bootstrap Modal
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25844456/
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 Passing data to and from Bootstrap Modal
提问by SorenA
I have an MVC 5 page which contains a WebGrid and a Bootstrap modal popup. In the WebGrid each row has a link, and when the user click on the link, I want to display the modal popup, as well as send some data to the popup which I can then send to a function on my Controller page.
我有一个 MVC 5 页面，其中包含一个 WebGrid 和一个 Bootstrap 模式弹出窗口。在 WebGrid 中，每一行都有一个链接，当用户单击链接时，我想显示模式弹出窗口，并将一些数据发送到弹出窗口，然后我可以将这些数据发送到我的控制器页面上的函数。
This is what I have so far:
这是我到目前为止：
WebGrid:
网络网格：
@grid.GetHtml(
tableStyle: "table",
mode: WebGridPagerModes.All,
columns: new[] {
grid.Column(header: "", columnName: "", format: (item) => MvcHtmlString.Create(string.Format("<a href='#' onclick=\"DeleteCardAskToConfirm('" + item.CardId + "','" + item.licenseplateno+"','" + item.cardno +"');\" return false;'>Slet</a>"))),
grid.Column(format: @<input type="hidden" name="CardId" value="CardId" />),
grid.Column(format: @<input type="hidden" name="CustomerId" value="CustomerId" />),
grid.Column("cardno", "Kort nr." ),
grid.Column("licenseplateno", "Nummerplade" ),
grid.Column("createddate", "Oprettet" ),
grid.Column("inactivedate", "Deaktiveret den" ),
grid.Column(format: @<input type="hidden" name="pno" value="Pno" /> )
}
)
)
Model popup:
模型弹出：
<div class="modal" id="modalDeleteCardQuestion" tabindex="-1" role="dialog" data-id="" aria-labelledby="ModelDeleteCardQuestionLabel" 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">Slet kort?</h4>
</div>
<div class="modal-body">
<div class="alert alert-info">
<div class="header">?nsker du at deaktivere kort nr. <label id="Testlbl"></label>?</div>
Hvis du deaktivere dette kort, vil det ikke l?ngere kunne bruges ved indk?rsel p? genbrugspladser.<br/>
Kortet kan senere genaktiveres og tilknyttes til en ny nummerplade.
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal" aria-hidden="true">Nej</button>
<input type="button" onclick="window.location='@Url.Action("DeleteCard", "AdminCards", new { })'" value="Ja" class="btn btn-link" />
</div>
</div>
</div>
Java script which handles the WebGrid link click and displays the modal
处理 WebGrid 链接单击并显示模式的 Java 脚本
<script type="text/javascript">
function DeleteCardAskToConfirm(cardid, plade, cardno) {
//$('#<%=cardno.ClientID%>').text(cardno);
$('#Testlbl').html(cardno);
$('#modalDeleteCardQuestion').modal();
};
</script>
So far the code "works". The webgrid is shown as it should and clicking the link calls the javascript function, with all the correct parameters. The modal popup box is also displayed and when I click the "Ja" link in the modal popup, my Controller function is called.
到目前为止，代码“有效”。webgrid 显示为它应有的样子，单击该链接将调用带有所有正确参数的 javascript 函数。还会显示模态弹出框，当我单击模态弹出窗口中的“Ja”链接时，会调用我的控制器函数。
My problem is: How do I get the three parameters I send to my Javascript function send to my Controller function ("DeleteCard" on "AdminCards") when the user clicks the "Ja" link in the Modal popup??
我的问题是：当用户单击模态弹出窗口中的“Ja”链接时，如何将发送到我的 Javascript 函数的三个参数发送到我的控制器函数（“AdminCards”上的“DeleteCard”）？
采纳答案by mitomed
I was thinking you can use ajax for this
我在想你可以为此使用ajax
First you can get rid of the onclick and use unobstrusive javascript. Yo would probably need to store in hidden fields in your partial view the values you need to send (it that's possible for you and means no risk).
首先，您可以摆脱 onclick 并使用不显眼的 javascript。您可能需要在部分视图中的隐藏字段中存储您需要发送的值（这对您来说是可能的，并且意味着没有风险）。
Then you can just make an ajax call and load your view in success in the body. It would be something like this:
然后，您可以进行 ajax 调用并在正文中成功加载您的视图。它会是这样的：
<input type="button" id="jaButton" value="Ja" class="btn btn-link" />
Javascript function, assuming you're placing it in the same partial view for your model (if you place it there I think you can still use Url.Action otherwise you have to probably pass it to you js file)
Javascript 函数，假设您将其放置在模型的相同部分视图中（如果您将其放置在那里，我认为您仍然可以使用 Url.Action 否则您可能必须将其传递给您的 js 文件）
$(document).ready(function() {
$('#jaButton').click(function() {
$.ajax({
url: '@Url.Action("DeleteCard", "AdminCards")',
type: 'GET',
data: { cardId: $('#cardId').val() } //you should build your data here as you need
}).success(function(result) {
$("body").html(result);
});
});
});
You can obviously use .get as a shorthand if you prefer.
如果您愿意，显然可以使用 .get 作为速记。
alternatively you can use instead of the ajax call this code inside the .click
或者，您可以在 .click 中使用而不是 ajax 调用此代码
var cardId = $('#cardId').val(); // and so on getting the values using jquery
window.location = '@Url.Action("DeleteCard", "AdminCards")' + '?cardId=' + encodeURIComponent(cardId); //and the same with the rest of them
Even along the same lines of the latest code you can play with replace in this way (instead of using the last line, swap it with this one)
即使在最新代码的同一行中，您也可以以这种方式使用替换（而不是使用最后一行，将其与这一行交换）
window.location = "@Url.Action("DeleteCard", "AdminCards", new {cardId = -1 })".replace("-1", cardId);
