jquery - ASP.NET MVC 4 FileContentResult runs twice -

i'm trying view images stored in database blobs, i've created controller action of type filecontentresult looks 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 correct image data database , converttobytes() works correctly reason, after returning image view jumps top , runs again.

i'm using ajax call method view this:

$.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 know might cause problem?

update

okay, after being told ajax messed i've tried send parameter controller action this:

var images = json.parse(window.localstorage.getitem("jsonimages")); var div = document.getelementbyid('imgoutput');  (var = 0; < 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, sadly, doesn't work well. so, there way send parameter imagefile() without making run twice? missing fundamental here?

update 2

finally got work! how looks 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; }  (var = 0; < images.length; i++) {     var imageid = images[i].pi_id;     var imagesrc = "/home/imagefile?imageid=" + imageid;     div.appendchild(createimage(imagesrc)); } 

i needed change source's parameter id imageid (duh). thank help!

the problem first issue ajax request imagefile controller action, then, when returns result successfully, create dom element references same route, browser issues request in attempt create image tag.

you don't need ajax call @ all, looks of it. if create image tag route of action src, should work. pull success callback out of ajax request , use on own.

alternatively, if you're not doing particularly dynamic, can use route directly in image src tag , not use javascript @ all. example, if you're working razor:

<image src="@(string.format("/home/imagefile?id={0}", model.myimage))"     height="100" width="100" /> 

if needs dynamic , javascript based, can drop ajax, because 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 id */; var imgsrc = "/home/imagefile?id=" + someid; div.appendchild(createimage(imgsrc, 100, 100));