noCAPTCHA reCAPTCHA在UpdatePanel中消失

Question

我正在用VB.Net将noCAPTCHA reCAPTCHA实现到现有的表单中.它位于UpdatePanel中,并使用服务器端验证来验证用户是否已完成CAPTCHA(请参阅ASP.NET服务器端的验证回收2(无CAPTCHA reCAPTCHA))

如果用户未能通过CAPTCHA或任何其他经过验证的字段,则由于回发而无法重新加载CAPTCHA.如何解决这个问题,以便在回发后CAPTCHA不会消失？

我的CAPTCHA代码:

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

api.js放在Site.Master头中.

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

扩大.

我尝试过一种解决方案但最终失败了.我补充道

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

到我的MasterPage的主体并将其扔在UpdatePanel中,给它一个id,等等.

    <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>

然后我在Site Master的代码隐藏中创建了一个函数,如下所示:

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

当用户尝试验证并提交表单时

如果他们失败了,我试图让更新面板刷新

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

它位于后面的控制代码上.

这没用.也许有一个潜在的解决方案可以找到吗？

Answer 1

为了解决这个问题,我做了以下事情:

我的CAPTCHA代码更改为以下div:

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

然后,我通过将api链接更改为以下内容并将其放在上面的div下面,继续在reCAPTCHA上实现显式渲染.

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

在我包括的标题中

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

在CAPTCHA失败的代码中,我重新加载了CAPTCHA

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