Creating a Fully Refreshing Captcha Inside an UpdatePanel (ASP.NET WebForms)

Introduction

In ASP.NET WebForms, a common problem occurs when a page contains multiple captchas—for example, one captcha on the FAQ page and another inside the footer feedback section. If both captchas use the same backend logic, they may display identical codes. Additionally, when the footer captcha is inside an UpdatePanel , refreshing the page or performing a partial postback may cause the captcha to disappear or not regenerate properly.

In this article, we will learn how to create a JavaScript-based captcha that works inside an UpdatePanel , and how to ensure the captcha is always refreshed—even during partial postbacks triggered by server controls.

Part 1. Why Captcha Fails Inside UpdatePanel

When using UpdatePanel, server postbacks behave differently:

• The page does NOT reload fully.

• Only the UpdatePanel content refreshes.

• JavaScript inside the UpdatePanel does not run automatically after partial postback.

• Therefore, captcha does not regenerate after a backend event.

This is why you see:

Captcha missing
Same captcha showing repeatedly
Backend update overwriting captcha

To solve this, we attach a script that regenerates captcha after every UpdatePanel refresh .

Part 2. HTML Code Inside UpdatePanel

  
    <asp:UpdatePanel ID="UpdatePanelFooterCaptcha" runat="server">
    <ContentTemplate>

        <div class="captcha-wrapper">

            <!-- Captcha Input -->
            <input type="text" id="txtCaptchaFooter"
                   maxlength="5"
                   placeholder="Enter Captcha"
                   class="captchaBox" />

            <!-- Display Captcha Text -->
            <span id="footerCaptchaText"
                  class="captchaDisplay"></span>

            <!-- Refresh Button -->
            <img src="/Images/refreshfinal.png"
                 class="captchaRefresh"
                 onclick="generateFooterCaptcha()"
                 alt="Refresh" />

        </div>

    </ContentTemplate>
</asp:UpdatePanel>
  

Part 3. JavaScript Code That Always Works

IMPORTANT

This script:

1.Generates captcha
2.Stores value in sessionStorage
3.Works on full page load
4.Works after any UpdatePanel postback

1) Captcha Generator Script

  
    function generateFooterCaptcha() {
    let characters = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
    let captcha = "";

    for (let i = 0; i < 5; i++) {
        captcha += characters[Math.floor(Math.random() * characters.length)];
    }

    document.getElementById("footerCaptchaText").innerText = captcha;
    sessionStorage.setItem("footerCaptchaValue", captcha);
}
  

2) Run on Page Load + UpdatePanel Postback

  
    // Runs on full page load
window.onload = generateFooterCaptcha;

// Runs after partial postback
Sys.Application.add_load(function () {
    generateFooterCaptcha();
});
  

This is the KEY FIX

Without Sys.Application.add_load() , the captcha will NOT refresh inside UpdatePanel after backend events.

Part 4. Captcha Validation Script

  
    function validateFooterCaptcha() {

    let userValue = document.getElementById("txtCaptchaFooter").value.trim();
    let actualValue = sessionStorage.getItem("footerCaptchaValue");

    if (userValue === "") {
        alert("Please enter captcha");
        return false;
    }

    if (userValue !== actualValue) {
        alert("Invalid captcha");
        document.getElementById("txtCaptchaFooter").value = "";
        generateFooterCaptcha();
        return false;
    }

    return true;   // success
}
  

Part 5. Backend Trigger + Captcha Refresh

If you want captcha to refresh after backend events:

  
    protected void btnSubmitFooter_Click(object sender, EventArgs e)
{
    // Your backend logic here

    // Refresh captcha after backend execution
    ScriptManager.RegisterStartupScript(
        UpdatePanelFooterCaptcha,
        UpdatePanelFooterCaptcha.GetType(),
        "RefreshFooterCaptcha",
        "generateFooterCaptcha();",
        true
    );
}
  

Conclusion

By shifting the footer captcha to a JavaScript-based generator and attaching the script to Sys.Application.add_load() , we guarantee the captcha always loads properly—even when the backend triggers a partial postback in an UpdatePanel.

This approach completely eliminates:

• duplicate captcha problems

• missing captcha after postbacks

• DLL-based captcha conflicts

• session overwrites