Create HTML table from server side

Question

I have stored my tags in the SQL Server database, TABLE NAME: Tags COLUMNS

TagID
TagName
TagURL

Now I want to create a list like below in the aspx page, created from the database. I have done the work of keeping all the tags and tagURL from the database in a dataset. But I have no idea how to create dynamic HTML list or asp.net list from database.

I have to create list like this:

<ul>
            <li class="tag1"><a href="#">Lorem ipsum</a></li> 
            <li class="tag2"><a href="#">Dolor sit amet</a></li>

            <li class="tag3"><a href="#">Consectetur adipiscing elit</a></li>
            <li class="tag2"><a href="#">Proin </a></li>
            <li class="tag4"><a href="#">Sagittis libero</a></li>
            <li class="tag1"><a href="#">Aliquet augue</a></li>
            <li class="tag1"><a href="#">Quisque dui lacus</a></li>
            <li class="tag5"><a href="#">Consequat</a></li>

            <li class="tag2"><a href="#">Dictum non</a></li>
            <li class="tag1"><a href="#">Venenatis et tortor</a></li>
            <li class="tag3"><a href="#">Suspendisse mauris</a></li>
            <li class="tag4"><a href="#">In accumsan </a></li>
            <li class="tag1"><a href="#">Egestas neque</a></li>
            <li class="tag5"><a href="#">Mauris eget felis</a></li>

            <li class="tag1"><a href="#">Suspendisse</a></li>
            <li class="tag2"><a href="#">condimentum eleifend nulla</a></li>
        </ul>

Where

>  class="tag <random number from 1-5>"

Nicky Waites · Accepted Answer · 2011-03-24 09:41:42Z

1

You will probably want to use something like an asp.net repeater. Here is an example from the msdn library while I write up a more suitable one.

Digging Into the Repeater

This is my understanding of your requirements. I'm not sure if the random number generation could be handled better.

 <asp:Repeater ID="Repeater1" runat="server">
    <HeaderTemplate>
        <ul>
    </HeaderTemplate>
    <ItemTemplate>
        <li class="<%# String.format("tag{0}", GetRandom())%>"><a href="<%# Eval("TagUrl") %>"><%# Eval("TagName")%></a></li>
    </ItemTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>
</asp:Repeater>

Code Behind

Private _random As Random
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then

        _random = New Random

        Dim dt As New DataTable
        dt.Columns.Add("TagName")
        dt.Columns.Add("TagUrl")


        dt.Rows.Add("Test1", "TestUrl1")
        dt.Rows.Add("Test2", "TestUrl2")
        dt.Rows.Add("Test3", "TestUrl3")
        dt.Rows.Add("Test4", "TestUrl4")
        dt.Rows.Add("Test5", "TestUrl5")

        Repeater1.DataSource = dt
        Repeater1.DataBind()

    End If


End Sub

Protected Function GetRandom() As Integer
    Return _random.Next(1, 5)
End Function

edited Mar 24, 2011 at 9:41

answered Mar 24, 2011 at 8:38

Nicky Waites

2,42818 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Over a year ago

thanks for your answer but I am getting message of "string' does not contain a definition for 'format" ... at <li class="<%# String.format("tag{0}", GetRandom())%>"> <a href="<%# Eval("TagUrl")%>"> <%# Eval("TagName")%></a> </li>

Nicky Waites Over a year ago

@Chris That's a strange one. Are you using ASP.NET WebForms? C#/VB? You can also try doing this instead <li class="<%= "tag" & GetRandom() %>"> This code is obviously VB.NET but I've just tested it under c# ok.

Ozzy · Accepted Answer · 2011-03-24 08:42:17Z

0

I would use a repeater as well. However there are two more options:

Create a custom web control for this purpose
Use a literal control and assign the html to its Text property. Not very elegant, but might work if you just want a quick-and-dirty solution. Remember to set the literals Mode-property to "Passthrough" in order to allow html-tags.

answered Mar 24, 2011 at 8:42

Ozzy

1,73012 silver badges14 bronze badges

Collectives™ on Stack Overflow

Create HTML table from server side

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related