Thomas’ Developer Blog

May 11, 2008

Asp.Net AJAX updatepanel postback trick with reCaptcha!

Filed under: AJAX, Asp.Net Framework 2.0, javascript, vb.net — Tags: , , , , , , — sanzon @ 7:54 am

You would have no idea how stressful this was trying to figure out!  Finally after a lot of hardwork I was able to figure out a semi hack around the problem.

Here’s the issue.  Everytime you run a partial postback through an updatepanel you run through a script only for that panel, but what if you want to have a clause in that code where you can do a full postpost so that you can maintain your viewstate and keep form data.

In this case we have a recaptcha device and the following .aspx source code:

  <div onkeypress="return no_enter(event,this,'none');" style="width:550px;">
   <recaptcha:RecaptchaControl
    ID="recaptcha"
    runat="server"
    PublicKey="xxxxxxxxxxxx"           
    PrivateKey="xxxxxxxxxxxx"
    theme="clean" />
   <asp:UpdatePanel ID="upnlTAB5" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
     <asp:Label ID="lblResult" runat="server" />
     <br /><br />
     I confirm that all information provided is correct under my best knowledge and that by 
     intentionally providing inaccurate information
     will result in the termination and potential denial of service from this site.<br /><br />
     <div style="text-align:center;">
      <asp:button text="Confirm and Complete Registration" skinID="button" id="btnSubmit" 
               onclick="TAB5_Submit" runat="server" /><br /><br />
      <input type="button" id="btnConfirmation_Disagree" OnClick="javascript:NewUser_Disagree();" 
              class="buttoninput" style="height:20px;" runat="server"
              value="Disagree & Cancel My Registration" /><br /><br />
     </div>
     <span class="infospan">Please only submit this form once!  This process may take 1 to 2 
          minutes to complete depending on site traffic. 
          If this page fails you may attempt to login and choose to resend your verification email.</span>
    </ContentTemplate>
   </asp:UpdatePanel>
  </div>

Now here is the issue.  You can’t place the recaptcha into the update panel or else it will not load correctly..  Thus if a user attempts do a partial postback on the updatepanel you will loose the recaptcha control.  So what you do is remove it from the update panel.  Seems easy right?  Not always the case.  What if it is incorrect?  Then you still have the exact same recaptcha.  What you will need to do is referesh the page!  Seems easy hey?

Remember they just filled out this long form!  They will have to retype everything else well.  I wish .Net had an easy solution, but sadly there isn’t.  To solve this what you have to do is create a hidden .Net button within a div with the style display none.

Here is the source for the button:

  <div style="display:none;"><asp:button id="btnRefresh" onclick="refresh" text="test" runat="server" /></div>

Now all we have to do is simply go ahead and use some java to trick the button into being submited.  So on our server side code we have:

 Sub TAB5_Submit(ByVal sender As System.Object, ByVal e As System.EventArgs)
  If Page.IsValid Then
   ScriptManager.RegisterStartupScript(Page, Page.GetType(), "Tab5InvalidFields", "alert('PASS');", true)
  Else
   ScriptManager.RegisterStartupScript(Page, Page.GetType(), "Tab5InvalidFields", _
         "alert('Confirmation: Invalid CAPTCHA, please try again.');document.getElementById('" _
         & btnRefresh.clientID.tostring & "').click();", true)
  End If
 End Sub

We use the scriptmanager to register a startup script to call a small javascript code.  In this case we alert the user that the information was incorrect for the CAPTCHA.  Now this is the trick!

We use javascript to click that hidden button!  That button will reload on the serverside and the viewstate will handle the rest!  So once the button is clicked we run the code:

 Sub refresh(ByVal sender As System.Object, ByVal e As System.EventArgs)
  tbxNewPassword.Attributes.Add("Value", tbxNewPassword.text)
  tbxConfirmNewPassword.Attributes.Add("Value", tbxConfirmNewPassword.text)
 End Sub

This sub reloads the page.  it can be blank if you wish, but you should take the time to refill the password boxes manually.  You simply create an attribute to reset the password values!  It works really well.

Now you are have to square one and they just have to reenter the captcha code!

Hope this helps, happy coding.

Advertisements

12 Comments »

  1. Thank you for your help.

    Comment by Jillian — August 18, 2008 @ 6:42 pm

  2. I don’t understand what are you saying, please explain your trick

    Comment by Narinder — September 11, 2009 @ 8:19 am

  3. I will thankful you.

    Comment by Narinder — September 11, 2009 @ 8:20 am

  4. An Easy Way Out:

    Put recaptcha outside the tag.

    Add following to your source:

    function getCapcha(){
    document.form1.recaptcha_response_field.value
    = document.getElementsByName(“recaptcha_response_field”)[1].value;
    }

    A textbox in the end, outside the Update Panel

    and you are done.

    Comment by Shuhab — February 11, 2010 @ 7:03 pm

  5. I loved as much as you will receive carried out
    right here. The sketch is tasteful, your authored material stylish.
    nonetheless, you command get bought an impatience over that you wish be delivering the following.
    unwell unquestionably come more formerly again as exactly the same
    nearly very often inside case you shield this hike.

    Comment by captcha bypass — July 13, 2012 @ 12:57 am

  6. I think this is one of the most important info for me.
    And i’m glad reading your article. But should remark on few general things, The site style is wonderful, the articles is really great : D. Good job, cheers

    Comment by Daryl — March 9, 2013 @ 2:06 am

  7. My partner and I absolutely love your blog and find almost all of
    your post’s to be just what I’m looking for. Does one
    offer guest writers to write content to suit your needs?
    I wouldn’t mind writing a post or elaborating on some of the subjects you write with regards to here. Again, awesome weblog!

    Comment by Carl — April 28, 2013 @ 4:17 pm

  8. Pretty! This was a really wonderful article. Thank you for providing
    this info.

    Comment by articlesnatch.com — June 16, 2013 @ 2:41 pm

  9. You could certainly see your expertise in the article you write.
    The arena hopes for more passionate writers like you
    who are not afraid to mention how they believe.
    At all times follow your heart.

    Comment by how to configure best best buy modem for comcast — August 28, 2014 @ 10:29 am

  10. Hi! Your website is loading slowly in my situation, the site consumed just like a minute to
    finally load up, I personally have no idea whether or not it’s entirely me or maybe webpage although google and yahoo worked for me.

    However thanks for publishing fantastic articles. I believe it really has been seriously useful to individual who seem to click here.

    This is without a doubt excellent what you
    have concluded and want to discover a lot more content from your site.
    I ‘ve got you book marked to check out new stuff you post.

    Comment by www.fifaworldhacks.com — July 27, 2015 @ 9:28 am

  11. Aradığım bir çok konuda sitenizi buluyorum sağolun

    Comment by kurumsal web tasarım — April 24, 2016 @ 7:36 am

  12. Bir hayli süredir aradığım bilgiydi teşekkürler

    Comment by opc tema — May 16, 2016 @ 8:02 am


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: