Display image using FileStreamResult from ASP.Net MVC

Question

I am developing a captcha control which allows for refresh of the captcha image. I do not have the option of storing the image on the server. I am using ASP.Net MVC for this purpose.

My controller action code:

public FileResult GetCaptchaImage()
{

    // Create a CAPTCHA image using the text stored in the Session object.
    CaptchaImage ci = new CaptchaImage(this.Session
        ["CaptchaImageText"].ToString(), 300, 75);
    // Change the response headers to output a JPEG image.
    MemoryStream stream = new MemoryStream();
    ci.Image.Save(stream, ImageFormat.Png);
    stream.Seek(0, SeekOrigin.Begin);
    return new FileStreamResult(stream, "image/png");
}

The html code to display the image in the razor view

<img id="captchaImage" class="img-responsive" src="@Url.Action("GetCaptchaImage","Home")" />

Now, when I click on the refresh button, this img should get updated. On click of the button, I am calling the same controller action again using an ajax call and it is returning the FileStreamResult.

function RefreshCaptcha() {
$.ajax({
    url: "/Home/GetCaptchaImage"
}).then(function (data) {
    console.log(data);
});

}

Now, using JQuery, how do I set the response content in the image?

Please guide. Thanks very much.

Andy T · Accepted Answer · 2016-10-06 15:45:11Z

3

No need to use ajax, simply call the same URL, but pass in a no-cache querystring so it doesn't cache the value and then change the source of the image:

$('#captchaImage').attr('src', '/Home/GetCaptchaImage?nc=' + (new Date).getTime(););

In my example, I'm using epoch time, but you could simply use a random value.

answered Oct 6, 2016 at 15:45

Andy T

9,9315 gold badges56 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shilpa Nagavara Over a year ago

Thanks very much Andres. That helped.

Collectives™ on Stack Overflow

Display image using FileStreamResult from ASP.Net MVC

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related