如何使用 Ajax 更新作为 MVC 控制器中的文件返回的图像 ASP.NET

Question

我有一个基本映像，我使用 C# 图形库向其添加数据，然后返回转换为字节数组的图像。

我有一个控制器：

    public ActionResult DisplayDR(int drNum)
    {
        ER dr = DataUtility.getDR(drNum, errors);
        return File(DrawDRUtility.getDRimageAsByteArray(dr), "image/png");
    }

这适用于，

<img id="drImage" src="@Url.Action("DisplayDR")" width="1110"  height="484" alt="qr code" />

我需要能够动态更新图像并尝试使用 ajax 但没有运气。

用： function getNewDRImage(instance( {

  var drNum = $(instance).data('val');
  var src = '@Url.Action("DisplayDR", "Home", new { area = "Part" })';
  $.ajax({
      type: "GET",
      url: src,
      data: { drNum : drNum },
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      error: function (err) {
          var msg = "Client side error, " + err;
          throwClientSideErrorMsg(msg)
      },
      success: function (data) {
         $('#drImage').attr("src", data.image);
      }
  });

}

并像这样返回 JSON，

    public JsonResult DisplayDMR(int drNum)
    {
        ER dr = DataUtility.getDR(drNum, errors);
        return
            Json(new { image = File(DrawDRUtility.getDRimageAsByteArray(dr), "image/png") }, JsonRequestBehavior.AllowGet);
    }

给我这个错误：

System.Web.HttpException (0x80004005(：找不到路径"/[对象对象]"的控制器或未实现IController。

我做错了什么？

更新，在 ajax 调用后查看源代码我明白为什么会发生错误，因为这就是响应：

<img id="dmrImage" src="[object Object]" alt="qr code" height="484" width="1110">

所以我想我对如何处理 JSON 数据来更新图像感到困惑。

Answer 1

使用 ajax 代码，您尝试加载图像的实际字节并将其分配给 src 属性。这不是该属性所期望的。

您所需要的只是将一个新的图像 url 分配为字符串。然后，浏览器将自动获取实际字节并为您显示新图像。

如果要对更新的图像使用相同的网址，则需要确保浏览器不会使用旧的缓存图像。看看这个答案，了解如何做到这一点。

要将标头添加到File()响应Cache-Control:请使用Response.AddHeader()方法：

public ActionResult DisplayDR(int drNum)
{
    Response.AddHeader("Cache-Control", "no-store");
    ER dr = DataUtility.getDR(drNum, errors);
    return File(DrawDRUtility.getDRimageAsByteArray(dr), "image/png");
}