Question

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

我在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

有一个名为bootbox js的漂亮的js库让你的生活更轻松一些。基本上，bootbox负责为页面中的模式对话框构建标记。有了这一切，你只需要调用他们的方法。

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

如何使用Bootstrap Alert弹出窗口进行AJAX调用

1 个答案: