How to generate unordered list dynamically in asp.net?

Question

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)

Presbyterial

Please add your table structure that store the file name or path in your database. – Bumbledom

Answer 1

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();

Anoxia

Does it produce the input with a label? – Terrill

Answer 2

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

Scurrile

i want to do this thing in a code behind, how can i do this thing there – Presbyterial

see the accepted answer in the following link #2343323 – Scurrile

The biggest issue with doing this in the code behind is that you have to recompile the code any time you want to change how the content is output. Tim posted a great example of how to do it using the built in ListView control and Imran gave a good example of just plain old looping. Both will give greater control over doing it in the code behind. – Bautista