C# Webforms在代码执行期间显示加载指示器

Question

我需要翻译的内容与IT技术有关，涉及Webforms应用程序。该应用程序主要使用ASP控件进行ADO.net操作，数据量较大。加载时间通常在5-15秒之间，这是正常的，但我希望让用户更明显地知道他们的请求正在处理中。

我想添加一个加载图像或某种视觉元素，以显示服务器代码运行时的状态。

ASP:

<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();
}

- KidBilly

---

后端代码如何被调用执行？完整的 postback，AJAX 调用，还是 Update Panel？ - Yuriy Galanter

你是否正在使用AJAX来处理长时间的请求？ - Carlos Cervantes

@YuriyGalanter 我认为我的一个控件正在进行完整的 postback。其他的是 Update Panel。 - KidBilly

对于 UpdatePanel，使用 UpdateProgress - 它在设置的时间后启动并显示您指定的模板。 - Yuriy Galanter

Answer 1

你可以使用jquery BlockUI来实现。链接到演示。这应该适用于您所有的情况（完全回发和部分回发）。

为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>

- Dennis R

---

非常感谢！回答得很好。 - KidBilly

Answer 2

不要用动画图像，使用纯代码。仅在需要时显示此内容。

spin.js

- drzounds