将从数据库检索到的图像显示为具有 CSS 样式的列表

Posted 2023-03-06

【中文标题】将从数据库检索到的图像显示为具有 CSS 样式的列表

【英文标题】：Display images retrieved from database as list with CSS style

【发布时间】：2012-06-07 07:52:13

【问题描述】：

我是 ASP.NET 的新手，我无法找到一种解决方案，将从数据库中检索到的图像显示为具有 CSS 样式的列表。我找到了一些解决方案，比如使用 DataList、DataGrid、Repeater 等，但它们最终都会在表格单元格中显示图像，并且间距是动态的，随获取的图像数量而变化。所以我想知道是否有任何方法可以在 ASP.NET 图像控件中显示图像以及 CSS 样式（例如如何使用 php，我知道这听起来很奇怪）。或者无论如何都可以在固定列中整齐地显示它们？我在这里是个傻瓜，所以请善待我并帮助我。任何建议表示赞赏。

【问题讨论】：

您可以编写自己的 Web 自定义控制/用户控件并使用样式/CSS 渲染图像，就像在 PHP 或其他中的方式一样。您所要做的就是覆盖 Render 事件。您还可以使用文字控制。另一种选择是将项目模板添加到数据网格并显示图像。最后，我建议首先使用 html CSS，它会列出你的一些图像，一旦你确定了，然后以其中一种方式实现。最后，您必须呈现您在示例 HTML 文件中创建的 HTML 标记。

【参考方案1】：

Repeater 不会创建任何表格，除非像这样使用，您可以使用 css 进行样式化，可能会对您有所帮助。

<ul>
    <asp:Repeater ID="rptr" runat="server">
        <ItemTemplate>
            <li>
                <ContentTemplate>
                    <asp:Image ID="lnk" runat="server">/asp:LinkButton>|
                </ContentTemplate>
            </li>
        </ItemTemplate>
    </asp:Repeater>
</ul>

【参考方案2】：

有很多方法可以做到这一点。

您可以创建一个简单的foreach 循环，您可以简单地渲染图像并显示结果。无需使用其他控件。我将图像放在li 中，因为您可以使用简单的 css 样式将它们呈现为表格。

List<string> lMyImages = new List<string>();
StringBuilder sRenderOnMe = new StringBuilder();

foreach(var OneImg in lMyImages)
   sRenderOnMe.AppendFormat("<li><img src=\"0\"></li>", OneImg);

OneLiteral.Text = sRenderOnMe.ToString():

您还可以使用asp:Repeater，您可以在其中呈现您喜欢的任何内容。如何：http://msdn.microsoft.com/en-us/magazine/cc163780.aspx

<asp:Repeater runat="server" id="Repeater1">
    <itemtemplate>
      <li><img src="<%# DataBinder.Eval(Container.DataItem, "ImgSrc") %>"></li>
    </itemtemplate>
</asp:Repeater>

您可以覆盖 DataList 并使用 div 随心所欲地呈现它，如何：How To Override Datalist To Be Rendered Into Divs Instead Of Table?

Css：这里是使用<li>的方式，您可以将显示的图像呈现为动态表：http://mirificampress.com/permalink/the_amazing_li

【参考方案3】：

如果您正在使用 WebForms 并希望坚持使用 .net 控件，请查看 ListView

【讨论】：

感谢详细教程，我试试看。