基于ASP.NET C# WebForm的全局加载动画实现方案问询

Got it, let's fix this properly. Your existing jQuery/BlockUI approach has stability issues because it's tied to specific button classes and relies on timeout hacks—we can build a global, server-coordinated solution that works across every page and control in your WebForms app, mimicking that browser-tab-style loading spinner.

Here's how to implement it step by step:

1. Create a Base Page Class (Server-Side) #

First, we'll build a base page that all your WebForms inherit from. This lets us track loading state globally across postbacks and async updates.

public class BasePage : System.Web.UI.Page
{
    protected bool IsPageProcessing { get; set; }

    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        // Mark if we're handling a postback
        IsPageProcessing = IsPostBack;
        
        // Register hidden field to pass state to client
        ClientScript.RegisterHiddenField("__IsProcessing", IsPageProcessing.ToString());

        // Handle UpdatePanel async postbacks if used
        if (ScriptManager.GetCurrent(this) != null)
        {
            ScriptManager.GetCurrent(this).AsyncPostBackError += HandleAsyncError;
            RegisterAsyncLoadingScripts();
        }
    }

    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);
        // Signal client when processing starts and ends
        if (IsPageProcessing)
        {
            ClientScript.RegisterStartupScript(GetType(), "StartLoading", 
                "setLoadingState(true);", true);
        }
        ClientScript.RegisterStartupScript(GetType(), "EndLoading", 
            "setLoadingState(false);", true);
    }

    private void RegisterAsyncLoadingScripts()
    {
        // Hook into UpdatePanel's async events
        ScriptManager.RegisterStartupScript(this, GetType(), "AsyncLoadingHandlers", 
            @"
            const prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_beginRequest(() => setLoadingState(true));
            prm.add_endRequest(() => {
                setLoadingState(false);
                reEnableSubmitButtons();
            });
            ", true);
    }

    private void HandleAsyncError(object sender, AsyncPostBackErrorEventArgs e)
    {
        // Ensure loading state clears even if async postback fails
        ScriptManager.GetCurrent(this).AsyncPostBackErrorMessage = e.Exception.Message;
        ClientScript.RegisterStartupScript(GetType(), "ClearOnError", "setLoadingState(false);", true);
    }
}

Important: Update all your WebForms to inherit from BasePage instead of System.Web.UI.Page—this makes the logic apply everywhere.

2. Add Global CSS for Loading Animation #

Drop this into your master page's <head> or a global stylesheet. We'll make two options: a browser-tab-style spinner, and an optional full-page overlay (use whichever fits your UI).

/* Browser-tab-style spinner (fixed position) */
#globalLoader {
    position: fixed;
    top: 12px;
    right: 12px;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(62, 91, 116, 0.25);
    border-top-color: #3e5b74;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: none;
    z-index: 9999;
}

/* Optional full-page overlay (uncomment if you want to block interaction) */
/*
#loaderOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.6);
    display: none;
    z-index: 9998;
}
*/

@keyframes spin {
    to { transform: rotate(360deg); }
}

3. Add Loading Elements to Master Page #

Put these in your master page's <body> (right before the closing </body> tag works well):

<div id="loaderOverlay"></div>
<div id="globalLoader"></div>

4. Global Client-Side Logic (Native JS) #

Add this script to your master page (or a referenced JS file) to handle form submissions, postbacks, and loading state. No jQuery needed—this is lightweight and reliable.

let isLoading = false;

// Core function to toggle loading state
function setLoadingState(state) {
    isLoading = state;
    document.getElementById('globalLoader').style.display = state ? 'block' : 'none';
    document.getElementById('loaderOverlay').style.display = state ? 'block' : 'none';
}

// Re-enable submit buttons after loading finishes
function reEnableSubmitButtons() {
    document.querySelectorAll('[type="submit"]').forEach(btn => {
        btn.removeAttribute('disabled');
    });
}

// Intercept all form submissions
document.addEventListener('submit', (e) => {
    if (!isLoading) {
        setLoadingState(true);
        // Disable submit button to prevent duplicate clicks
        const submitBtn = e.target.querySelector('[type="submit"]');
        if (submitBtn) submitBtn.setAttribute('disabled', 'disabled');
    }
});

// Override WebForms' __doPostBack to catch all postbacks (LinkButtons, GridViews, etc.)
const originalDoPostBack = __doPostBack;
__doPostBack = function(eventTarget, eventArgument) {
    if (!isLoading) {
        setLoadingState(true);
        originalDoPostBack(eventTarget, eventArgument);
    }
};

// Reset state when page fully loads
window.addEventListener('load', () => {
    setLoadingState(false);
    reEnableSubmitButtons();
});

Why This Works Better Than Your Old Approach #

• Global Coverage: Works for every button, LinkButton, GridView, UpdatePanel, and form submission in your app—no need to add classes to individual controls.
• Server-Client Sync: The base page coordinates loading state with the client, so the animation stops as soon as the page finishes rendering (no timeout hacks).
• Duplicate Click Prevention: Disables submit buttons during loading to avoid multiple postbacks.
• Async Support: Handles UpdatePanel partial postbacks seamlessly.
• Customizable: Tweak the CSS to match your app's branding—change the spinner color, size, or position easily.

内容的提问来源于stack exchange，提问作者BoumBoumBam