创建图像背后的代码的 Fancybox 问题答案

【问题标题】：Fancybox issue with code behind created images创建图像背后的代码的 Fancybox 问题
【发布时间】：2014-05-03 16:37:54
【问题描述】：

来自数据库图像计数的带有 ashx 的图像后面（使用“for”）。问题是每张图片显示两次..我搜索了它但找不到解决方案。谢谢..

fancybox 版本：2.1.5 jquery : 最新版本。

 Label lbl = new Label();
                lbl.Text = "<a  class=fancybox rel=group href=picture0.ashx?id=" + dt.Rows[i]["id"].ToString() + "    style=margin-right:15px;>";
                 Panel1.Controls.Add(lbl);



                Image img = new Image();
                img.ImageUrl = "Picture0.ashx?id="+dt.Rows[i]["id"].ToString();
                img.Width = 110;
                img.Height = 80;                  
                Panel1.Controls.Add(img);

                Label lbl2 = new Label();
                lbl2.Text = "</a>";
                Panel1.Controls.Add(lbl2);

和html部分是;

$(文档).ready(函数 () { $('.fancybox').fancybox({ 'type': 'image', }); });

     <asp:Panel ID="Panel1" runat="server">

【问题讨论】：

包含您的代码发出的实际源 HTML 可能会有所帮助。您能在生成的标记中看到重复项吗？

标签： asp.net fancybox ashx

【解决方案1】：

发生这种情况是因为您生成链接的方式，ASP.NET Label 控件转换为 html span 元素，文本是开始和结束标记之间的内容。基本上发生的事情是您破坏了 html，并且您的浏览器正在附加额外的打开和关闭 a 标签并在此过程中进行重复。

您的渲染输出如下所示：

<span>
    <a  class=fancybox rel=group href=picture0.ashx?id=someid>
    <img src=yoursrc/>
</span>
</a>

将您的 Label 控件更改为 Literals 并且您的代码应该可以工作，您还应该将您的 html 属性括在引号中。

编辑：除非有理由在代码隐藏中创建控件，否则我建议使用 ASP.NET 标记，然后设置您需要在代码隐藏中动态填写的属性。

【讨论】：