Recapcha在PostBack期间消失

Question

我在这里看到了几个关于使用Recaptcha和ASP.net UpdatePanels的其他帖子,但还没有找到解决我的问题的答案.

这是我的ASPX代码:

<asp:UpdatePanel ID="updRecaptcha" runat="server" UpdateMode="Always">
 <ContentTemplate>
  <recaptcha:RecaptchaControl ID="btnrecaptcha" runat="server" Theme="clean" PrivateKey"<%$ Resources: General, CaptchaPrivateKey %>" PublicKey="<%$ Resources: General, CaptchaPublicKey %>" />        
  <asp:Label ID="recaptchaerror" runat="server" style="color: Red;"/>
 </ContentTemplate>
</asp:UpdatePanel>

因此,Recaptcha控件存在于使用多个.Net验证控件(例如RequiredFieldValidator)的用户控件中.在允许进程继续之前,我需要对Recaptcha和ASP.net控件进行验证.

如果任何验证失败(Recaptcha或.Net),则Recaptcha控件将消失.看一下HTML源代码,在Postback之后根本没有加载控件 - 尽管我告诉UpdatePanel要更新.

我无法完全重新加载页面,因为这一切都显示为页面顶部的叠加层,页面后面还有其他表单字段.

请帮忙!

编辑:

当Recaptcha失败时从C#我调用这段代码:

ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "InvalidRecaptcha", "alert('Recaptcha Failed');Recaptcha.reload();alert('Recaptcha Reloaded');", true);

两个警报语句都会触发,但Recaptcha仍然无法加载.

Answer 1

接受的解决方案对我不起作用.以下是我尝试过的答案:

ASP.Net,消失的Recaptcha,UpdatePanels和Partial PostBacks:一劳永逸地修复

基本上它涉及创建一个隐藏的div并使用jquery重新呈现html.博客文章还给出了典型解决方案的一个很好的细分(例如,使用带有简单重新加载的RegisterClientScriptBlock)以及它们失败的原因.

<div runat="server" id="pbTarget" visible="false"></div>  
<recaptcha:RecaptchaControl ID="recaptcha" runat="server" Theme="clean" />  

代码背后:

protected void btnSubmit_Click(object sender, EventArgs e)  
{  
  recaptcha.Validate();  
  if (!Page.IsValid || !recaptcha.IsValid)  
  {  
    pbTarget.Visible = true;  
    ScriptManager.RegisterClientScriptBlock(  
      recaptcha,  
      recaptcha.GetType(),  
      "recaptcha",  
      "Recaptcha._init_options(RecaptchaOptions);"  
      + "if ( RecaptchaOptions && \"custom\" == RecaptchaOptions.theme )"  
      + "{"  
      + "  if ( RecaptchaOptions.custom_theme_widget )"  
      + "  {"  
      + "    Recaptcha.widget = Recaptcha.$(RecaptchaOptions.custom_theme_widget);"  
      + "    Recaptcha.challenge_callback();"  
      + "  }"  
      + "} else {"  
      + "  if ( Recaptcha.widget == null || !document.getElementById(\"recaptcha_widget_div\") )"  
      + "  {"  
      + "    jQuery(\"#" + pbTarget.ClientID + "\").html('<div id=\"recaptcha_widget_div\" style=\"display:none\"></div>');"  
      + "    Recaptcha.widget = Recaptcha.$(\"recaptcha_widget_div\");"  
      + "  }"  
      + "  Recaptcha.reload();"  
      + "  Recaptcha.challenge_callback();"  
      + "}",  
      true  
    );  

    return;  
  }  
  else  
  {  
    //normal page processing here...  

Answer 2

如果您使用的是 Recaptcha 2.0，这是您的 Javascript

 <script type="text/javascript">
    function CaptchaReload() {
          Recaptcha.create("yourpublicKey", 'yourRecaptchadiv', {
          theme: 'white',
          callback: grecaptcha.reset()

        });
      }

这是您的验证码 Div

<div class="g-recaptcha" data-sitekey="yourPublicKey"></div>

然后在回发事件结束时调用 Javascript

 protected void txtEmail_TextChanged(object sender, EventArgs e)
{
    if (txtEmail.Text != string.Empty)
    {
        ValidateEmail();
        ScriptManager.RegisterStartupScript(this, this.GetType(), "CaptchaReload", "$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});", true);
    }
}

Answer 3

忘记脚本管理器。您所需要的只是页面中的这个脚本。相应地更改您的标识符：

<script type="text/javascript">
// RECAPTURE CODE FOR RELOADING AFTER INCORRECT ENTRY
if (typeof Sys != 'undefined') {
    var requestManager = Sys.WebForms.PageRequestManager.getInstance();
    requestManager.add_endRequest(function(sender, args) {

        $('<div id="recaptcha_widget_div"/>').appendTo('#recaptcha_widget_div2');

        if (typeof Recaptcha != 'undefined') {                                
            Recaptcha.create(recaptcha_key, "recaptcha_widget_div",
            {
                theme: "red",
                callback: Recaptcha.focus_response_field
            });
        }
    });
}