C# Webforms show Loading indicator during code execution

Question

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

How is backend code called for execution? Full postback, AJAX call, Update Panel? — Yuriy Galanter, Aug 21 '14 at 18:23
@YuriyGalanter I have I think one of my controls doing a full postback. The rest are Update Panels. — KidBilly, Aug 21 '14 at 18:28
For UpdatePanel ones use UpdateProgress - it kicks in after set time and displays template you specify. — Yuriy Galanter, Aug 21 '14 at 18:30

Dennis R · Accepted Answer · 2014-08-21T18:47:31.713

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

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>

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>

score 0 · Answer 2 · answered Aug 21 '14 at 18:25

0

Don't bother with an animated image use pure code. Just display this whenever it is needed.

spin.js

answered Aug 21 '14 at 18:25

drzounds

369
3
16

C# Webforms show Loading indicator during code execution

2 Answers2

Linked