How to generate unordered list dynamically in asp.net?

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)

Contents hide

Answers:

Method 1

Method 2

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

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

Method 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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating