c# Webforms在代码执行期间显示Loading指示器

本文关键字：显示 Loading 指示器 执行期 Webforms 代码 | 更新日期: 2023-09-27 18:18:57

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

c# Webforms在代码执行期间显示Loading指示器

你可以使用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>

不要使用纯代码来制作动画图像。只要在需要的时候显示它。

spin.js

相关文章：