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 を使用して、次のように 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だと言われた後、私は次のようにコントローラーアクションにパラメーターを送信しようとしました:

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回実行せずに送信する方法はありますか? ここで基本的な何かが欠けていますか?

更新 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 に変更する必要がありました (当然)。お世話になりました!

4

1 に答える 1