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

Question

我有一个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 仍然是空的。我做错了什么？

Answer 1

请求完成后，更改 img.src 等属性没有任何意义，因为没有任何客户端在网络的另一端侦听以重新绘制您的页面。

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

Answer 2

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

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

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

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

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

伪代码：

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

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

Add images to div from Code Behind

c#

asp.net

code-behind