MVC 锚标记和引导模型删除

Question

我正在开发一个 MVC 5 Web 应用程序。在我的一个 Razor 视图中，我有一个表格，它吐出几行数据。每行数据旁边都有一个删除按钮。当用户单击删除按钮时，我希望弹出 Bootstrap Modal 并要求用户确认删除。

  <table>
    <tr>
        <th>
            @Html.DisplayName("Country")
        </th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>

            <td>
                @Html.DisplayFor(modelItem => item.Country)
            </td>

            <td>
                @Html.ActionLink("Edit", "edit", new { id = item.ContactID }) |
                <a class="btn btn-danger btn-xs" data-id="@item.ContactID" data-toggle="modal" data-target="#myModal" id="delete"><i class="glyphicon glyphicon-trash"></i></a>
            </td>
        </tr>
    }    
  </table>

事实上，当用户单击“删除”按钮时，Modal 弹出正常，但我似乎无法将锚标记中的 ID 传递给我的 Modal 中的“确认”按钮，以便随后将其发送到我的控制器中的删除操作。

 <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-body">
                <input type="hidden" id="delete" />
                Are you sure you wish to delete this Customer?
            </div> 

            <div class="modal-footer">

                <button type="button" id="mySubmit" class="btn btn-danger">Ok</button>

                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>

        </div>
    </div>
</div>

当我单击引导程序的删除按钮时，什么也没有发生，我无法删除记录

Answer 1

你可以尝试如下：

$(document).on("click", ".btn-xs", function () {
     var Id = $(this).data('id');
     $(".modal-body #hdninput").val(Id);
});

像这样在 modal-body 中保留一个隐藏字段

<input type="hidden" id="hdninput"/>

如果您有时间，请使用 Impromptu 插件

编辑：要将特定 id 分配给您的锚标记或操作链接，您可以执行以下操作：

假设：你的模态，比如exampleModal 有一个actionlink/anchor tag 在modal-footer 中删除，其ID 是btnDelete

$('#exampleModal').on('show.bs.modal', function () {
  var hiddenID = $("#hdninput").val()
  var modal = $(this)
  modal.find('.modal-footer #btnDelete').attr('href','Customer/delete?id='+hiddenID); //This will attach the href to your actionlink or anchortag in modal.
});

编辑 2 - 另外，我建议修改以下部分代码并从中删除 href，因为您现在正在删除，一旦用户确认并将 href 附加到锚点它存在于模态中。

<a href="~/Customer/delete" class="btn btn-danger btn-xs" data-id="@item.ContactID" data-toggle="modal" data-target="#myModal">
    <i class="glyphicon glyphicon-trash"></i> 
    Delete
</a>

到

<a class="btn btn-danger btn-xs" data-id="@item.ContactID" data-toggle="modal" data-target="#myModal">
    <i class="glyphicon glyphicon-trash"></i> 
    Delete
</a>

编辑 3 -

$(document).on("click", ".btn-xs", function () {
      var Id = $(this).data('id');
      console.log(Id);//Check whether Id has been logged in your console.
      $(".modal-body #delete").val(Id);
      console.log($(".modal-body #delete").val())//check whether your hidden field has got the value ID
});

将页脚中的button 更改为anchor，如下所示

<a href="#" id="mySubmit" class="btn btn-danger">Ok</a>

下面的代码改变了模态按钮的href：

$('#myModal').on('show.bs.modal', function () {
      var hiddenID = $("#delete").val()
      var modal = $(this)
      modal.find('.modal-footer #mySubmit').attr('href','Customer/delete?id='+hiddenID); //This will attach the href to your actionlink or anchortag in modal.
    });