Category / Section
How to render captcha control in ASP.NETMVC?
1 min read
Description
To render ejCaptcha in ASP.NETMVC platform.
Solution
Captcha can be rendered in AngularJS through custom tags. Render the control along with the required properties through controller and pass it back to view through AJAX post.
public ActionResult Render(string val)
{
Captcha captcha = new Captcha();
captcha.ID = "captcha1";
Syncfusion.JavaScript.EssentialJavaScript js = new Syncfusion.JavaScript.EssentialJavaScript();
js.Captcha(captcha.ID);
Syncfusion.JavaScript.CaptchaPropertiesBuilder build = new Syncfusion.JavaScript.CaptchaPropertiesBuilder(captcha);
captcha.CaptchaModel = new Syncfusion.JavaScript.Models.CaptchaProperties();
build.EnableAudio(true);
build.RequestMapper("Refresh");
captcha.CaptchaModel.imageValue = captcha.CaptchaModel.RenderCaptchaImage();
var d = captcha;
return Content(captcha.ToHtmlString());
}
public ActionResult loadAudio(HttpContext context)
{
Syncfusion.JavaScript.ImageHandler captchaImg = new Syncfusion.JavaScript.ImageHandler();
captchaImg.ProcessRequest(context);
return Content("");
}
Render any custom tag in HTML:
<div> <captcha></captcha> </div>
Render this HTML tag as captcha through success event of AJAX.
var app = angular.module('app', []);
app.directive("captcha", function () {
return {
template: "<div id='capt'></div>",
compile: function (element, attributes) {
return {
pre: function (scope, element, attributes, controller, transcludeFn) {
$.ajax({
type: "GET",
crossDomain: true,
contentType: "image/gif",
url: '@Url.Action("Render")',
success: function (e) {
var contentElem = document.createRange().createContextualFragment(e);
document.getElementById('capt').appendChild(contentElem);
$("#captcha1").ejCaptcha({ showAudioButton: true });
document.getElementById('captcha1').addEventListener('click', function (e) {
debugger
if (e.target.classList.contains('e-volume-up')) {
getAudio();
}
if (e.target.classList.contains('e-reload')) {
captchReload();
}
})
},
error: function () {
alert("Error while inserting data");
}
});
}
}
},
controller: function ($scope) {
}
};
});
function getAudio(e) {
$.ajax({
type: "GET",
url: '@Url.Action("loadAudio?audio")',
succes: function (e) { }
});
}
Now the captcha will be rendered as follows
Sample: captcha1821595258
