ASP.NET MVC 4中的FileContentResult运行两次

Question

ASP.NET MVC 4中的FileContentResult运行两次

4

我目前正在尝试查看存储在数据库中的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);
    }
});

有人知道导致我的问题的原因吗？

更新

好的，现在在被告知是Ajax引起了问题后，我试图像这样向我的控制器操作发送参数：

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 (显然)。感谢您的所有帮助！

- Erik Karlstrand

什么触发了Ajax调用？ - adelb

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ant P · Accepted Answer

问题在于你首先向 ImageFile 控制器操作发出AJAX请求，然后当它成功返回结果时，你创建了一个引用该相同路由的DOM元素，因此浏览器会发出另一个请求来创建图像标签。

看起来你根本不需要那个AJAX调用。如果只是使用该操作的路由作为src来创建图像标签，就可以解决问题。将success回调从AJAX请求中取出来单独使用即可。

或者，如果你没有特别动态的需求，可以直接在图像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));