Captcha Image not reloaded on Reset

[Mardorz]

I'm using Captcha for MVC.

I got everything working on ASP.Net 6, except for the Reset.

The Reset-Endpoint is called properly and gives back sucess with the CaptchaModel (captchaUrl, captchaId).

But the Url is not set in the src-Tag of the Captcha-Image, so the Endpoint for getting the rendered Captcha-Image is not called, instead the src-tag is just emptied and the field becomes grey.

When I set the Image-Url I got in the xhr-Request into the src-Tag manually it works as expected.

Audio and Validation working as expected.

XHR:

View Code:

  <p>Captcha:</p>
      @(Html.Kendo().Captcha()
                    .Name("captcha")
                    .CaptchaImage((string)ViewData["Captcha"])
                    .CaptchaId((string)ViewData["CaptchaID"])
                    .DataCaptchaField("Captcha") 
                    .DataCaptchaIdField("CaptchaID") 
                    .Handler(handler => handler.Action("Reset", "Captcha"))
                    .AudioHandlerFunction("audioHandler")
                    .ValidationHandler(handler => handler.Action("Validate", "Captcha"))
                    .ValidateOnBlur(true)
                    .ResetButton(true)
                    .AudioButton(true)
       )

<script>
  $(document).on("kendoReady",
  function() {
        $("#mailform").kendoValidator();
   });

  function audioHandler(args) {
         args.success("@Url.Action("Audio", "Captcha")?captchaId=" + args.data.CaptchaID);
  }
</script>

Controller:

  public class CaptchaController : Controller
    {
        public ActionResult Image(string captchaId)
        {
            CaptchaImage captcha = (CaptchaImage)HttpContext.Session.Get<CaptchaImage>("captcha" + captchaId);
            var image = CaptchaHelper.RenderCaptcha(captcha);
            byte[] bmpBytes;

            using (MemoryStream ms = new MemoryStream())
            {
                image.Save(ms, ImageFormat.Png);
                bmpBytes = ms.ToArray();
            }

            return File(bmpBytes, "image/png");
        }

        [HttpGet]
        public ActionResult Reset()
        {
            CaptchaImage newCaptcha = CaptchaHelper.GetNewCaptcha();

            HttpContext.Session.Set("captcha" + newCaptcha.UniqueId,  newCaptcha);

            return Json(new CaptchaModel { Captcha = Url.Action("image", "captcha", new { captchaID = newCaptcha.UniqueId }), CaptchaID = newCaptcha.UniqueId });
        }

        public ActionResult Audio(string captchaId)
        {
            CaptchaImage captcha = (CaptchaImage)HttpContext.Session.Get<CaptchaImage>("captcha" + captchaId);

            byte[] bmpBytes;

            using (MemoryStream audio = CaptchaHelper.SpeakText(captcha))
            {
                bmpBytes = audio.ToArray();
            }

            return File(bmpBytes, "audio/wav");
        }

        [HttpGet]
        public ActionResult Validate(CaptchaModel model)
        {
            CaptchaImage captchaImage = (CaptchaImage) HttpContext.Session.Get<CaptchaImage>("captcha" + model.CaptchaID);
            return Json(CaptchaHelper.Validate(captchaImage, model.Captcha.ToUpperInvariant()));
        }
    }

 

 

 

[Mardorz]

The Kendo-Captcha uses uppercase JsonProperties. In my case they were lowercase like in standard json serialization.

Editing the model did it:

  public class CaptchaModel
    {
        private string _captchaValue;

        [System.Text.Json.Serialization.JsonPropertyName("Captcha")]
        public string Captcha
        {
            get
            {
                return string.IsNullOrEmpty(_captchaValue) ? "" : _captchaValue;
            }
            set
            {
                _captchaValue = value;
            }
        }
        [System.Text.Json.Serialization.JsonPropertyName("CaptchaID")]
        public string CaptchaID { get; set; }
    }

[Yanislav]

Hello Dave,

Thank you for sharing your solution with the community. It will surely help someone who is working on a similar to your scenario.