0

Gostaria de pedir uma ajudinha ao fórum, para montar uma timeline dinamicamente em html utilizando o font-end asp.net ou code behind C#, em uma aplicação Web Forms com base de dados SQL. Preciso montar imagino, para isso um for each no código aspx para ir criando estruturas htmls com CSS no formato posts conforme atualizações... Vejam a estrutura em 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 -->

inserir a descrição da imagem aqui

Alguém poderia me dar uma luz, para fazer dinamicamente essa estrutura dentro de uma pagina .aspx.

2 Respostas 2

1

Você pode usar repeater para isto:

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

e no seu code behind você recebe a base de dados;

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

Basicamente isto, veja mais sobre repeater aqui https://imasters.com.br/framework/dotnet/trabalhando-com-repeater-no-asp-net/?trace=1519021197&source=single

2
  • Perfeito Thiago Araújo, obrigado! Bom trabalho.
    – Evandro
    10/07/2017 às 17:03
  • Bom trabalho pra você também. 10/07/2017 às 17:21
0

Não tenho experiência com .aspx, mas páginas dinâmicas geralmente utilizamos sua ideia, monte uma estrutura como o código informado onde a tag 'ul' estaria fora da repetição e as 'li' estariam dentro do seu for

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .