title: Returning dynamic image from action method using Jquery ajax
body: <p>I have an action method that dynamically generates a captcha image and returns as a binary file. On my view page, I am able to get the captcha displayed when the page loads. I also have a refresh link that calls the action method to get a new captcha image using $.ajax which is not displaying a new captcha image when clicked. The $.jax call is successfully made but the binary file is not getting displayed. I want to display the new image without reloading the whole page when the refresh link is clicked.</p>
  
  <p>Am I missing something or is there another way to call the action method without refreshing the page using jquery. Any help would be appreciated. Below is my code</p>
  
  <p>// Action method that generates the image</p>
  
  <pre><code>public class HomeController : Controller
  {
          public FileContentResult CaptchaImage(bool noisy = true)
          {
              var rand = new Random((int)DateTime.Now.Ticks);
  
              //generate new question
              int a = rand.Next(10, 99);
              int b = rand.Next(0, 9);
              var captcha = string.Format("{0} + {1} = ?", a, b);
  
              //store answer
              Session["Captcha"] = a + b;
  
              //image stream
              FileContentResult img = null;
  
              using (var mem = new MemoryStream())
              using (var bmp = new Bitmap(130, 30))
              using (var gfx = Graphics.FromImage((Image)bmp))
              {
                  gfx.TextRenderingHint = TextRenderingHint.ClearTypeGridFit;
                  gfx.SmoothingMode = SmoothingMode.AntiAlias;
                  gfx.FillRectangle(Brushes.White, new Rectangle(0, 0, bmp.Width, bmp.Height));
  
                  //add noise
                  if (noisy)
                  {
                      int i, r, x, y;
                      var pen = new Pen(Color.Yellow);
                      for (i = 1; i &lt; 10; i++)
                      {
                          pen.Color = Color.FromArgb(
                          (rand.Next(0, 255)),
                          (rand.Next(0, 255)),
                          (rand.Next(0, 255)));
  
                          r = rand.Next(0, (130 / 3));
                          x = rand.Next(0, 130);
                          y = rand.Next(0, 30);
  
                          gfx.DrawEllipse(pen, x - r, y - r, r, r);
                      }
                  }
  
                  //add question
                  gfx.DrawString(captcha, new Font("Tahoma", 15), Brushes.Gray, 2, 3);
  
                  //render as Png
                  bmp.Save(mem, System.Drawing.Imaging.ImageFormat.Png);
                  img = this.File(mem.GetBuffer(), "image/png");
              }
  
              return File(img.FileContents, img.ContentType);
          }
  
  }
  </code></pre>
  
  <p>// View page that calls the action method to display captcha</p>
  
  <pre><code>&lt;a id="GetCaptcha" href="javascript:void(0)"&gt;Refresh&lt;/a&gt;
  &lt;img id="CaptchaImg" alt="Captcha" src="@Url.Action("CaptchaImage")" style="" /&gt;
  
  @section Scripts{
      @Scripts.Render("~/bundles/jqueryval")
      &lt;script&gt;
          $(function () {
              $('#GetCaptcha').click(function () {                
  
                  $.ajax({
                      type: "GET",
                      url:  '@Url.Action("CaptchaImage")', 
                      contentType: "image/png",
                      success: function (data) {
                          alert("Success"); // For testing
                          $('#CaptchaImg').attr('src', "data:image/png;base64," + data);
                      },
                     error: function(error, txtStatus) {
                              console.log(txtStatus);
                              console.log('error');
                          }
                  });
              });
          });
  
      &lt;/script&gt;
  }
  </code></pre>