如何等待模态的响应，然后再继续使用Ajax Action链接

Question

当前我有一个OnBegin方法，该方法调用模态要求"保存"，"不要保存"或"取消"。我需要能够等待用户选择之前。

例如：如果用户选择取消，则模态关闭，然后我返回false以阻止Ajax Action链接继续。

我知道有类似的事情的确认有一些问题，但有一些问题：

1. 样式与我网站的其余部分不符。
2. 它仅具有取消或继续的选项，而无需保存选择

ActionLink：

    @Ajax.ActionLink("Edit", "BrandCategoryModal", "BrandCategory", new AjaxOptions { UpdateTargetId = "DisplayModal", InsertionMode = InsertionMode.Replace, HttpMethod = "GET", OnBegin = "CheckForChanges()"})

javaScript：

var hasChanged = false;
var catId = 0;
var form = document.getElementById("CheckForChanges");
form.addEventListener("input", function () {
    hasChanged = true;
    console.log("Change");
});
$('input[name=Active]').change(function () {
    if ($(this).is(':checked')) {
        hasChanged = true;
        console.log("Change");
    } else {
        hasChanged = true;
        console.log("Change");
    }
});
    function CheckForChanges() {
        if (hasChanged)
        {
            showModal('#SaveOrCancel');
      }
        showModal('#DisplayModal')
    }
    function showModal(modalId) { //Displays Modal
        $(modalId).modal('show');
    }

模态：

<div class="modal fade" id="SaveOrCancel" role="dialog">
    <div class="modal-dialog" style="width: 20%; margin-top: 5%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Before Continuing:</h4>
            </div>
            <div class="modal-body">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>Select Your option:</h4>
                    </div>
                    <div class="panel-body" style="text-align: center">
                        <button class="btn btn-success" type="button" style="margin:auto"><b>Save</b></button>
                        <button class="btn btn-danger" type="button" style="margin:auto"><b>Don't Save</b></button>
                        <button class="btn btn-info" type="button" data-dismiss="modal" style="margin:auto"><b>Cancel</b></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

更改XMLHTTPREQUEST的AJAX呼叫，让您在成功时处理事件，还可以决定何时继续等待：

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // Success ! <--- THERE IT IS
    var data = JSON.parse(this.response);
  } else {
    // Reached server, but it returned an error. Your call. You can retry
  }
};
request.onerror = function() {
  // connection error of some sort
};
request.send();