Esse exemplo se baseará no resultado que você ve quando pesquisa um livro em uma livraria, onde a livraria te mostra o preço, a imagem, a editora e outras informações.
Não acessarei os dados de um banco, eu os iniciarei em uma parte do programa, para que assim você apenas copie o código e o compile em seu micro e veja o mesmo resultado, você necessitará apenas mudar o caminho da figura.
Porém com algumas mudanças você poderá utilizar dados retornados do banco.
Primeiramente estas são as figuras que utilizarei:
1 - Inicie um novo programa Asp.NET Web Application e renomeie para ExemploDataGrid.
2 - Arraste um DataList para a página e escolha Edit Templates.
Agora você poderá arrastar componentes ou configurar o layout como se fosse uma página normal. Aliás se você ir em Source você poderá ver o HTML gerado para a edição de template.
3 - Insira uma tabela 2 x 2, para isso vá no menu do Visual Studio e clique em
Table->Insert Table.
Agora é só clicar em OK.
4 - Arraste três Labels e um Image, de forma que seu DataList fique igual ao da figura abaixo.
5 - Antes de continuarmos com a edição do DataList vamos criar uma classe chamada Livros, para isso clique em seu projeto com o botão direito do mouse e escolha
Add > New Item -> Class
Insira esse código em sua classe, que possui quatro propriedades e um construtor de quatro argumentos.
public class Livros {
public string Nome { get; set; }
public string Autor { get; set; }
public string Descricao { get; set; }
public string Imagem { get; set; }
public Livros( string nome, string autor, string descricao, string imagem ) {
this.Nome = nome;
this.Autor = autor;
this.Descricao = descricao;
this.Imagem = imagem;
}
}
6 - Agora voltamos para editar nosso DataList, de um clique em cima do primeiro Label e escolha Edit DataBindings...
7 - Para os Labels selecione Text e coloque Eval("propriedade"), o exemplo abaixo se refere ao nome:
Faça o mesmo com o segundo e o terceiro Label colocando respectivamente
Eval("Autor") e Eval("Descricao"), no Image selecione ImageURL e coloque Eval("Imagem"), repare que você usa suas propriedades da classe, o nome deve ser idêntico. Isso não funcionará com variável, apenas com propriedade.
8 - Agora nossa última parte, adicione esse código no Page_Load da página.
public partial class _Default : System.Web.UI.Page {
protected void Page_Load( object sender, EventArgs e ) {
List <Livros> livros = new List <Livros>( );
livros.Add(new Livros("C# - Como Programar",
"Deitel",
"Livro de C#",
@"seucaminho"));
livros.Add(new Livros("Microsoft Visual C# 2005",
"John Sharp",
"Livro de C#",
@"seucaminho"));
this.DataList1.DataSource = livros;
this.DataList1.DataBind( );
}
}
9 - Resultado:
Pronto está feito, mas não está nada bonito não é mesmo? Agora é com você vá em propriedades e veja o que você tem disponível para mudar ou então edite o HTML.
Até a próxima.
