C# Webforms 在代码执行期间显示加载指示器 [英] C# Webforms show Loading indicator during code execution

问题描述

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

The Webforms application I have is very data heavy, it's mostly ASP controls doing ADO.net operations. I have loading times of anywhere from 5-15 seconds, which is normal, but I'd like to make it more obvious to the user that their request is being processed.

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

What I'd like to do is add a loading image or some kind of visual element that will show when server code runs.

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

推荐答案

您可以为此使用 jquery BlockUI.演示的链接.这应该适用于您的所有情况(完全回发和部分回发).

You can use jquery BlockUI for this. Link to Demo. This should work for all your cases (full postback and partial postback).

为PageRequestManager.在 BeginRequestHandler 中，您可以使用自定义设置开始显示加载指示器，并在 EndRequestHandler 中隐藏加载指示器.如果您不想阻止整个页面，那么此插件可以选择显示元素的加载指示器(例如，在页面的 div 内，请参阅演示页面)

Add event handlers for beginRequest and endRequest of PageRequestManager. In the BeginRequestHandler you can start displaying the loading indicator with your customized settings and in the EndRequestHandler you hide the loading indicator. If you don't want to block the whole page then this plugin has option to show the loading indicator for an element (eg. within a div in the page, refer the demo page)

<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 插件脚本.

Also remember to reference the jquery and the blockui plugin scripts from either CDN or from your local application.

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

这篇关于C# Webforms 在代码执行期间显示加载指示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！