Dynamically mount Timeline in html on page . aspx

Question

I would like to ask a little help from the forum, to mount a dynamically html Timeline using the Asp.net font-end or code Behind C#, in a SQL-based Web Forms application. I need to assemble I imagine, for this a for each in aspx code to go creating structures htmls with CSS in the format posts as updates... See the structure in html:

<ul class="timeline">
  <!-- timeline time label -->
  <li class="time-label">
    <span class="bg-red">
                    10 Feb. 2014
                  </span>
  </li>
  <!-- /.timeline-label -->
  <!-- timeline item -->
  <li>
    <i class="fa fa-envelope bg-blue"></i>

    <div class="timeline-item">
      <span class="time"><i class="fa fa-clock-o"></i> 12:05</span>

      <h3 class="timeline-header"><a href="#">Support Team</a> sent you an email</h3>

      <div class="timeline-body">
        Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles, weebly ning heekya handango imeem plugg dopplr jibjab, movity jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle quora plaxo ideeli hulu weebly balihoo...
      </div>
      <div class="timeline-footer">
        <a class="btn btn-primary btn-xs">Read more</a>
        <a class="btn btn-danger btn-xs">Delete</a>
      </div>
    </div>
  </li>
</ul>
<!-- END timeline item -->
<!-- timeline item -->

Someone could give me a light, to dynamically make this structure inside a page . aspx.

Answer 1

You can use Repeater for this:

<ul class="timeline">
    <asp:Repeater runat="server" ID="RptTime">
        <ItemTemplate>
            <li class="time-label">
                <span class="bg-red"><%# Eval("DATA") %></span>
            </li>
            <li>
                <i class="fa fa-envelope bg-blue"></i>

                <div class="timeline-item">
                    <span class="time"><i class="fa fa-clock-o"></i><%# Eval("HORA") %></span>

                    <h3 class="timeline-header"><a href="#"><%# Eval("LINK") %></a> sent you an email</h3>

                    <div class="timeline-body">
                        <%# Eval("TEXTO") %>
                    </div>
                    <div class="timeline-footer">
                        <a class="btn btn-primary btn-xs">Read more</a>
                        <a class="btn btn-danger btn-xs">Delete</a>
                    </div>
                </div>
            </li>
        </ItemTemplate>
    </asp:Repeater>
</ul>

and in your code you receive the database;

RptTime.DataSource = datatable;
RptTime.DataBind();

Basically this, see more about Peater here https://imasters.com.br/framework/dotnet/trabando-com-repeater-no-asp-net/? trace=1519021197&source=single

Answer 2

I have no experience with. aspx, but dynamic pages usually use your idea, assemble a structure like the code informed where the tag 'ul' would be outside the repetition and the 'li' would be inside your for