How to generate unordered list dynamically in asp.

2019-02-09 14:41发布

I want to generate a unordered list which contains tag for showing images in my database, I take a look at bulleted list, but it is not working with image. How can i dynamically generate it from the results in a database, for eg, if i have 6 images in data base then i want the list which generates must look like this.

<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>

Table Structure

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

2条回答
唯我独甜
2楼-- · 2019-02-09 15:02

I suppose your datasource is a DataSet ds that has one DataTable and a field picpath, then you can write the iteration directly in aspx

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

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

    <% } %>
</ul>

To do it server side see the accepted answer in below link see the accepted answer in the following link Rendering an unordered list using asp.net

查看更多
爱情/是我丢掉的垃圾
3楼-- · 2019-02-09 15:17

For what you are trying to achieve, it would be best and easiest just to use a <asp:ListView> control.

There is a good tutorial here on how to use it, and pretty much similar to what you are doing 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

It would basically involve you creating a <asp:ListView> control like;

<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>

Then binding your data to it.

this.ListView1.DataSource = YourDataSource;
this.ListView1.DataBind();
查看更多
登录 后发表回答