Recaptcha is for stopping the spam. This web
service is given by google.
There are different ways to implement Recaptcha, but If we have to implement the
Recaptcha on Ajax PopUp, there Normal Recaptcha code will not work.
My scenario is - When I click on email button, an Ajax Pop Up opens and there I have to implement recaptcha.
Steps to implement re captcha in Ajax Pop Up
1. Make account in re captcha(http://www.google.com/recaptcha)
2. Re captcha will provide you 1 dll which you have to include in your project.
3. <script type="text/javascript" src=http://www.google.com/recaptcha/api/js/recaptcha_ajax.js
></script>
<script
type="text/javascript">
$(document).ready(function
()
CreateCaptcha();
});
function
CreateCaptcha() {
Recaptcha.create('Key Provided by ReCaptcha',
'recaptcha_div',
{
theme:"white",
callback:
Recaptcha.focus_response_field
});
}
$.ajax({
url:
'http://www.google.com/recaptcha/api/js/recaptcha_ajax.js',
dataType:
'script',
success:
function (result){
CreateCaptcha();
},
error:
function (xmlhttprequest, status, error) {function
(xmlhttprequest, status, error) {
$('#recaptcha_div').html('Cannot
create captcha'
);
} });
</script>
Include above code in head of your cshtml page and also include one div
<div id="recaptcha_div">
</div>
Above div is created to show the recaptcha in that div which we will get after ajax
pop up.
4. In your .cs file where you are calling the controller, on top of that add this:
[HttpPost]
[RecaptchaControlMvc.CaptchaValidatorAttribute]
and also include Recaptcha namespaces in your .cs file
Pass one variable in the function bool captchaValid and handle that.
This captchaValid will tell you whether a person wrote the matching letters or not.
If yes then it will return true automatically else false.
[HttpPost]
[RecaptchaControlMvc.CaptchaValidatorAttribute]
public
ActionResult SendMobileMail(SendEmailViewModel model,
bool captchaValid)
{
if
(!captchaValid)
{
return
Json(new { Success =
false, Msg = "Please enter correct
verification code" },
JsonRequestBehavior.AllowGet);
}
}
Note - There are different themes available in Recaptcha
-
red (default theme)
-
white
-
blackglass
-
clean