如何在 AJAX 调用中使用 Bootstrap Alert 弹出窗口

Question

在我的MVC 项目中，我使用以下 AJAX 调用来调用控制器，其中操作方法正在删除记录。如果成功删除记录，我会使用普通的Alert(...) 弹出窗口通知用户记录已成功删除。 问题：有没有办法可以在以下 AJAX 调用中使用引导对话框 - 如果可以，如何？

我在 VS2015 中使用具有默认内置功能的 ASP.NET Core。没有 AngularJS。

$('#DeleteBtnID').click(function (e) {

    var PK_id = $(this).val();    
    $.ajax({
        url: '@Url.Action("TestAction", "TestContr")',
        data: { id: PK_id },
        contentType: 'application/json',
        dataType: 'html',
        type: 'GET',
        cache: false,
        success: function (data) {
            alert('Record Deleted Successfully');
        },
        error: function (jqXHR, textStatus) {
            alert(jqXHR.statusCode);
        }
    });

});

Answer 1

首先，您需要在当前页面（或布局文件）中保留模态对话框所需的标记

<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p id="modalMsg"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>                  
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

接下来，在您的 ajax 成功调用中（假设您的服务器代码在成功删除内容时返回 200 响应），您只需更新 modalMsg 元素的内容。

var pkId = 33;
$.ajax({
    url: '@Url.Action("Delete", "Home")',
    data: { id: pkId },
    type: 'POST',
    success: function (data) {
        $("#modalMsg").text('deleted successfully');
        $('#myModal').modal();
    },
    error: function (jqXHR, textStatus) {
        // to do : handle error
    }
});

这里，你只是更新模态体的 p 标签内容。您可以更改此代码以更新模式对话框标题、隐藏/显示某些按钮等。

您可以改进这一点，让页面中的标记甚至最少，让您的操作方法返回模态内容标记，如本文所述

ASP.NET MVC Bootstrap dynamic modal content

有一个不错的 js 库，名为 bootbox js，它让您的生活更轻松。基本上，bootbox 负责为页面中的模式对话框构建标记。有了这个，你所要做的就是调用他们的方法。

在您的页面中包含引导箱库。

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>

根据需要调用该方法。

var pkId = 33;
$.ajax({
    url: '@Url.Action("Delete", "Home")',
    data: { id: pkId },
    type: 'POST',
    success: function (data) {
        bootbox.alert("This is the default alert!");
    },
    error: function (jqXHR, textStatus) {
        // to do : handle error
    }
});