How to update image returned as File in ASP.NET MVC Controller using Ajax?

Question

I have a base image, and I use C# Graphics library to add data to it, and then return the image converted to byte array.

I have a controller:

    public ActionResult DisplayDR(int drNum)
    {
        ER dr = DataUtility.getDR(drNum, errors);
        return File(DrawDRUtility.getDRimageAsByteArray(dr), "image/png");
    }

That works fine with,

<img id="drImage" src="@Url.Action("DisplayDR")" width="1110"  height="484" alt="qr code" />

I need to be able to dynamically update the image and attempted with ajax with no luck.

Using: function getNewDRImage(instance) {

  var drNum = $(instance).data('val');
  var src = '@Url.Action("DisplayDR", "Home", new { area = "Part" })';
  $.ajax({
      type: "GET",
      url: src,
      data: { drNum : drNum },
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      error: function (err) {
          var msg = "Client side error, " + err;
          throwClientSideErrorMsg(msg)
      },
      success: function (data) {
         $('#drImage').attr("src", data.image);
      }
  });

}

and returning JSON like so,

    public JsonResult DisplayDMR(int drNum)
    {
        ER dr = DataUtility.getDR(drNum, errors);
        return
            Json(new { image = File(DrawDRUtility.getDRimageAsByteArray(dr), "image/png") }, JsonRequestBehavior.AllowGet);
    }

Gives me this error:

System.Web.HttpException (0x80004005): The controller for path '/[object Object]' was not found or does not implement IController.

What am I not doing correctly?

update, viewing the source after the ajax call I see why the error occurs, as this is what the response is:

<img id="dmrImage" src="[object Object]" alt="qr code" height="484" width="1110">

So I guess I am confused on what to do with the JSON data to update the image.

score 1 · Accepted Answer · edited May 23 '17 at 11:47

1

With your ajax code you're trying to load actual bytes of your image and assign that to the src attribute. That's not what the attribute expects.

All you need is to just assign a new image url as a string. The browser then will automatically fetch actual bytes and show the new image for you.

If you want to use the same url for the updated image you need to make sure the browser won't use your old cached image. Take a look at this answer for how to do this.

To add Cache-Control: header to your File() response use Response.AddHeader() method:

public ActionResult DisplayDR(int drNum)
{
    Response.AddHeader("Cache-Control", "no-store");
    ER dr = DataUtility.getDR(drNum, errors);
    return File(DrawDRUtility.getDRimageAsByteArray(dr), "image/png");
}

edited May 23 '17 at 11:47

Community

1
1

answered May 18 '17 at 03:19

Michael Domashchenko

1,370
8
13

Thank you for the response. Unfortunately I am still confused. So I changed my ajax to call another function to do "stuff," and then return. On Successful return, I call, var src = '@Url.Action("DisplayDR", "Home", new { area = "Part" })' + "?drNum = " + drNum; $('#drImage').attr("src", src); And the DisplayDr method never even gets called. Can you give me a small example of what I am supposed to be doing? I need to call ajax regardless, but I am hoping to be able to update the image on return from Ajax. Thank you. – eaglei22 May 18 '17 at 13:20
I did add the Cache-Control as mentioned to the DisplayDr method as well. – eaglei22 May 18 '17 at 13:22
Never mind. Closer looked revealed it was because I added the spaces before and after '=' for the query string. var src = '@Url.Action("DisplayDR", "Home", new { area = "Part" })' + "?drNum=" + drNum did the trick. Thanks again! – eaglei22 May 18 '17 at 13:35

How to update image returned as File in ASP.NET MVC Controller using Ajax?

1 Answers1