Progress Bar for ASP.NET Web Forms - How to use the WebMethod attribute to display the progress of a server-side process on the client

This example demonstrates how to use the WebMethod attribute to get information about the current progress from the server and display it on the client without refreshing the whole page. To enable this functionality, use the jQuery library or ScriptManager page.

Overview

Add the WebMethods attribute to the BasePage class as follows:

[WebMethod(EnableSession = true)]

For the jQuery approach, send a POST request to the WebMethod:

function WebMethodRequest(url, callback) {
    $.ajax({
        url: url,
        type: "POST",
        contentType: 'application/json; charset=utf-8',
        success: callback
    });
}

For the ScriptManager technique, call the StartOperation method:

function callbackStart(s, e) {
    // ...
    PageMethods.StartOperation();
    // ...
}

Files to Review

• BasePage.cs (VB: BasePage.vb)
• Operation.cs (VB: Operation.vb)
• Default.aspx (VB: Default.aspx)
• Default.aspx.cs (VB: Default.aspx.vb)
• jQuery.aspx (VB: jQuery.aspx)
• jQuery.aspx.cs (VB: jQuery.aspx.vb)
• ScriptManager.aspx (VB: ScriptManager.aspx)
• ScriptManager.aspx.cs (VB: ScriptManager.aspx.vb)

Documentation

• How to call WebMethod?
• Expose Web Services to Client Script

More Examples

• How to display the progress of a server-side process on the client