如何为 asp.net 核心中的删除按钮应用 sweetalert 或引导模式

Posted 2023-05-08

【中文标题】如何为 asp.net 核心中的删除按钮应用 sweetalert 或引导模式

【英文标题】：How to apply sweetalert or bootstrap modal for delete button in asp.net core

【发布时间】：2021-10-09 22:06:18

【问题描述】：

下面的代码通过一个简单的 onclick 函数工作。但我想换一个弹窗。

<a class="" asp-area="admin" asp-controller="Tests" asp-action="Delete" asp-route-id="@item.Id" onclick="return confirm('Are you sure you want to delete: @item.Name?')"> Delete </a>

【参考方案1】：

这样做：

<button class="btn text-light btn-primary m-3" data-toggle="modal" data-target="#deletemodal@(item.Id)">Delete</button>
                        <div class="modal fade" id="deletemodal@(item.Id)" tabindex="-1" role="dialog" aria-labelledby="#deletemodal@(item.Id)" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header justify-content-center">
                                        <h5 class="modal-title text-center" id="deletemodalLabel">Delete test</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <h1 class="text-info">
                                            <svg xmlns="http://www.w3.org/2000/svg"   fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
                                                <path class="text-danger" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                                            </svg>
                                        </h1>
                                        <p class="lead">Are you sure you want to delete <span class="text-warning">@item.Id</span></p>
                                        <p class="text-info">All item information will be deleted</p>
                                    </div>
                                    <div class="modal-footer justify-content-center">
                                        <a type="button" class="btn btn-danger" asp-area="admin" asp-controller="Tests" asp-action="Delete" asp-route-id="@item.Id">Delete</a>
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                    </div>
                                </div>
                            </div>
                        </div>

它看起来像这样：

我将测试 ID 放在元素 ID 中只是为了使元素在列表中唯一！

【参考方案2】：

根据你的描述，我建议你可以尝试使用swal。您可以包含 swal 引用并在 onclick 方法中创建一个 javascript 函数。

更多细节，您可以参考以下代码：

<link href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>


<a class="" asp-area="admin" asp-controller="Tests" asp-action="Delete" asp-route-id="3" onclick="confirmation(event, @item.Name)" > Delete </a>

Js：

    function confirmation(ev,itemname) 
       
        ev.preventDefault();
        var urlToRedirect = ev.currentTarget.getAttribute('href'); //use currentTarget because the click may be on the nested i tag and not a tag causing the href to be empty
        console.log(urlToRedirect); // verify if this is the right URL
        swal(
            title: "Are you sure?",
            text: "Delete " + itemname,
            icon: "warning",
            buttons: true,
            dangerMode: true,
        )
            .then((willDelete) => 
                if (willDelete) 
         
                    window.location = urlToRedirect;
                    swal("deleted!", 
                        icon: "success",
                    );
                 else 
                    swal("Not Delete");
                
            );
    

结果：

【讨论】：

当我在 chrome 中检查时显示错误“jquery.min.js:2 jQuery.Deferred exception: ev.preventDefault is not a function TypeError: ev.preventDefault is not a function”