ASP.NET MVC 4 FileContentResult Runs Twice

Question

I'm currently trying to view the images that are stored in the database as a BLOB, to do this, I created a Controller Action of type FileContentResult, which looks like this:

public FileContentResult ImageFile(string imageId) { var client = new WcfTestClient(); DataTable table = client.GetImageData(imageId); var image = ConvertToBytes(table); byte[] bytes; bytes = image[0].Values.ElementAt(0); return File(bytes, @"image/png"); } 

It gets the correct image data from the database, and ConvertToBytes () works correctly, but for some reason, after returning the image to the view, it goes back to the beginning and starts again.

I use Ajax to call a method from my view as follows:

 $.ajax({ url: "/Home/ImageFile", type: "GET", data: { "imageId": imageId }, success: function (data) { var image = document.createElement('img'); image.src = "/Home/ImageFile?id=" + imageId; image.width = 100; image.height = 100; div.appendChild(image); } }); 

Does anyone know what might cause my problem?

Update

Ok, now, after I was told that it was Ajax, it messed it up, I tried to send the parameter to my Controller action as follows:

 var images = JSON.parse(window.localStorage.getItem("JsonImages")); var div = document.getElementById('imgOutput'); for (var i = 0; i < images.length; i++) { var imageId = images[i].pi_Id; var imgId = JSON.parse('{"imageId":' + imageId + '}'); var img = document.createElement('img'); img.src = "/Home/ImageFile?id=" + imgId; img.width = 100; img.height = 100; div.appendChild(img); } 

Which, unfortunately, does not work very well. So, is there a way to send the ImageFile () parameter without running it twice? Am I missing something here?

Update 2

Finally, I got him to work! Here's what it looks like now:

 var images = JSON.parse(window.localStorage.getItem("JsonImages")); var div = document.getElementById('imgOutput'); var createImage = function (src) { var img = document.createElement('img'); img.src = src; img.height = 100; img.width = 100; return img; } for (var i = 0; i < images.length; i++) { var imageId = images[i].pi_Id; var imageSrc = "/Home/ImageFile?imageId=" + imageId; div.appendChild(createImage(imageSrc)); } 

I just needed to change the original parameter from id to imageId (duh). Thank you for your help!

Answer 1

The problem is that you first issue an AJAX request for the ImageFile controller ImageFile , and then when it returns the result, you create a DOM element that references the same route, so the browser issues another request in its attempt to create an image tag.

You don't need this AJAX call at all in appearance. If you just create an image tag with an action path like src , it should work. Extract the success callback from the AJAX request and just use it yourself.

Alternatively, if you are not doing anything particularly dynamic, you can simply use the route directly in your src tag and not use Javascript at all. For example, if you are working with Razor:

 <image src="@(String.Format("/Home/ImageFile?id={0}", Model.MyImage))" height="100" width="100" /> 

If it should be dynamic and Javascript-based, you can just drop AJAX because you don't need it:

 function createImage(src, width, height) { var img = document.createElement('img'); img.src = src; img.height = height; img.width = width; return img; } var someId = /* Whatever your ID is */; var imgSrc = "/Home/ImageFile?id=" + someId; div.appendChild(createImage(imgSrc, 100, 100));