jquery - ASP.NET MVC 4 FileContentResult 运行两次

Question

我当前正在尝试查看以 BLOB 形式存储在数据库中的图像，为此我创建了一个 FileContentResult 类型的 Controller 操作，如下所示:

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() 也能正常工作，但由于某种原因，在将图像返回到 View 后，它会跳回顶部并再次运行。

我使用 Ajax 从我的 View 中调用该方法，如下所示:

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

有谁知道什么可能导致我的问题？

更新

好吧，现在在被告知是 Ajax 搞砸了之后，我尝试向我的 Controller 操作发送一个参数，如下所示:

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(废话)。感谢您的帮助!

Answer 1

问题是，您首先向 ImageFile Controller 操作发出 AJAX 请求，然后，当它成功返回结果时，您创建一个引用同一路由的 DOM 元素，因此浏览器发出尝试创建图像标记的另一个请求。

从表面上看，您根本不需要 AJAX 调用。如果您只是使用操作路径作为 src 创建图像标记，它应该可以工作。从 AJAX 请求中提取您的 success 回调并单独使用它。

或者，如果您没有做任何特别动态的事情，您可以直接在图像 src 标记中使用路由，而根本不使用 Javascript。例如，如果您使用 Razor:

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