C＃Webforms在代码执行期间显示加载指示器[关闭]答案

【问题标题】：C# Webforms show Loading indicator during code execution [closed]C＃Webforms在代码执行期间显示加载指示器[关闭]
【发布时间】：2014-08-21 18:19:33
【问题描述】：

我拥有的 Webforms 应用程序的数据量很大，它主要是 ASP 控件执行 ADO.net 操作。我的加载时间在 5-15 秒之间，这很正常，但我想让用户更清楚地知道他们的请求正在处理中。

我想做的是添加加载图像或某种视觉元素，以便在服务器代码运行时显示。

平均售价：

<telerik:RadButton ID="OKbutton" runat="server"
    Skin="WebBlue"
    Text="OK">
</telerik:RadButton>

C#：

private SqlDataReader dr = null;
protected void OKbutton_Click(object sender, EventArgs e)
{
    //Long running query
    string query = "UPDATE Employees SET Salary = 12345 WHERE EmployeeID = 123"

    SqlCommand cmd = new SqlCommand(query, db.DbConnection);

    dr = cmd.ExecuteReader();
}

【问题讨论】：

如何调用后端代码执行？完整回发、AJAX 调用、更新面板？
您是否使用 AJAX 处理长请求？
@YuriyGalanter 我认为我的一个控件正在执行完整的回发。其余的是更新面板。
对于 UpdatePanel 使用 UpdateProgress - 它会在设定时间后启动并显示您指定的模板。

标签： c# asp.net webforms

【解决方案1】：

您可以为此使用 jquery BlockUI。链接到Demo。这应该适用于您的所有情况（完整回发和部分回发）。

为PageRequestManager 的beginRequest 和endRequest 添加事件处理程序。在BeginRequestHandler 中，您可以使用自定义设置开始显示加载指示器，在EndRequestHandler 中隐藏加载指示器。如果您不想阻止整个页面，则此插件可以选择显示元素的加载指示器（例如，在页面中的 div 中，请参阅演示页面）

<script type="text/javascript">
    function pageLoad(sender, args) {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_beginRequest(BeginRequestHandler);
        prm.add_endRequest(EndRequestHandler);
    }

    function BeginRequestHandler(sender, args) {
        showLoadingUI();
    }

    function EndRequestHandler(sender, args) {
        $.unblockUI();
    }

    function showLoadingUI() {
        $.blockUI({
            message: '<h3><img src="../images/ajax-loader.gif" /> <br /> <span style="font-family: Tahoma,Verdana,Arial, Sans-Serif; font-size: 12px; color: #1390c6;"> Loading...</span></h3>',
            showOverlay: true,
            css: {
                width: '130px', height: '110px',
                border: 'none',
                padding: '10px',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                opacity: .9
            }
        });
    }
</script>

还记得从 CDN 或本地应用程序中引用 jquery 和 blockui 插件脚本。

<script type="text/javascript" src="jquery1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.blockUI.js"></script>

【讨论】：

非常感谢！很好的答案。

【解决方案2】：

不要使用纯代码来处理动画图像。只需在需要时显示它即可。

spin.js

【讨论】：