jquery - MVC 将数据传入和传出 Bootstrap Modal

Question

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

这是我到目前为止所拥有的:

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>

到目前为止，代码“有效”。网络网格按其应有的方式显示，单击链接将调用 javascript 函数，并提供所有正确的参数。还会显示模式弹出框，当我单击模式弹出窗口中的“Ja”链接时，将调用我的 Controller 函数。

我的问题是:当用户单击模态弹出窗口中的“Ja”链接时，如何获取发送到 Javascript 函数的三个参数发送到我的 Controller 函数(“AdminCards”上的“DeleteCard”)？

Answer 1

我想你可以使用ajax来实现这个

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

然后你就可以进行ajax调用并在正文中成功加载你的 View 。它会是这样的:

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

Javascript 函数，假设您将其放置在模型的相同部分 View 中(如果您将其放置在那里，我认为您仍然可以使用 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);