Question

我有以下代码，用于使用Bootstrap模式进行确认对话框。我有两种模态形式。第一种形式 - 可编辑，用于添加，编辑和删除记录。当我尝试删除记录时，我正在使用第二个确认模式“Ok”和“Cancel”。我需要在删除和阻止第一个表单之前检查是否没有选择项目。

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

我的模态代码：

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

使用Bootstrap通过Confirm Modal删除操作

1 个答案: