0

HTML テーブルの行がクリックされると、画像のバイト配列を含む json オブジェクトを返す MVC3 コントローラーに対して ajax 呼び出しが行われますが、空の画像がビューに表示されます。これはIE 7から9まで動作するはずです

コントローラーコードは次のとおりです。

    [HttpPost]
    public ActionResult RenderImage(string code)
    {
        ImageVM viewmodel = GetImage(code)
        return Json(viewmodel.Chart, "image/png");
     }

ajax 呼び出しを発生させて画像を表示するための JavaScript コードは次のとおりです。

  $(document).ready(function () {
      $('#Table tr').click(function (event) { 
      var id= $(this).attr('id')
         $.post("/Gateway/RenderImage", { "code": id },
     function (data) {
                alert(data);
            $('#ChartDiv').html('<img height="200" width="250" src="data:image/png;base64,' + data + '" />');

            });
       });
  });
4

1 に答える 1

1

私はあなたのコードを少し変更しました、そしてこれは私と一緒に働いています:)

 [HttpPost]
        public virtual JsonResult RenderImage(string code)
        {
//for test data Im using the below, you can use yours :   GetImage(code)        
var data =   
  @"iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC";
            return Json(data);
        }

およびJavascriptで（1つのバックスラッシュを削除）

 $('#Table tr').click(function (event) {
        var id = $(this).attr('id')
        $.post("Gateway/RenderImage", { "code": id },
    function (data) {
        alert(data);
        $('#ChartDiv').html('<img height="200" width="250" src="data:image/png;base64,' + data + '" />');

    });
    });

[編集]上記のコードをpngファイルで機能させるために、コントローラーのアクションを以下に変更できます。

[HttpPost]
public virtual JsonResult RenderImage(string code)
{
    var filePath = "~/Images/PngExampleImag.png";
    var ImageBytes = System.IO.File.ReadAllBytes(Server.MapPath(filePath));
    var data = Convert.ToBase64String(ImageBytes);
    return Json(data);
}
于 2012-08-02T10:39:32.947 に答える