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

Question

我有一个 div <div runat="server" id="mugshots_container"></div> .我想用代码隐藏中的图像填充它。

这是我的代码:

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

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

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);
});