ASP.NET MVC 4 FileContentResult運行兩次

Question

我目前正在試圖查看存儲在數據庫中爲BLOB的圖像，要做到這一點，我創建的類型FileContentResult它看起來像這樣的控制器操作：

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"); 
    } 

它從數據庫中獲取正確的圖像數據，並且ConvertToBytes（）也能正常工作，但由於某種原因，將圖像返回到視圖後，它會跳回頂部並再次運行。

我使用Ajax調用從我的瀏覽這樣的方法：

$.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); 
    } 
}); 

有誰知道什麼可能導致我的問題？

更新

好了，現在後被告知，這是阿賈克斯的是把事情搞糟我試圖參數發送到我的控制器操作是這樣的：

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); 
} 

其中，可悲的是，不太好。那麼，有沒有辦法將參數發送到ImageFile（）而不使其運行兩次？我在這裏錯過了什麼？

更新2

最後我得到它的工作！這是它現在的樣子：

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)); 
} 

我只需要將源的參數從id更改爲imageId（duh）。謝謝你的幫助！

Answer 1

問題是，您首先向ImageFile控制器操作發出AJAX請求，然後，當它成功返回結果時，您將創建一個引用同一路由的DOM元素，以便瀏覽器在嘗試創建圖像標籤。

根據它的外觀，你完全不需要這個AJAX調用。如果您只是簡單地使用動作路徑創建圖像標籤src，它應該可以工作。將您的success回調從AJAX請求中提取出來，並直接使用它。

另外，如果你沒有做任何特別動態的事情，你可以直接在你的圖片src標記中使用路線，而不是使用Javascript。例如，如果你使用剃刀工作：

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

如果它需要是動態的，基於JavaScript的，你能不能別再AJAX，因爲你不需要它：

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));