Recaptcha исчезает во время 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, элемент управления вообще не загружается после обратной передачи - даже если я говорю UpdatePanel об обновлении.

Я не могу полностью перезагрузить страницу, так как все это отображается в виде наложения в верхней части страницы, а на странице есть другие поля формы.

Пожалуйста, помогите!

Edit:

Из C # при сбое Recaptcha я вызываю этот код:

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

        });
      }

Это твой recaptcha 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

Забудьте ScriptManager. Все, что вам нужно, это этот скрипт на странице. Измените соответственно для ваших идентификаторов:

<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
            });
        }
    });
}

Answer 4

Мне удалось заставить его работать, используя версию 2.1.0.0 библиотеки reCAPTCHA для .NET с веб-формами, диспетчером сценариев и внутри панели обновлений.

Сначала на странице .aspx вне панели обновлений я загружаю библиотеку Google reCAPTCHA:

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

Во-вторых, на странице .aspx внутри панели обновлений я добавил div, который будет работать как целевая панель для загрузки reCAPTCHA:

<div runat="server" id="pbTarget" visible="false"></div>
<cc1:Recaptcha ID="recaptcha" runat="server" Theme="Clean" />

В-третьих, в коде, указанном в конце моего события обратной передачи, я зарегистрировал сценарий запуска, чтобы отобразить reCAPTCHA на моей целевой панели

Private Sub cmdSubmit_Click(sender As Object, e As EventArgs) Handles cmdSubmit.Click
    pbTarget.Visible = True
    ScriptManager.RegisterStartupScript(
        UpdatePanel1,
        UpdatePanel1.GetType(),
        "loadCaptcha",
        "grecaptcha.render('" & pbTarget.ClientID & "', {'sitekey': 'YourKey' });",
End Sub

Answer 5

Мой ответ в основном такой же, как «Пользователь» (, что работал !), Но чтобы помочь любому, кто использует VB. Я бы прокомментировал там, но у меня есть представитель Zippo ... (надеюсь, это не слишком большое нарушение, и что это кому-то поможет)

Я перенес это мясо на VB.NET:

.

pbTarget.Visible = True
        Dim _sb As New StringBuilder
        With _sb
            .Append("Recaptcha._init_options(RecaptchaOptions);")
            .Append("if ( RecaptchaOptions && ""custom"" == RecaptchaOptions.theme )")
            .Append("{")
            .Append("  if ( RecaptchaOptions.custom_theme_widget )")
            .Append("  {")
            .Append("    Recaptcha.widget = Recaptcha.$(RecaptchaOptions.custom_theme_widget);")
            .Append("    Recaptcha.challenge_callback();")
            .Append("  }")
            .Append("} else {")
            .Append("  if ( Recaptcha.widget == null || !document.getElementById(""recaptcha_widget_div"") )")
            .Append("  {")
            .Append("    jQuery(""#")
            .Append(pbTarget.ClientID)
            .Append(""").html('<div id=""recaptcha_widget_div"" style=""display:none""></div>');")
            .Append("    Recaptcha.widget = Recaptcha.$(""recaptcha_widget_div"");")
            .Append("  }")
            .Append("  Recaptcha.reload();")
            .Append("  Recaptcha.challenge_callback();")
            .Append("}")
        End With
        ScriptManager.RegisterClientScriptBlock(recaptcha, recaptcha.[GetType](), "recaptcha", _sb.ToString, True)

Answer 6

Удивительно, но мне не нужно было применять вызов RegisterClientScriptBlock, чтобы он работал.Я просто использую:

UpdateMode = "Always"

для панели обновления и на стороне сервера я звоню:

updatePanel.Update();

Это также предотвращаеткапча с отображением нового вызова.

Answer 7

Вам необходимо перезагрузить элемент управления reCaptcha с помощью javascript, попробуйте это:

protected void Button1_Click(object sender, EventArgs e)
{
     btnrecaptcha.Validate();
     if(IsValid && updRecaptcha.IsValid}
     {
          //Some logic here
     }
     ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "CaptchaReload", "Recaptcha.reload();", true);
}