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。链接到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>

Answer 2

不要为使用纯代码的动画图片而烦恼。只需在需要时显示它。

spin.js

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

2 个答案: