使用 Bootstrap 通过 Confirm Modal 删除操作

Question

我有以下代码用于使用 Bootstrap 模式制作确认对话框。我有两种模态形式。第一种形式 - 可编辑，用于添加、编辑和删除记录。当我试图删除一条记录时，我正在使用带有“确定”和“取消”的第二个确认模式。在删除和阻止第一个表单之前，我需要检查是否未选择项目。

我正在尝试实现删除行确认模式。我不知道该怎么做。

我的模态代码：

<div class="modal fade hide" id="modalConfirm">
        <div class="modal-header">
            <button type="button" class="close" data-bind="click: function () { closeFrmModel($('#modalConfirm')) }" aria-hidden="true">&times;</button>
            <h3>@Resources.Warning</h3>
        </div>
        <div class="modal-body" style="text-align: center">
            <span>@Resources.DelQuestion</span>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn btn-primary" id="modalOk" aria-hidden="true">@Resources.ButtonOK</a>
            <a href="#" class="btn" data-bind="click: function () { closeFrmModel($('#modalConfirm')) }">@Resources.ButtonCancel</a>
        </div>
    </div>

我的下拉代码：

<div class="tab-pane" id="pane-triggers">    
                    <div class="navbar-text">
                        <div class="btn-group pull-right">
                            <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Activity&nbsp;<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#" data-bind="click: function () { showTrigger() }"><i class="icon-plus"></i>&nbsp;@Resources.ButtonAdd</a></li>
                                <li><a href="#" data-bind="click: function () { showEditTrigger() }"><i class="icon-edit"></i>&nbsp;@Resources.ButtonEdit</a></li>
                                <li><a href="#modalConfirm" data-toggle="modal" aria-hidden="true" data-bind="click: function () { deletedTrigger() }"><i class="icon-trash"></i>&nbsp;@Resources.ButtonDel</a></li>                                   
                            </ul>
                        </div>
                    </div>

Answer 1

有不同的方法可以解决这个问题。一个问题是您希望将参数传递给将提醒用户的函数（例如姓名）。

<a class="btn btn-danger deleteBtn" 
    data-delete-arguments='{"Id":"@model.Id", "param2":"@model.param2"}' 
    data-delete-action="/YourControler/YourAction" 
    data-delete-message="Are you sure you wish to delete..." 
    href="#" 
    rel="tooltip" 
    title="Delete">
    <i class="icon-trash icon-white icon-remove"></i>
    Delete
</a>

这样你就拥有了所有你需要的数据标签，然后可以用一个 js 函数解析出来。只需将其添加到某处，您就可以设置了。在我的例子中，该函数调用一个删除记录然后返回部分视图的操作。

$('.deleteBtn').click(function (event) {
    $this = $(this);

    var modelArguments = $this.data("deleteArguments");
    var deleteMessage = $this.data("deleteMessage");
    var action = $this.data("deleteAction");

    bootbox.confirm(deleteMessage, function (result) {
        if (result) {
            $.ajax({
                type: "POST",
                url: action,
                data: modelArguments,
                success: function (html) {
                    $('#gridcontainer').html(html);
                }
            });
        }
    });

});

请注意，如果删除按钮是部分视图的一部分，则当它被替换为 ajax 时，将不会附加事件事件。它只会在第一次工作，因此您可能需要重新绑定它。

在这种情况下只需将上面的js代码放在一个函数中

function rebindDeleteButton() {
    ...
}

并在局部视图中调用该函数。

如果您在 c# 中执行此操作，这是一个示例

[HttpPost]
public ActionResult YourAction(int Id, string param2)
{
    //your delete code
    return PartialView("YourPartialView");
}