ASP.NET MVC中调用控制器方法时如何显示/隐藏自定义加载器

核心逻辑是在AJAX请求发起前显示加载器，请求完成（无论成功或失败）后隐藏加载器，确保加载状态能正确结束。

步骤1：确保加载器初始隐藏 #

先通过CSS设置加载器默认不可见，同时可添加全屏遮罩样式让加载效果更直观：

#preloaded {
    display: none;
    /* 全屏遮罩+居中样式（可选） */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

步骤2：修改点击事件，整合加载器控制 #

根据你使用的AJAX方式，选择对应的实现：

方式1：使用完整的$.ajax方法（推荐） #

通过beforeSend和complete回调统一控制加载器：

$('#btnId').on('click', function () {
    // 显示加载器
    $('#preloaded').show();

    // 发送请求到控制器
    $.ajax({
        url: '/YourController/TargetAction', // 替换为你的控制器和方法路径
        type: 'POST', // 或GET，匹配你的后端方法定义
        data: { 
            // 这里传入你的请求数据，比如 id: 123, name: "test"
        },
        success: function (response) {
            // 处理请求成功的返回结果
            console.log('请求成功：', response);
        },
        error: function (xhr, status, error) {
            // 处理请求失败的情况
            console.error('请求失败：', error);
        },
        complete: function () {
            // 请求结束（无论成败），隐藏加载器
            $('#preloaded').hide();
        }
    });
});

方式2：使用快捷方法（$.post/$.get） #

如果用快捷AJAX方法，通过always回调确保加载器一定会隐藏：

$('#btnId').on('click', function () {
    $('#preloaded').show();

    $.post('/YourController/TargetAction', { /* 请求数据 */ })
        .done(function(response) {
            // 成功处理逻辑
        })
        .fail(function(xhr) {
            // 失败处理逻辑
        })
        .always(function() {
            $('#preloaded').hide();
        });
});

可选优化：添加过渡动画 #

如果需要更流畅的视觉效果，用fadeIn()/fadeOut()替换show()/hide()：

// 显示时淡入
$('#preloaded').fadeIn(300);
// 隐藏时淡出
$('#preloaded').fadeOut(300);

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