分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – ASP.NET MVC 4 FileContentResult运行两次，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我目前正在尝试将存储在数据库中的图像视为BLOB,为此,我创建了一个FileContentResult类型的Controller Action,如下所示：

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 Action发送一个参数,如下所示：

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).谢谢你的帮助！

解决方法

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

根据它的外观,你根本不需要那个AJAX调用.如果你只是创建带有动作路径的图像标记作为src,它应该可以工作.将您的成功回调从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));