How to use Google reCaptcha in ASP.net MVC 5 app without using a Form???

[Dumber_Texan2]

I'm having such a hard time with this. It seems like such a cool control, but I can't get it to work properly. I having issues with the validation piece. The widget displays and works properly, but without actually validating the response or wiring it into my button, it's worthless.

I have one button on the page. The button is actually an @Ajax.ActionLink. I can't figure out how to get the g-Recaptcha-Response, so I can pass the value to my controller ActionResult.

I also haven't been able to successfully use Javascript to validate the g-Recaptcha-Response and use it in my @Ajax.ActionLink. I have been able to display the g-Recaptcha-Response using this script, but I can't do much with it.

<script type="text/javascript">

            var onReturnCallback = function (response) {

            alert('g-recaptcha-response: ' + grecaptcha.getResponse());

            var captchaResponse = grecaptcha.getResponse();

            if (captchaResponse != null) {

                document.getElementById('recaptcha').innerHTML = 'THE CAPTCHA WAS SUCCESSFULLY SOLVED';

                document.getElementById('g-recaptcha-response').value=='';

            }

        }; // end of onReturnCallback

</script>

There seems to be very little documentation on how to use this service without using a form.

Any help is much appreciated. Thanks!

 

[Dumber_Texan2]

UPDATE:

I tried this Javascript, but the captchaValue passed to the Controller is always null.

 var captcharesponse = grecaptcha.getResponse();

            alert('Token before post: ' + captcharesponse);

            $.ajax({

                type: "POST",

                url: '/PublicOffers/DisplayCaptchaResponse',

                data: "{captcharesponse:" + JSON.stringify(captcharesponse) + "}",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function (response) {

                    if (response.Success == true) {

                        alert("success");

                    } else {

                        alert("failed");

                    }

                },

                error: function (err) {

                    commonError(err);

                }

            });

Here is my Controller method.

        [HttpPost]

        public ActionResult DisplayCaptchaResponse(string captchaValue)

        {

            

            TempData["captchaResponse"] = captchaValue;

            return RedirectToAction("_OffersPage");

        }

[Dumber_Texan2]

I've also tried this. I added these lines to my Javascript function.

$("#@Html.IdFor(m => m.CaptchaValue)").val("True");

$("#@Html.IdFor(m => m.CaptchaToken)").val(captchaString);

I'm then trying to use them in my @AjaxActionLink like this.

new { offerId = @Model.Id, captchaValue = @Html.HiddenFor(m => m.CaptchaValue), captchaToken = @Html.HiddenFor(m => m.CaptchaToken) }

All I need is to get a True value to my captchaValue or the actual Token to my captchaToken, so I can use it in my Controller method.

This seems so much more difficult that it needs to be. #frustrated