C# 在加载aspx页面时显示正在加载的图像和文本

我有一个页面，当它被打开时，它开始运行一个需要40到60秒才能完成的方法。我在页面上放了一个加载圆圈gif，但它直到代码完成工作后才出现。如何确保图像首先可见

更新：

在gif出现后，我可以成功获得一个任务来运行我的代码。但是，我需要在任务完成后更新页面或打开另一个页面。我尝试了下面的代码。当点击

testLabel.visible=true

行时，标签不会出现

任何关于我做错了什么的指导都将不胜感激

代码：

试试这个：

$(function () {        
    $("#btnSubmit").click(function () {

            $("#loading").fadeIn();
            var opts = {
                lines: 12, // The number of lines to draw
                length: 7, // The length of each line
                width: 4, // The line thickness
                radius: 10, // The radius of the inner circle
                color: '#000', // #rgb or #rrggbb
                speed: 1, // Rounds per second
                trail: 60, // Afterglow percentage
                shadow: false, // Whether to render a shadow
                hwaccel: false // Whether to use hardware acceleration
            };
            var target = document.getElementById('loading');
            var spinner = new Spinner(opts).spin(target);
        }
    }); 
});


<div id="loading">
    <div id="loadingcontent">
        <p id="loadingspinner">
            Loading...
        </p>
    </div>
</div>     

<style>    
    #loading {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.8);
        z-index: 1000;
    }

    #loadingcontent {
        display: table;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    #loadingspinner {
        display: table-cell;
        vertical-align: middle;
        width: 100%;
        text-align: center;
        font-size: larger;
        padding-top: 80px;
    }
</style>

$（函数（）{
$（“#btnsupmit”）。单击（函数（）{
$（“#加载”）.fadeIn（）；
变量选项={
lines:12，//要绘制的行数
长度：7，//每行的长度
宽度：4，//线条粗细
半径：10，//内圈的半径
颜色：'#000'、//#rgb或#rrggbb
速度：1，每秒//圈
轨迹：60，//余辉百分比
shadow:false，//是否渲染阴影
hwaccel:false//是否使用硬件加速
};
var target=document.getElementById（'loading'）；
var微调器=新微调器（opts）。微调（目标）；
}
}); 
});

加载。。。

#装载{
显示：无；
位置：固定；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景：rgba（255255,0.8）；
z指数：1000；
}
#加载内容{
显示：表格；
位置：固定；
左：0；
排名：0；
宽度：100%；
身高：100%；
}
#装载机{
显示：表格单元格；
垂直对齐：中间对齐；
宽度：100%；
文本对齐：居中；
字体大小：较大；
填充顶部：80px；
}

---

来源：

我最终将长时间运行的方法构建到ASP.net RESTful web API中，在加载页面时异步调用该API。我已经消除了页面上需要的任何等待，并在登录用户完成运行后向其发送一封电子邮件，向其提供结果。

该方法在页面/视图加载之前运行。您需要先进行页面加载，显示img，然后以最简单的方式触发方法。或者添加一个定时器来调用方法，或者创建一个任务。您也可以使用AJAX来完成。我正在尝试让计时器方法工作。将发布结果。已尝试使用任务，并且在任务运行时显示图像。但是，我需要它在任务完成后更新UI或打开新页面。我现在试着让它在任务结束时显示一个隐藏的标签。代码命中该行，但UI不更新：

$(function () {        
    $("#btnSubmit").click(function () {

            $("#loading").fadeIn();
            var opts = {
                lines: 12, // The number of lines to draw
                length: 7, // The length of each line
                width: 4, // The line thickness
                radius: 10, // The radius of the inner circle
                color: '#000', // #rgb or #rrggbb
                speed: 1, // Rounds per second
                trail: 60, // Afterglow percentage
                shadow: false, // Whether to render a shadow
                hwaccel: false // Whether to use hardware acceleration
            };
            var target = document.getElementById('loading');
            var spinner = new Spinner(opts).spin(target);
        }
    }); 
});


<div id="loading">
    <div id="loadingcontent">
        <p id="loadingspinner">
            Loading...
        </p>
    </div>
</div>     

<style>    
    #loading {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.8);
        z-index: 1000;
    }

    #loadingcontent {
        display: table;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    #loadingspinner {
        display: table-cell;
        vertical-align: middle;
        width: 100%;
        text-align: center;
        font-size: larger;
        padding-top: 80px;
    }
</style>