如何创建 C# 删除确认框 [重复]

Question

当用户单击删除按钮时，我需要添加一个删除确认框。我该怎么做？在运行删除代码之前在 html 页面上或在我的 Controller 调用中？或者引导程序可以做到吗？我迷路了。

这是我的按钮元素和我的控制器操作。

 <div class="row">
    <div class="col-md-6">
        <input type="submit" value="Save" class="btn btn-lg btn-primary" />
    </div>
    @if (!Model.IsNew)
    {
    <div class="col-md-6">
        <a href="@(Url.Action<UnitsController>(c => c.Delete(Model.Entity.Id)))" class="btn btn-primary col-md-offset-9 col-md-3 ">Delete</a>
    </div>
    }
</div>

控制器

public ActionResult Delete(int id)
{
    var record = DataAccessService.Get<Unit>(id);

    DataAccessService.Delete(record);
    DataAccessService.Save();
    return RedirectToAction<UnitsController>(u => u.Index());
}

Answer 1

您可以使用 Javascript 的 confirm，它将在浏览器上显示消息后返回 bool 值，或者使用 css 引导程序，因为您的应用程序中有它。

确认Javascript

只需在a 标签上的onclick 事件上添加确认。示例：

<a href="@(Url.Action<UnitsController>(c => c.Delete(Model.Entity.Id)))" 
   class="btn btn-primary col-md-offset-9 col-md-3" 
   onclick="return confirm('Are you sure you want to delete this item?')">Delete</a>

CSS 引导

由于您使用的是 css 引导程序，因此您可以毫无问题地尝试它。用于示例。

定义模态窗口的css标签

<div id="deleteConfirm" class="modal">
    <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">Delete Entity</h4>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this item?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button id="deleteButton" type="button" class="btn btn-primary">Confirm</button>
            </div>
        </div>
    </div>
</div>

为deleteButton定义点击事件以发出ajax请求并将其删除。

 $("#deleteButton").on("click", function(e) {
    $.ajax({
        url: "@Url.Action("Delete", "Controller")",
        method: "POST",
        data: { id: @Model.Id }
    })
    .done(function(data) {
        // hide the modal
        $("#deleteConfirm").modal("hide");
        if (data.success) {
            // ok
        } else {
            // show errors
        }
    });
});

最后，在确认删除的按钮上显示模式。示例：

<a href="@(Url.Action<UnitsController>(c => c.Delete(Model.Entity.Id)))" 
   class="btn btn-primary col-md-offset-9 col-md-3" 
   id="deleteConfirmButton">Delete</a>

并设置事件。

$("#deleteConfirmButton").on("click", function() {
   $("#deleteConfirm").modal("show"); 
});

Answer 2

您可以将 OnClick 添加到您的按钮中：

 <div class="row">
    <div class="col-md-6">
        <input type="submit" value="Save" class="btn btn-lg btn-primary" OnClick="return confirm('¿Are you sure you want to delete this item?');" />
    </div>
    @if (!Model.IsNew)
    {
    <div class="col-md-6">
        <a href="@(Url.Action<UnitsController>(c => c.Delete(Model.Entity.Id)))" class="btn btn-primary col-md-offset-9 col-md-3 ">Delete</a>
    </div>
    }
</div>