Criando HTML dinamicamente...

Question

Prezados, estou precisando de alimentar um JQuery com fotos salvas no banco. Será um álbum de fotos, e preciso de gerar o html de forma dinâmica, de acordo com o número de fotos salvas..

<div id="slider" class="nivoSlider">
            <a><img src="images/slider/01.jpg" /> </a>
            <a><img src="images/slider/02.jpg"  /></a>
            <a><img src="images/slider/03.jpg" /></a>
            <a><img src="images/slider/04.jpg" /></a>
 </div>

Preciso de gerar as linhas acima (exemplo), sendo que o endereço das imagens serão carregados direto do banco...

Como sou iniciante, ainda apanho um pouco...

Obrigado desde já...

Answer 1

Olá,

<div id="slider" class="nivoSlider">
    <asp:Repeater ID="rpFotos" runat="server">
        <ItemTemplate>
            <a href="#">
                <img src='<%# Eval("campo-do-banco") %>' />
            </a>
        </ItemTemplate>
    </asp:Repeater>
</div>

Answer 2

Isso eu entendi, mas as linhas no HTML deveriam ser inseridas de acordo com o número de fotos que irão retornar na consulta, por exemplo:

Se voltassem duas fotos da consulta, escreveria duas linhas no HTML

    <a><img src="images/slider/01.jpg" /> </a>
            <a><img src="images/slider/02.jpg"  /></a>

SE voltassem 4 fotos da consulta seriam escritas 4 linhas

     <a><img src="images/slider/01.jpg" /> </a>
            <a><img src="images/slider/02.jpg"  /></a>

<a><img src="images/slider/03.jpg" /></a>

            <a><img src="images/slider/04.jpg" /></a>

Entendeu?? Não sei como faz...

Vlw

           

Answer 3

Olá Marcus,

Conforme exemplo anterior dado pelo Israel, você pode perfeitamente usar o controle Repeater para o que você está pretendendo fazer.

Explicando de forma simples, associando o DataSource do Repeater a uma fonte de dados (com o conteúdo retornado da sua tabela no banco de dados), se o seu "SELECT" retornar quatro linhas, o html contido dentro da tag "ItemTemplate" se repetirá quatro vezes, ou seja, a mesma quantidade de linhas retornado do banco de dados.

Neste link consta documentação e exemplos a respeito do controle Repeater: 

http://msdn.microsoft.com/pt-br/library/system.web.ui.webcontrols.repeater.aspx

Abs