从 SQL 服务器数据库中的 ul 中填充图形 img

Fill figure img in ul from SQL Server database

我正在尝试创建一个 Asp.Net 页面(没有剃须刀)来列出和显示数据库中的一些产品。我需要从我的 SQL Server 2008 R2 数据库中显示图像、说明和 PDF 路径。

我一直在寻找示例,但其中很多都是关于填充表格的,而不是 ul 元素。我看过一些剃刀页面示例,但我不知道它是如何工作的。

注意:我不想更改此样式,因为我使用了一些很酷的 bootstrap css 悬停工具。我不想搞砸,但如果你认为有必要改变它,那我当然可以想办法。

代码:

<ul class="grid cs-style-5" id="thumbs">
    <li>
        <figure>
            <img class="img-responsive" src="#">
            <figcaption>
                <h4>Product Name/h4>
                <span>Explanation here.</span>
                <a href="#" data-toggle="modal"  data-target="#myModal">Technical Info</a>
            </figcaption>
        </figure>
    </li>
</ul>

更新:

我想出了如何做我需要的事情。我在这里发帖以防其他人也需要。我没有使用 asp:repeater 但我使用了 DataList。它工作得很好。

固定代码:

<asp:DataList ID="DataList1" runat="server">
           <HeaderTemplate><ul class="grid cs-style-5" id="thumbs"></HeaderTemplate>
           <ItemTemplate>
               <li>
                    <figure>
                        <img class="img-responsive" src='<%# Eval("urun_resim") %>' />
                          <figcaption>
                             <h4>Product Name: <%#Eval("urun_isim") %>i</h4> <br />
                             <a href='<%#Eval("urun_pdf") %>' Target="_blank"></a>
                         </figcaption>
                    </figure>
               </li>
           </ItemTemplate>
           <FooterTemplate></ul></FooterTemplate>
</asp:DataList>

中继器是个不错的选择。我同意这个解决方案。即使这样也会帮助您进行响应式设计。这甚至重量轻。