将图像从代码隐藏添加到 div答案

【问题标题】：Add images to div from Code Behind将图像从代码隐藏添加到 div
【发布时间】：2016-05-05 21:41:13
【问题描述】：

我有一个 div <div runat="server" id="mugshots_container"></div>。我想用 Code Behind 中的 images 填充它。

这是我的代码：

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);
    var timer = new System.Threading.Timer((x) => { RefreshMugshots(); }, null, TimeSpan.Zero, TimeSpan.FromMinutes(5));
}

protected void RefreshMugshots()
{
    DataTable dt = this.ExecSprocReturnDataTable(SPROC_MUGSHOTS_GET);

    foreach (DataRow row in dt.Rows)
    {
        string identifier = row["identifier"].ToString();

        HtmlImage img = mugshots_container.Controls.OfType<HtmlImage>()
                                                   .SingleOrDefault((x => x.Attributes["identifier"] == identifier));

        if (img != null)
        {
            img.Src = ConvertByteArrayToBase64String(row["image"] as byte[]);
        }
        else
        {
            img = new HtmlImage() { Src = ConvertByteArrayToBase64String(row["image"] as byte[]) };
            img.Attributes.Add("identifier", identifier);

            mugshots_container.Controls.Add(img);
        }
    }
}

代码执行良好，HtmlImage 已添加到 mugshots_container，但我在页面上看不到图像。当我打开调试器时， div 仍然是空的。我做错了什么？

【问题讨论】：

如何强制页面在浏览器中刷新？您对<div> 所做的所有更改都发生在服务器上。页面加载后，浏览器与服务器断开连接，除非您使用 SignalR 推送或页面上的计时器拉取，否则您无法推送更改。
您无法以标准方式执行此操作，如果没有完整的回发，您的图像将保留在服务器中，而客户端将永远看不到它们。
您应该选择更新面板或客户端解决方案。

标签： c# asp.net code-behind

【解决方案1】：

这里有几个可能的问题。第一：

var timer = new System.Threading.Timer((x) => { RefreshMugshots(); }, null, TimeSpan.Zero, TimeSpan.FromMinutes(5));

这是在单独的线程上执行的。到您的线程执行时，原始事件已经完成并且页面已返回到浏览器。不会再发送数据，客户端也不知道事情已经更新。删除时间，只需运行 RefreshMugshots(); 与您的其他页面加载逻辑内联，然后查看您的图像是否显示。

第二件事是大多数浏览器对可以存储在 HTML 图像标签中的 base-64 编码数据的数量有限制。超过该限制的任何内容都将导致图像不显示。

不需要处理线程和 SignalR 的替代（更简单）方法是使用客户端脚本（例如，setInterval(...) 调用返回更新图像 URL 的处理程序，然后适当地设置图像源在你的 DOM 元素上。

伪代码：

$(document).ready(function() {
    setInterval(function() {
        var newMugshotUrl = getMugshotUrl(someIdentifier);
        $('#myMugshotImage').attr('src', newMugshotUrl);
    }, 60000);
});

【讨论】：

【解决方案2】：

请求完成后，更改诸如 img.src 之类的属性没有任何意义，因为没有任何客户端在线路的另一端监听以重新绘制您的页面。

为此，您应该在客户端和服务器之间使用某种实时流，例如 SignalAir。 http://www.asp.net/signalr

【讨论】：