MVC 在 Bootstrap Modal 之间传递数据

Question

我有一个 MVC 5 页面，其中包含一个 WebGrid 和一个 Bootstrap 模式弹出窗口。在 WebGrid 中，每一行都有一个链接，当用户单击链接时，我想显示模式弹出窗口，并将一些数据发送到弹出窗口，然后我可以将这些数据发送到我的控制器页面上的函数。

这是我目前所拥有的：

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" /> )
 }

)

模型弹出窗口：

<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">&times;</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>

处理 WebGrid 链接单击并显示模式的 Java 脚本

<script type="text/javascript">
    function DeleteCardAskToConfirm(cardid, plade, cardno) {
        //$('#<%=cardno.ClientID%>').text(cardno);
        $('#Testlbl').html(cardno);

        $('#modalDeleteCardQuestion').modal();

    };
</script>

到目前为止，代码“有效”。 webgrid 按原样显示，单击链接调用 javascript 函数，并带有所有正确的参数。模态弹出框也会显示，当我单击模态弹出窗口中的“Ja”链接时，会调用我的 Controller 函数。

我的问题是：当用户单击 Modal 弹出窗口中的“Ja”链接时，如何将我发送到我的 Javascript 函数的三个参数发送到我的控制器函数（“AdminCards”上的“DeleteCard”）？？

Answer 1

我在想你可以为此使用 ajax

首先，您可以摆脱 onclick 并使用不显眼的 javascript。你可能需要在部分视图中的隐藏字段中存储你需要发送的值（这对你来说是可能的并且意味着没有风险）。

然后您可以进行 ajax 调用并在正文中成功加载您的视图。应该是这样的：

<input type="button" id="jaButton" value="Ja" class="btn btn-link" />

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);
        });
    });
});

如果您愿意，显然可以使用 .get 作为速记。

或者，您可以使用 .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

即使在最新代码的同一行中，您也可以通过这种方式使用替换（而不是使用最后一行，而是将其与这一行交换）

window.location = "@Url.Action("DeleteCard", "AdminCards", new {cardId = -1 })".replace("-1", cardId);