noCAPTCHA reCAPTCHA disappearing in UpdatePanel

Question

I'm implementing noCAPTCHA reCAPTCHA into an existing form with VB.Net. It is located within an UpdatePanel and uses server side validation to verify the user has completed the CAPTCHA (See Validating Recaptcha 2 (No CAPTCHA reCAPTCHA) in ASP.NET's server side)

If a user fails to the CAPTCHA or any other of the validated fields, the CAPTCHA fails to reload due to postback. How do resolve this and make it so that the CAPTCHA does not disappear after a postback?

My CAPTCHA code:

<div id="captcha" class="g-recaptcha" runat="server" data-sitekey="MySiteKey"></div>

The api.js is placed in the Site.Master header.

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

To expand.

I have tried a work around but ultimately failed. I added

<div id="captcha" class="g-recaptcha" runat="server" data-sitekey="MySiteKey"></div>

to the body of my MasterPage and threw it in an UpdatePanel, gave it an id, etc.

    <asp:UpdatePanel UpdateMode="Conditional" runat="server" ID="noCaptcha">
        <ContentTemplate>
            <asp:ScriptManager runat="server"></asp:ScriptManager>
            <script src="https://www.google.com/recaptcha/api.js" async defer></script>
        </ContentTemplate>
    </asp:UpdatePanel>

I then created a function in the code-behind of the Site Master as follows:

Public Sub TriggerCaptchaReload()
    noCaptcha.Update()
End Sub

When the user tried to verify and submit the form

If they failed I attempted to cause the update panel to refresh with

CType(Me.Page.Master, MasterPage).TriggerCaptchaReload()

which is located on the control code behind.

This didn't work. Maybe there is a potential solution to find with that?

There is another way to display Google Recaptcha on your WebForm by adding Reference to reCaptcha DLL into asp .net application. http://stackoverflow.com/questions/29997966/recaptcha-2-0-validation-failed/29999046#29999046 — Keval Gangani, May 15 '15 at 13:15
here is one more answer http://stackoverflow.com/questions/8942884/recaptcha-disappears-during-postback#answer-33343230 — Diogo Cid, Nov 16 '15 at 22:57

Ben · Accepted Answer · 2022-03-30T18:35:42.640

18

To solve this issue I did the following:

My CAPTCHA code changed to the following div:

<div id="recaptcha" class="recaptcha"></div>

I then proceeded to implement explicit rendering on the reCAPTCHA by changing the api link to the following and placing it below the div above.

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
            async defer>
            </script>

In the header of the page I included

<script type="text/javascript">
    var onloadCallback = function () {
        grecaptcha.render('recaptcha', {
            'sitekey': 'MySiteKey'
        });
    };
</script>

In the code behind if the CAPTCHA fails I reload the CAPTCHA with

ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "loadCaptcha", "grecaptcha.render('recaptcha', {'sitekey': 'MySiteKey' });", True)

edited Mar 30 '22 at 18:35

answered May 15 '15 at 20:27

Ben

733
8
25

I have tried almost all solution for same problem but your solution fixed my problem thanks !!! – Pushkar Phule Feb 09 '16 at 13:56
hey @benjamin after trying above my captcha fails to relode at first time , have you faced the same problem ? – Pushkar Phule Feb 10 '16 at 07:01
If you mean upon initial page load: make sure that the first script tag to google's api is below the #recaptcha div. You have to have the script tag that has the varaible onloadCallback in the header of the page. If you mean after the first time the user fails the CAPTCHA then no I have not experienced that issue. – Ben Jun 09 '16 at 17:57
This solution worked for me using the reCAPTCHA library for .NET inside an update panel – MAlvarez Apr 20 '20 at 18:31

score -1 · Answer 2 · answered Aug 05 '16 at 18:28

This solved my problems with recaptcha in update panels. Use pageLoad function with a loop with elements of the same class name then render with your secret key.

  function pageLoad(sender, args) {

                $('.g-recaptcha').each(function (index, obj) {
                    grecaptcha.render(obj, { 'sitekey': 'XXXXXXXXXXXX-XX' });
                });

            }

noCAPTCHA reCAPTCHA disappearing in UpdatePanel

2 Answers2

Linked