|
<< Click to Display Table of Contents >> ListView - com CSS (figuras) - Tutorial |
  
|
|
<< Click to Display Table of Contents >> ListView - com CSS (figuras) - Tutorial |
|
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
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)
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)
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
{
width: 98%;
float: left;
}
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:
