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

Question

我拥有的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();
}

Answer 1

您可以使用jquery BlockUI.链接到演示.这适用于所有情况(完整回发和部分回发).

添加事件处理程序beginRequest和endRequest的PageRequestManager.在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>