Question

我正在开发一个MVC 5 Web应用程序。在我的一个Razor Views中，我有一个表格可以输出几行数据。每行数据旁边都有一个删除按钮。当用户单击删除按钮时，我想要弹出Bootstrap模式，并要求用户确认删除。

  <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以传递到我的模态中的“确认”按钮，以便随后将其发送到我控制器中的删除操作。

 <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>

当我单击bootstrap的Delete按钮时，没有任何事情发生，我无法删除记录

Answer 1

您可以尝试如下：

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

将隐藏字段保存在模态体中，如下所示

<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，因为您现在正在删除用户确认并附加{{1} }到模态中存在的锚。

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>

编辑3 -

<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>

将页脚中的$(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

以下代码更改了模式中按钮的href：

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

MVC锚标签和bootstrap模态删除

1 个答案: