ListView - com CSS (figuras) - Tutorial

<< Click to Display Table of Contents >>

Navigation:  ASP.NET > ASP Controls > ListView >

ListView - com CSS (figuras) - Tutorial

Previous pageReturn to chapter overviewNext page

Para esse exemplo, é necessário imagens tamanho 160x120 na pasta Photos do projeto. Os nomes são 1.jpg, 2.jpg até 77.jpg.

 

Primeiro - versão html com CSS

 

Html (Default.aspx)

 

      <h3>Produtos</h3>

      <ul>

          <li> <img src="Photos/1.jpg" /><br/>Picasso</li>

          <li> <img src="Photos/2.jpg" /><br/>Michaelangelo</li>

          <li> <img src="Photos/3.jpg" /><br/>Leonardo</li>

          <li> <img src="Photos/4.jpg" /><br/>Da Vinci</li>

          <li> <img src="Photos/5.jpg" /><br/>Rafael</li>

          <li> <img src="Photos/6.jpg" /><br/>Amet Lunus</li>

          <li> <img src="Photos/7.jpg" /><br/>Linux</li>

          <li> <img src="Photos/8.jpg" /><br/>Pablo</li>

          <li> <img src="Photos/9.jpg" /><br/>Vo Roer</li>

          <li> <img src="Photos/10.jpg" /><br/>Pon Pon</li>

          <li> <img src="Photos/11.jpg" /><br/>Pong</li>

          <li> <img src="Photos/12.jpg" /><br/>Juris</li>

      </ul>

 

 

Resultado

 

listview2

 

Vamos adicionar o CSS para poder formatar em forma de "grade"

 

Estilo.css

 

.lista li

{

  display: inline;

  float: left;

  margin-left: 15px;

  margin-bottom: 15px;

}

 

Foi criada a classe lista, onde o li dentro da lista será no formato float

 

agora é só aplicar no Default.asxp

 

<head runat="server">

  <title></title>

  <link rel="stylesheet" type="text/css" href="Estilo.css" />

</head>

<body>

  <form id="form1" runat="server">

  <div>

      <h3>Produtos</h3>

      <ul class="lista">

          <li> <img src="Photos/1.jpg" /><br/>Picasso</li>

          <li> <img src="Photos/2.jpg" /><br/>Michaelangelo</li>

          <li> <img src="Photos/3.jpg" /><br/>Leonardo</li>

          <li> <img src="Photos/4.jpg" /><br/>Da Vinci</li>

          <li> <img src="Photos/5.jpg" /><br/>Rafael</li>

          <li> <img src="Photos/6.jpg" /><br/>Amet Lunus</li>

          <li> <img src="Photos/7.jpg" /><br/>Linux</li>

          <li> <img src="Photos/8.jpg" /><br/>Pablo</li>

          <li> <img src="Photos/9.jpg" /><br/>Vo Roer</li>

          <li> <img src="Photos/10.jpg" /><br/>Pon Pon</li>

          <li> <img src="Photos/11.jpg" /><br/>Pong</li>

          <li> <img src="Photos/12.jpg" /><br/>Juris</li>

      </ul>

   

  </div>

  </form>

</body>

 

Resultado

 

(ele se ajusta a largura do navegador)

 

listview3

 


Agora vamos fazer a mesma coisa, mas usando ListView

Altere o Default.aspx usando componente ListView

 

Default.aspx

 

  <div>

      <h3>Produtos</h3>

      <asp:ListView ID="lvProdutos" runat="server" ItemPlaceholderID="itemContainer">

          <LayoutTemplate>

              <ul class="lista">

                  <asp:PlaceHolder ID="itemContainer" runat="server" />

              </ul>

          </LayoutTemplate>

            <ItemTemplate>

                <li>

                    <img alt="x" src="Photos/<%#Eval("Codigo") %>.jpg" /><br /> <%#Eval("Nome"%></li>

            </ItemTemplate>

            <EmptyDataTemplate>

                <div>

                    Sem dados neste catálogo

                </div>

            </EmptyDataTemplate>

        </asp:ListView>

    </div>

 

Agora a fonte de dados será um DataTable, para isso crie a classe /App_Code/Dados.cs (será usada nos exemplos daqui pra frente)

 

Dados.cs

 

using System;

using System.Data;

 

public class Dados

{

  public Dados()

   {

   }

 

  private static void Novo(DataTable tab, int codigo, string nome)

   {

      // função auxiliar para ajudar a inserir dados

      DataRow dr = tab.NewRow();

       dr["Codigo"] = codigo;

       dr["Nome"] = nome;

       tab.Rows.Add(dr);

   }

 

  public static DataTable GetDados()

   {

      DataTable tabela = new DataTable();

 

      // cria as colunas e tipos

       tabela.Columns.Add(new DataColumn("Codigo", Type.GetType("System.Int32")));

       tabela.Columns.Add(new DataColumn("Nome", Type.GetType("System.String")));

       

      // insere dados

      for (int i = 1; i <= 77; i++)

          Novo(tabela, i, "Imagem_" + i.ToString());

     

      // ordena por Grupo / Nome

      DataView v = tabela.DefaultView;

       v.Sort = "nome asc";

       tabela = v.ToTable();

 

      // retorna

      return tabela;

   }

}

 

 

E por fim crie as rotinas para popular o DataTable que é vinculado com o ListView

 

Default.aspx.cs

 

using System;

using System.Data;

using System.Web.UI.WebControls;

 

public partial class _Default : System.Web.UI.Page

{

  protected void Page_Load(object sender, EventArgs e)

   {

      if (!IsPostBack)

       {

           lvProdutos.DataSource = Dados.GetDados();

           lvProdutos.DataBind();

       }

   }

}

 

Resultado (o mesmo do Html, mas agora origem de dados é dinâmica)

 

listview4

 


DataPager

 

O DataPager é responsável pela paginação. Para página não ficar muito grande.

 

Estilo.css 

 

Aqui acrescentamos a class "rodape" para ficar mais bonito:

 

.lista li

{

  display: inline;

  float: left;

  margin-left: 15px;

  margin-bottom: 15px;

}

.rodape

{

    width98%;

    floatleft;

}

 

Default.aspx

 

  <div>

      <h3> Produtos</h3>

      <asp:ListView ID="lvProdutos" runat="server" ItemPlaceholderID="itemContainer">

          <LayoutTemplate>

              <ul class="lista">

                  <asp:PlaceHolder ID="itemContainer" runat="server" />

              </ul>

          </LayoutTemplate>

          <ItemTemplate>

                    <img alt="x" src="Photos/<%#Eval("Codigo") %>.jpg" /><br /> <%#Eval("Nome"%></li>

            </ItemTemplate>

        </asp:ListView>

        <div class="datapager">

        </div>

    </div>

    <div class="rodape">

        <asp:DataPager ID="DataPager1" PageSize="12" PagedControlID="lvProdutos" runat="server" OnPreRender="DataPager1_PreRender">

            <Fields>

                <asp:NumericPagerField />

                <asp:NextPreviousPagerField />

            </Fields>

        </asp:DataPager>

    </div>

 

Note que na propriedade PageSize está identificado quantos "registros" vão ter cada página

 

Default.aspx.cs

 

Aqui podemos remover a carga do DataTable no Page_Load e deixar no PreRender do DataPager

 

using System;

using System.Data;

using System.Web.UI.WebControls;

 

public partial class _Default : System.Web.UI.Page

{

  protected void Page_Load(object sender, EventArgs e)

   {

   }

 

  private void PopularDados()

   {

       lvProdutos.DataSource = Dados.GetDados();

       lvProdutos.DataBind();

   }

 

  protected void DataPager1_PreRender(object sender, EventArgs e)

   {

       PopularDados();

   }

}

 

Saída final:

 

listview5