Razor Page中如何在OnGetAsync处理时显示加载动画并正确关闭？

问题背景 #

我希望在OnGetAsync方法执行过程中显示加载动画（spinner），当前已通过按钮onclick事件调用jQuery的.show()实现点击时显示动画，但不知道如何在OnGetAsync执行完成后正确关闭它——尤其是当方法返回文件（如PDF）时，页面不会刷新，动画会一直显示。

原始表单代码：

<form method="get">
    <div class="row">
        <button type="submit" class="btn btn-primary" name="action" value="1">1</button>
        <button type="submit" class="btn btn-primary" name="action" value="2">2</button>
    </div>
</form>

更新后的示例代码：

前端代码 #

<form method="get">
    <div class="row">
        <button id="pdfbutton" type="submit" class="btn btn-primary" name="action" value="PDF">PDF</button>
        <span id="spinner" class="loader" style="display:none;"></span>
    </div>
</form>

@section Scripts{
    <script>
        $("#pdfbutton").click(function(){
            $("#spinner").show();
        });
    </script>
}

后端代码 #

public class IndexModel : PageModel
{
    public async Task<IActionResult> OnGetAsync(string? action)
    {
        if (action == "PDF") {
            var file = await File.ReadAllBytesAsync("<path to some pdf file>");
            return File(file, "application/pdf", "file.pdf");
        }
        return Page();
    }
}

解决方案 #

情况1：返回页面（return Page()） #

当OnGetAsync返回页面时，表单提交会触发页面刷新，此时页面DOM重新渲染，加载动画的初始状态是display:none，因此会自动隐藏，无需额外处理。

情况2：返回文件（如PDF下载） #

由于文件下载不会触发页面刷新，需要通过AJAX请求控制加载动画的显示与隐藏，同时处理文件下载逻辑：

修改前端脚本如下：

@section Scripts{
    <script>
        $("#pdfbutton").click(function(e){
            // 阻止默认表单提交行为
            e.preventDefault();
            
            // 显示加载动画
            $("#spinner").show();
            
            // 发起AJAX请求
            $.ajax({
                url: window.location.pathname,
                type: "GET",
                data: { action: "PDF" },
                // 指定响应类型为二进制流，处理文件
                xhrFields: {
                    responseType: 'blob'
                },
                success: function(blob){
                    // 创建临时下载链接并触发下载
                    const downloadUrl = window.URL.createObjectURL(blob);
                    const link = document.createElement('a');
                    link.href = downloadUrl;
                    link.download = "file.pdf";
                    document.body.appendChild(link);
                    link.click();
                    // 清理临时资源
                    window.URL.revokeObjectURL(downloadUrl);
                    document.body.removeChild(link);
                },
                // 请求完成（成功/失败）后隐藏加载动画
                complete: function(){
                    $("#spinner").hide();
                }
            });
        });
    </script>
}

多按钮通用处理 #

如果有多个提交按钮（如action=1、action=2），可以通过获取点击按钮的value来动态传递参数：

$("button[type='submit']").click(function(e){
    e.preventDefault();
    const actionValue = $(this).val();
    $("#spinner").show();
    
    $.ajax({
        url: window.location.pathname,
        type: "GET",
        data: { action: actionValue },
        // 根据不同action的返回结果处理：如果是页面则替换内容，如果是文件则下载
        success: function(response){
            if (actionValue !== "PDF") {
                // 替换页面内容（如果是返回页面）
                $("body").html(response);
            } else {
                // 文件下载逻辑
                const blob = new Blob([response], { type: "application/pdf" });
                const downloadUrl = window.URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = downloadUrl;
                link.download = "file.pdf";
                document.body.appendChild(link);
                link.click();
                window.URL.revokeObjectURL(downloadUrl);
                document.body.removeChild(link);
            }
        },
        complete: function(){
            $("#spinner").hide();
        }
    });
});

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