Olá pessoal,
Como havia prometido no artigo anterior (EXPLORANDO O CONTROLE DATALIST - Parte 02), venho com este artigo que é último, sobre o controle DataList.
Neste artigo vou mostar como listar de forma organizada, produtos que estão em um banco de dados, inclusive com suas respectivas imagens...
Confira na imagem o modelo final:
Vamos então ao código...
Chamei este arquivo de index.aspx
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script language="C#" runat="server">
SqlConnection conectar;
void Page_Load(Object sender, EventArgs e) {
conectar = new SqlConnection(ConfigurationManager.ConnectionStrings["conexao"].ConnectionString);
if (!Page.IsPostBack) {
SqlDataAdapter cmd = new SqlDataAdapter("Select * From TLivros Order By titulo", conectar);
DataSet ds = new DataSet();
cmd.Fill(ds, "Titulos");
DataListLivros.DataSource=ds.Tables["Titulos"].DefaultView;
DataListLivros.DataBind();
}
}
void DataListLivros_Select(Object sender, EventArgs e)
{
String IdTitulo = DataListLivros.DataKeys[DataListLivros.SelectedItem.ItemIndex].ToString();
SqlDataAdapter cmd = new SqlDataAdapter("Select * From TLivros Where id = " + IdTitulo, conectar);
DataSet ds = new DataSet();
cmd.Fill(ds, "DetalhesTitulos");
DataRowView rowview = ds.Tables["DetalhesTitulos"].DefaultView[0];
imgDetalhes.Src = "imagens/" + rowview["imagem"];
IdLivro.Text = "<b>ID: </b>" + rowview["id"].ToString() + "<br>";
lblGenero.Text = "<b>Gênero: </b>" + rowview["genero"].ToString() + "<br>";
lblValor.Text = "<b>Valor: </b> R$ " + rowview["valor"].ToString() + "<p>";
lnkComprar.Text = "<img alt=Comprar este Livro border=0 src=imagens/comprar.gif >";
lnkComprar.Visible = true;
lnkComprar.NavigateUrl ="#" + rowview["id"].ToString();
lblTitulo.Text = rowview["titulo"].ToString();
imgDetalhes.Visible = true;
lnkComprar.Attributes.Add("onclick", "alert(Direcione seu usuário para a página de " +
"aquisição do livro:\\n" + rowview["titulo"].ToString() + ")");
}
void DataListLivros_ItemCommand(Object sender, DataListCommandEventArgs E)
{
String titulo = DataListLivros.DataKeys[E.Item.ItemIndex].ToString();
String commando = E.CommandName;
switch(commando) {
case "Discutir" :
ShowDiscutir(titulo);
break;
case "Avaliar" :
ShowAvaliar(titulo);
break;
}
}
void ShowAvaliar(String titulo)
{
Message.InnerHtml = "<h5>Avaliações para o ID <font color=red>\"" + titulo + "\"</font></h5>";
Message.InnerHtml += "Você pode imprimir as avaliações aqui...";
}
void ShowDiscutir(String titulo)
{
Message.InnerHtml = "<h5>Discuções para ID <font color=red>\"" + titulo + "\"</font></h5>";
Message.InnerHtml += "Imprima as discuções sobre o livro aqui...";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server"> <title>Lista de Livros</title></head>
<body style="margin:0;">
<form id="Form1" runat="server">
<!-- #include virtual="header.inc" -->
<table width="100%">
<tr> <td width="50%">
<ASP:DataList
id="DataListLivros"
RepeatColumns="2"
OnSelectedIndexChanged="DataListLivros_Select"
OnItemCommand="DataListLivros_ItemCommand"
DataKeyField="id" runat="server">
<ItemTemplate>
<table cellpadding=10 style="font: 10pt verdana">
<tr>
<td valign="top">
<img id="Img1"
alt="Imagem do Livro"
align="top"
width="25"
border="1"
src=<%# DataBinder.Eval(Container.DataItem, "imagem", "imagens/") %> runat="server"/>
</td>
<td valign="top">
<b>Titulo: </b>
<asp:linkbutton
ID="Linkbutton1"
Text=<%# DataBinder.Eval(Container.DataItem, "titulo") %>
CommandName="Select"
style="color:darkred"
runat="server"/>
<br>
<b>Valor: </b><%# DataBinder.Eval(Container.DataItem, "valor", "R$ ") %>
<br>
<asp:linkbutton ID="Linkbutton2" Text="Discuções" CommandName="Discutir" style="color:darkred;font:8pt tahoma" runat="server"/>|
<asp:linkbutton ID="Linkbutton3" Text="Avaliar" CommandName="Avaliar" style="color:darkred;font:8pt tahoma" runat="server"/>
</td>
</tr>
</table>
</ItemTemplate>
</ASP:DataList>
</td>
<td valign="top" style="padding-top:15" width="50%">
<table cellpadding="5" width="100%" style="font: 10pt verdana">
<tr>
<td style="height: 60px; width: 80px;">
<img alt="book image" id="imgDetalhes" visible="false" runat="server" height="90" width="70">
</td>
<td valign="top" width="400" style="height: 60px">
<div style="font: 12pt verdana;color:darkred">
<i><b><asp:Label id="lblTitulo" runat="server"/></b></i><br>
</div>
<asp:Label id="IdLivro" runat="server"/><asp:Label id="lblGenero" runat="server"/><asp:Label id="lblValor" runat="server"/><asp:HyperLink id="lnkComprar" runat="server" Visible="False">[lnkComprar]</asp:HyperLink>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- #include virtual="footer.inc" -->
<div id="Message" style="font: 10pt verdana;padding:0,15,15,15" runat="server"/>
</form>
</body>
</html>
-----------------------------------------------------------------------------------------
Arquivo header.inc
<table width=100% cellspacing=0 cellpadding=0>
<tr>
<td style="height:20" bgcolor="#993300" cellspacing=0 cellpadding=0 width=100%/>
</tr>
<tr>
<td align="right" style="height:70;font-family:Arial;font-weight:bold;font-size:44pt;color:white" width="100%" bgcolor="#993300">
<font size=6 color="#FFFFFF">Editora DataList On-line</font>
</td>
</tr>
</table>
------------------------------------------------------------------------------------------
Arquivo footer.inc
<table width=100% cellspacing=0 cellpadding=0>
<tr>
<td style="height:20" bgcolor="#993300" cellspacing=0 cellpadding=0 width=100%></td>
</tr>
</table>
Em anexo você encotra o aplicativo de exemplo com o um backup e um arquivo de script para gerar Banco original deste exemplo. Use um ou outro, de preferência o backup!
Bem galera, vou me despedindo e desejando a todos um excelente estudo!!!
Um abraço e até breve!!!
