none
ajuda com layout (divs, repeater) RRS feed

  • Pergunta

  • Bom dia!

    Preciso montar um layout como da imagem abaixo:

    Tenho um código html parecido com o abaixo.

    <div id="container1">
    	[REGISTRO 1]
    	AQUI FICA A FOTO MAIOR
    </div>
    <div id="container2">
    	<div class="spot-small">
    		[REGISTRO 2]
    		FOTO MENOR 1
    	</div>
    	<div class="spot-small">
    		[REGISTRO 3]
    		FOTO MENOR 2
    	</div>
    </div>

    pensei em usar um repeater (ou outro que for melhor) para listar os registros, porém não sei como fazer para manter a estrutura dos divs...

    Desde já agradeço a ajuda.

    terça-feira, 17 de junho de 2014 14:06

Respostas

  • Alexandre, 

    Você pode seguir o seguinte:

    Transforme as suas divs em asp:Panel e coloque a classe que você está utilizando na div no atributo CssClass e runat="server" e os devidos IDs.

    <asp:Panel id="meudiv1" runat="server" CssClass="...">
    ...
    </asp:Panel>

    Depois que você carregar os dados do dataset pegue os dados e insira dessa forma:

    Dim objSpan as New HtmlGenericControl("span")
    objSpan.InnerText = "Texto Mensagem"
    Dim objImg as New Image()
    objImg.ImageUrl = "img/suaimagem.png"
    
    'Adiciona na div
    meudiv1.Controls.add(objSpan)
    meudiv1.Controls.add(objImg)

    Teste e poste seus resultados.

    Abraços !


    Diego Murakami View Diego Murakami's LinkedIn profile - MCP, MS, MCSD
    * Por favor "Marcar como Resposta" caso esta for útil para sua dúvida.




    quarta-feira, 18 de junho de 2014 13:40
  • Então, não há o que usar como REPEATER.

    Se você sempre terá 3 imagens, aonde no seu HTML você marcou como:

    [REGISTRO 1]
    [REGISTRO 2]
    [REGISTRO 3]

    Você terá um <asp:PictureBox> (1, 2 e 3). Carregue no 1 a imagem que você quer que apareça no 1, e assim para o 2 e 3.

    A questão é: quando você faz a query no banco de dados como é feita? 1 imagem de cada vez? um DataSet com as 3 imagens?

    Se for 1 DataSet, como ordena? Como, vendo a tabela, você saberia qual é a figura 1, 2 e 3? Se você sabe isso, cada DataRow dentro da DataTable (que está dentro do DataSet) tem a informação de uma imagem. Carregue-a no Picturebox referente.

    quarta-feira, 18 de junho de 2014 17:16

Todas as Respostas

  • Alexandre, bom dia.

    Você queria saber algo sobre CSS para manter o layout nesse esquema ? Ou seria outra coisa...

    Minha pergunta é só pra saber mesmo porque estou vendo que já existe umas classes escritas no html...

    Abraços !


    Diego Murakami View Diego Murakami's LinkedIn profile - MCP, MS, MCSD
    * Por favor "Marcar como Resposta" caso esta for útil para sua dúvida.

    terça-feira, 17 de junho de 2014 14:16
  • Bom dia Diego,

    Não, o css ta pronto, já tenho o html pronto, preciso saber como programar e manter essa estrutura...

    estou recuperando os dados do banco de dados e preciso mostrar nesses 3 divs, a principio pensei em usar um repeater, mas não sei como usar mantendo essa mesma estrutura html...

    terça-feira, 17 de junho de 2014 14:19
  • Entendi...você já possui tudo pronto, agora só precisa recuperar os dados do banco e exibir na página.

    Me fala uma coisa...qual a linguagem que você está utilizando nesse projeto ? C# ou VB.NET ?

    Abraços !


    Diego Murakami View Diego Murakami's LinkedIn profile - MCP, MS, MCSD
    * Por favor "Marcar como Resposta" caso esta for útil para sua dúvida.

    terça-feira, 17 de junho de 2014 14:30
  • isso, preciso exibir os dados na página..

    estou programando em vb.net, mas se tiver algum exemplo em c# também não tem problema me viro de boa...

    terça-feira, 17 de junho de 2014 14:35
  • Ok, pelo que eu vejo você precisa recuperar dados e imagens no banco.

    Primeiramente você vai precisar fazer uma página que salva cada uma das divs...então recomendo que você faça um formulário e salve cada uma em um registro do banco de dados.

    Não sei como é o seu conhecimento com banco de dados então lá vai:

    CRUD Básico em VB.NET

    E também um código de upload e carregamento de imagens no banco:

    ASP .NET – Inserindo e obtendo imagens do SQL Server (C#)

    Você deve mesclar a idéia dos dois tutoriais para resolver o seu problema...acredito que fazendo uns testes de cada um você já vai conseguir implementar a solução adequada.

    Teste e não esqueça de postar seus resultados.

    Abraços !


    Diego Murakami View Diego Murakami's LinkedIn profile - MCP, MS, MCSD
    * Por favor "Marcar como Resposta" caso esta for útil para sua dúvida.

    terça-feira, 17 de junho de 2014 14:43
  • Olá Diego,

    Sobre acesso aos dados e imagens, eu não tenho problema, eu consigo recuperar os dados do banco, a questão é como pegar esses dados que eu já tenho em um dataset e listar dentro desse html.

    oq eu devo usar um repeater??

    como colocar um repeater para listar 3 registros do banco e manter essa mesma estrutura html..

    Fui claro? já tenho um dataset com os dados do banco, só não sei como mostrar esses dados na página..

    terça-feira, 17 de junho de 2014 15:04
  • Ultima pergunta então pra te ajudar na solução.

    Seu projeto é WebForms ou MVC ?

    Abraços !


    Diego Murakami View Diego Murakami's LinkedIn profile - MCP, MS, MCSD
    * Por favor "Marcar como Resposta" caso esta for útil para sua dúvida.

    terça-feira, 17 de junho de 2014 15:17
  • webforms
    terça-feira, 17 de junho de 2014 15:21
  • Alexandre, 

    Você pode seguir o seguinte:

    Transforme as suas divs em asp:Panel e coloque a classe que você está utilizando na div no atributo CssClass e runat="server" e os devidos IDs.

    <asp:Panel id="meudiv1" runat="server" CssClass="...">
    ...
    </asp:Panel>

    Depois que você carregar os dados do dataset pegue os dados e insira dessa forma:

    Dim objSpan as New HtmlGenericControl("span")
    objSpan.InnerText = "Texto Mensagem"
    Dim objImg as New Image()
    objImg.ImageUrl = "img/suaimagem.png"
    
    'Adiciona na div
    meudiv1.Controls.add(objSpan)
    meudiv1.Controls.add(objImg)

    Teste e poste seus resultados.

    Abraços !


    Diego Murakami View Diego Murakami's LinkedIn profile - MCP, MS, MCSD
    * Por favor "Marcar como Resposta" caso esta for útil para sua dúvida.




    quarta-feira, 18 de junho de 2014 13:40
  • Então, não há o que usar como REPEATER.

    Se você sempre terá 3 imagens, aonde no seu HTML você marcou como:

    [REGISTRO 1]
    [REGISTRO 2]
    [REGISTRO 3]

    Você terá um <asp:PictureBox> (1, 2 e 3). Carregue no 1 a imagem que você quer que apareça no 1, e assim para o 2 e 3.

    A questão é: quando você faz a query no banco de dados como é feita? 1 imagem de cada vez? um DataSet com as 3 imagens?

    Se for 1 DataSet, como ordena? Como, vendo a tabela, você saberia qual é a figura 1, 2 e 3? Se você sabe isso, cada DataRow dentro da DataTable (que está dentro do DataSet) tem a informação de uma imagem. Carregue-a no Picturebox referente.

    quarta-feira, 18 de junho de 2014 17:16