ASP .NET - Usando o componente DataList

A plataforma .NET oferece muitas vantagens no desenvolvimento de aplicações para internet : facilidade de uso , pouco código , recursos de IDE integrado do RAD - Rapid Application Development , componentes otimizados , e por ai vai...

Neste artigo eu vou falar do componente DataList , ele é um componente ideal para exibir um conjunto de dados a partir de uma fonte de informações , de um vetor , banco de dados , etc. Seu objetivo é claro: ser leve e usar pouco código.

O DataList define templates para exibição de dados. Nele podemos ter os seguinte templates :

  1. Header - primeiro template para cabeçalho
  2. Item - local onde iremos exibir os itens de informação
  3. AlternateItem - usado de forma intercalada com o template item
  4. EditItem - usado para editar as informações
  5. SelectedItem - usado para exibir os itens selecionados
  6. Separator - template entre os itens
  7. Footer - último template para rodapé

Podemos personalizar a exibição do componente através das seguintes propriedades:

  1. RepeatLayout  = " Flow | Table " - Podemos usar Flow ou Table , indicando se os itens serão exibidos em sequência ou em uma estrutura de tabela
  2. GridLines = "None | Horizontal | Vertical | Both " - Indica se iremos exibir linhas de grade no componente de acordo com as opções permitidas
  3. RepeatColumns= "NúmeroColunas" - Informa a quantidade de colunas que serão usadas para exibir os dados.
  4. RepeatDirection = " Vertical | Horizontal " - Indica a direção na qual os dados serão preenchidos.
  5. ShowHeader = " False | True " - indica se o template cabeçalho será exibido.
  6. ShowFooter = " False | True " - indica se o template rodapé será exibido.
  7. DataSource = "<% expressão databinding %> - Indica a fonte de dados
  8. OnCancelCommand = "OnCancelCommandMethod" - habilita o comando para cancelar a operação.
  9. OnDeletelCommand = "OnDeleteCommandMethod" - habilita o comando para deletar dados.
  10. OnEditCommand = "OnEditCommandMethod" - habilita o comando para editar dados.
  11. OnUpdateCommand = "OnUpdateCommandMethod" - habilita o comando para atualizar dados.

Para inserir o valor de um campo em um template que atual sobre um registro em uma das seções : item , SelectedItem , AlternatingItem ou EditItem devemos usar o DataBinder.Eval. O registro a ser exibido é descrito como um Container.DataItem usando a seguinte sintaxe:

DataBinder.Eval (Container.DataItem, "Campo")

Para exibir o campo NomeDoProduto de um registro fazemos assim :

<%# DataBinder.Eval(Container.DataItem, "NomeDoProduto") %>

Vamos agora a um exemplo de utilização do DataList. Vou acessar e exibir os dados da tabela Produtos do banco de dados Access Northwind.mdb. Vou usar um objeto DataSet para obter os dados da tabela e exibir no componente. O código completo da página - datalist1.aspx - e dado abaixo :

<%@Import Namespace="System.Data" %>
<%@Import Namespace="System.Data.OleDb"%>
<%@ Page Language="VB" clienttarget=uplevel%>

<script language="VB" runat="server">

Sub Page_Load(Sender As Object, E As EventArgs)

Dim oDadapter As OleDbDataAdapter
Dim sSql As String = "SELECT * FROM Produtos Where CódigoDoProduto < 20 ORDER BY NomeDoProduto"
Dim oConnection As New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=c:\teste\Northwind.mdb")
 

oDadapter = New OleDbDataAdapter(sSql, oConnection)
 

Dim oDataSet As New DataSet()
 

oConnection.Open
oDadapter.Fill(oDataSet, "produtos")
 

Produto.DataSource = oDataSet.Tables("produtos").DefaultView
Produto.DataBind()
 

End Sub

</script>

<html>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" bgcolor="#00FFFF">
<form runat=server>

<table width="805" border=0 cellpadding=5 cellspacing=0>
<tr valign=top>
<td width="863" bgcolor="#33CC99">
 

<asp:DataList id="Produto" runat="server"
  gridlines ="Both"
  RepeatColumns="4"
  RepeatDirection="Horizontal"
  CellPadding=3
  CellSpacing="0"
  Font-Name="Arial"
  Font-Size="8pt">


<ItemTemplate>
  <b><%# DataBinder.Eval(Container.DataItem, "NomeDoProduto") %></b><br>
  <%# DataBinder.Eval(Container.DataItem, "QuantidadePorUnidade") %></font><br>
  Código: <%# DataBinder.Eval(Container.DataItem, "CódigoDoProduto") %><br>
  Quantidade em Estoque: <%# DataBinder.Eval(Container.DataItem, "UnidadesEmEstoque") %><br>
  <%# FormatCurrency(DataBinder.Eval(Container.DataItem, "PreçoUnitário")) %><br>
</ItemTemplate>


<HeaderTemplate>
  <tr height=1>
  <td colspan=4><strong>Catálogo de Produtos:</strong></td>
  <tr height=2 bgcolor="#a0522d"><td colspan=4></td></tr>
   </tr>
</HeaderTemplate>


<FooterTemplate>
  <tr height=1><td colspan=2></td></tr>
</FooterTemplate>


</asp:DataList>
</td></tr>
</table>
</form>
</body>
</html>

Os pontos principais do código são :

<%@Import Namespace="System.Data" %>
<%@Import Namespace="System.Data.OleDb"%>
<%@ Page Language="VB" clienttarget=uplevel%>
 		 Como vou acessar uma base de dados Access tenho que usar o namespace - System.Data.Oledb

Dim oDadapter As OleDbDataAdapter
Dim sSql As String = "SELECT * FROM Produtos Where CódigoDoProduto < 20 ORDER BY NomeDoProduto"
Dim oConnection As New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=c:\teste\Northwind.mdb")
 
  1. No evento Load da página estou declarando o objeto DataAdapter
  2. Declaro a string SQL (selecione somente os produtos com codigo menor que 20)
  3. Crio uma conexao usando o provedor OLE DB
oDadapter = New OleDbDataAdapter(sSql, oConnection)
 

Dim oDataSet As New DataSet()
 

oConnection.Open
oDadapter.Fill(oDataSet, "produtos")
 
  • Crio o objeto DataAdapter
  • Crio o objeto DataSet
  • Abro a conexão
  • Preencho o DataSet
Produto.DataSource = oDataSet.Tables("produtos").DefaultView
Produto.DataBind()
 
  • Defino o modo de exibição
  • faço a vinculação com componente
<asp:DataList id="Produto" runat="server"
  gridlines ="Both"
  RepeatColumns="4"
  RepeatDirection="Horizontal"
  CellPadding=3
  CellSpacing="0"
  Font-Name="Arial"
  Font-Size="8pt">
  • Defino o componente DataList
  • Faço algumas configurações de exibição : mostrar linhas de grade , com 4 colunas , na direção horizontal
<ItemTemplate>
  <b><%# DataBinder.Eval(Container.DataItem, "NomeDoProduto") %></b><br>
  <%# DataBinder.Eval(Container.DataItem, "QuantidadePorUnidade") %></font><br>
  Código: <%# DataBinder.Eval(Container.DataItem, "CódigoDoProduto") %><br>
  Quantidade em Estoque: <%# DataBinder.Eval(Container.DataItem, "UnidadesEmEstoque") %><br>
  <%# FormatCurrency(DataBinder.Eval(Container.DataItem, "PreçoUnitário")) %><br>
</ItemTemplate>
  • Defino através do DataBinder cada campo que desejo exibir no template : ItemTemplate
<HeaderTemplate>
  <tr height=1>
  <td colspan=4><strong>Catálogo de Produtos:</strong></td>
  <tr height=2 bgcolor="#a0522d"><td colspan=4></td></tr>
   </tr>
</HeaderTemplate>


<FooterTemplate>
  <tr height=1><td colspan=2></td></tr>
</FooterTemplate>


</asp:DataList>
</td></tr>
</table>
</form>
</body>
</html>

  • Defino o cabeçalho - template => HeaderTemplate
  • Defino o rodapé : template - FooterTemplate

Ao chamar o arquivo datalist1.aspx no servidor IIS teremos:

Para ver o exemplo funcionando acesse o link : http://www.macoratti.net/dtl/datalist1.aspx

Simples e prático, o componente DataList é ótimo para exibir dados em páginas WEB. A seguir veremos como usar os recursos de edição de dados no componente DataList . Aguarde

Até o próximo artigo ASP.NET...

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:

José Carlos Macoratti