ASP.NET C#中jQuery实现消息发送前后模态框显隐问题排查

问题背景 #

需求：点击页面按钮后显示等待提示模态框，后台完成消息发送并返回响应后，自动隐藏该模态框。但现有代码执行后，模态框无法正常显示和隐藏。

现有代码回顾 #

模态框HTML #

<div class="modal fade " id="modal_loader" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-bs-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <div class="form-group row">
                    <div class="loader"> <img src="assets/images/loding_animation.gif" /></div>
                    <p> <center>you will receive messages shortly please wait a moment once done popup will close</center></p>
                </div>
            </div>
        </div>
    </div>
</div>

按钮HTML #

<a href="javascript://" title="Export to Whatsapp" id="plrepobulkwhatsapp" onclick="plreportexportexcel_pdftoemail()" class="btn btn-success">Email</a>

前端逻辑 #

function plreportexportexcel_pdftoemail() {
    $("#modal_loader").modal('show');
    var msg = Successmessage("abc");
    if (msg != "") {
        $("#modal_loader").modal('hide');
        alert(bulkexcelpdfmsg);
    }
}

function Successmessage(clientcode) {
    var sus = "";
    var param = { clientcode: clientcode };
    var res = $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "reports.aspx/GenerateCustomPDF_ExcelBulk",
        dataType: "json",
        data: JSON.stringify(param),
        success: function (response) {
            sus = response.d;
        },
        async: false,
        error: function (err) {
            console.log("eror is ==> .. " + err);
        }
    });
    return sus;
}

后台WebMethod #

[WebMethod]
public static string GenerateCustomPDF_ExcelBulk(string clientcode) {    
    string msg = "";
    // 业务逻辑处理，返回成功消息
    // msg = "success";
    return msg;
}

错误排查 #

1. 同步AJAX阻塞UI渲染：Successmessage里设置了async: false，这会让浏览器暂停所有UI渲染，直到AJAX请求完成。也就是说，$("#modal_loader").modal('show')执行后，浏览器还没来得及渲染模态框，就被同步请求卡住，请求完成后立刻执行modal('hide')，用户根本看不到模态框。

2. 无效的Bootstrap属性：模态框的aria-bs-hidden是错误属性，Bootstrap标准属性是aria-hidden，这个错误可能导致模态框初始化异常。

3. 未定义变量引用：alert(bulkexcelpdfmsg)中的bulkexcelpdfmsg没有定义，会导致JS报错，中断后续逻辑。

修复方案 #

1. 移除同步AJAX，改用异步回调 #

同步AJAX不仅会阻塞UI，还已经被jQuery标记为废弃，必须改成异步模式，通过回调处理请求结果。

2. 修正模态框属性 #

将aria-bs-hidden改为aria-hidden。

3. 调整逻辑顺序 #

在AJAX的success和error回调中统一处理模态框隐藏和结果提示。

修改后的完整代码 #

模态框HTML（修正属性）

<div class="modal fade" id="modal_loader" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <div class="form-group row">
                    <div class="loader"><img src="assets/images/loding_animation.gif" /></div>
                    <p><center>消息发送中，请稍候，完成后弹窗将自动关闭</center></p>
                </div>
            </div>
        </div>
    </div>
</div>

前端逻辑（改用异步回调）

function plreportexportexcel_pdftoemail() {
    // 先显示模态框
    $("#modal_loader").modal('show');
    
    // 调用异步请求，传入成功/失败回调
    Successmessage("abc", 
        function(msg) {
            // 请求成功：隐藏模态框 + 提示
            $("#modal_loader").modal('hide');
            if (msg.trim() !== "") {
                alert(msg);
            }
        },
        function(err) {
            // 请求失败：隐藏模态框 + 错误提示
            $("#modal_loader").modal('hide');
            console.log("请求错误：", err);
            alert("请求失败，请稍后重试");
        }
    );
}

function Successmessage(clientcode, successCallback, errorCallback) {
    var param = { clientcode: clientcode };
    
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "reports.aspx/GenerateCustomPDF_ExcelBulk",
        dataType: "json",
        data: JSON.stringify(param),
        success: function(response) {
            // 将后台返回的结果传给成功回调
            successCallback(response.d);
        },
        error: function(err) {
            // 将错误信息传给失败回调
            errorCallback(err);
        }
    });
}

后台WebMethod（保持原逻辑即可）

[WebMethod]
public static string GenerateCustomPDF_ExcelBulk(string clientcode) {    
    string msg = "";
    // 执行你的业务逻辑，设置返回消息
    msg = "消息已成功发送，请注意查收";
    return msg;
}

修复说明 #

• 异步AJAX不会阻塞UI线程，模态框能正常显示，直到请求完成后才会隐藏。
• 回调函数确保只有在后台请求完成（成功或失败）时，才会处理模态框隐藏和用户提示。
• 修正了Bootstrap模态框的属性错误，保证模态框能正常初始化。
• 替换了未定义的变量引用，避免JS报错中断流程。

内容的提问来源于stack exchange，提问作者ashok