如何在ASP.NET动态生成无序列表？

Question

我想生成一个无序列表，其中包含标签，以显示我数据库中的图片。我查看了项目符号列表，但它不能在图片方面使用。如何从数据库结果动态生成它呢？例如，如果我的数据库中有6张图片，那么希望生成的列表应该像这样。

<ul id="">

    <li><img src="Resources/img14.jpg" alt="" title=""/></li>

    <li><img src="Resources/img15.jpg" alt="" title=""/></li>

    <li><img src="Resources/img17.jpg" alt="" title=""/></li>

    <li><img src="Resources/img2.jpg" alt="" title=""/></li>

    <li><img src="Resources/img5.jpg" alt="" title=""/></li>

    <li><img src="Resources/img3.jpg" alt="" title=""/></li>

</ul>

表结构

User Name   nvarchar(50)    
Pic Path    nvarchar(MAX)

- Jelo Melo

---

请在您的数据库中添加存储文件名或路径的表结构。 - Jonas T

Answer 1

为了实现你想要的功能，最好且最简单的方法是使用 <asp:ListView> 控件。这里有一个很好的教程，与你所做的基本相似：http://weblogs.asp.net/scottgu/archive/2007/08/10/the-asp-listview-control-part-1-building-a-product-listing-page-with-clean-css-ui.aspx。基本上，它将涉及创建一个像这样的 <asp:ListView> 控件；

<asp:ListView ID="ListView1" runat="server">
    <LayoutTemplate>
        <ul>
            <asp:PlaceHolder ID="itemPlaceholder" runat="server" />    
        </ul>                
    </LayoutTemplate>
    <ItemTemplate>
        <li>
             <img src='<%#Eval("PicPath")%>' alt='<%#Eval("UserName")%>' />
        </li>
    </ItemTemplate>
    <EmptyDataTemplate>
        <p>Nothing here.</p>
    </EmptyDataTemplate>
</asp:ListView>

然后将您的数据绑定到它上面。

this.ListView1.DataSource = YourDataSource;
this.ListView1.DataBind();

- Tim B James

---

它是否生成带有“标签”的“输入”？ - Si8

Answer 2

我猜你的数据源是一个包含一个数据表和一个名为picpath的字段的DataSet ds，那么你可以直接在aspx中编写迭代。

<ul id="">
    <% foreach (DataRow dr in ds.Tables[0].Rows) { %>

        <li><img src="<% dr[\"picpath\"].ToString() %>" alt="" title=""/></li>

    <% } %>
</ul>

如果要在服务器端执行此操作，请参阅以下链接中的被接受的答案： 请查看以下链接中的被接受的答案：使用asp.net呈现无序列表

- Imran Rizvi

---

我想在代码后台完成这件事，我该如何在那里做到这一点？ - Jelo Melo

请参考以下链接中的最佳答案：https://dev59.com/KkzSa4cB1Zd3GeqPkzwu - Imran Rizvi

在代码后台完成这项任务的最大问题是，每次想要更改内容输出方式时都必须重新编译代码。Tim发布了一个很好的示例，演示如何使用内置的ListView控件实现此操作，Imran则提供了一个循环的好例子。两者都可以在代码后台中获得更多的控制权。 - Nick Bork