Pré-requisitos:
- Base de dados Northwind para o SQL (http://sites.google.com/site/programacaoonline/download)
Saudações, pessoal!
Assim como o GridView e o Repeater, o DataList é um controle que prover uma rápida implementação em termos de codificação, além de um design totalmente customizável. Nosso objetivo aqui, é alimentar o controle de dados DataList usando o framework de persistência LINQ To SQL.
Para obter mais informações sobre o LINQ, acesse a página do MSDN.
Iremos utilizar o Visual Studio 2010 com SQL Server 2008 EE para fazer esta demonstração. Abra o VS e crie um novo projeto (File > New > Web Site) do tipo ASP.NET Web Site em linguagem C# com o nome DataListComLinq. Aproveitando a página Default.aspx, vamos adicionar o controle DataList (aba Data da Toolbox) no elemento DIV.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="DataList1" runat="server">
</asp:DataList>
</div>
</form>
</body>
</html>
Na guia Solution Explorer, clique com o botão direito do mouse sobre o projeto, em seguida clique no menu Add New Item, e inclua um arquivo do tipo LINQ to SQL Classes.
O VS irá apresentar uma mensagem, informando que o arquivo pode ser incluído na pasta App_Code. Clique no botão Yes para confirmar. Neste momento, nosso projeto contém a seguinte estrutura.
Voltando ao arquivo .DBML, precisamos adicionar a tabela que será utilizada para alimentar o DataList. Antes de mais nada, é necessário ter uma referência apontando para o servidor SQL que contém a base. Na guia Server Explorer, clique com o botão direito sobre a opção Data Connections.
Preencha os campos com os dados de acesso ao servidor e clique em Test Connection. Perceba na imagem que vamos utilizar a base Northwind e a tabela Products para popular o controle de dados.
Com o mapeamento da base já disponível no VS, clique na tabela Products e arraste para o arquivo .DBML.
Voltando para a página Default.aspx, pressione a tecla F7 (ou clique no menu View Code) para escrevermos o trecho que irá alimentar o DataList.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
this.BindDataList();
}
void BindDataList()
{
using (DataClassesDataContext context =
new DataClassesDataContext(
ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString))
{
var resultado = from p in context.Products
orderby p.ProductName
select new { p.ProductID, p.ProductName, p.UnitPrice };
DataList1.DataSource = resultado.ToList();
DataList1.DataBind();
}
}
}
Para concluir, resta configurar o DataList para exibir os dados dos campos que informamos na consulta do LINQ. Volte para o Design da página e altere o fonte HTML conforme a listagem abaixo:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Trebuchet MS;
font-size: 11px;
}
#tabela
{
border: 1px solid #E5E0E0;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div align="center">
<h1>Programação On-Line</h1>
<h2>Alimentar um DataList com LINQ to SQL</h2>
<asp:DataList ID="DataList1" runat="server" CellPadding="4" ForeColor="#333333"
RepeatColumns="3" RepeatDirection="Horizontal">
<ItemTemplate>
<table id="tabela" width="200">
<tr>
<td>
<img src="http://sites.google.com/site/programacaoonline/_/rsrc/1290278483775/home/blogger.jpg" />
</td>
</tr>
<tr>
<td><b><%# Eval("ProductName") %></b></td>
</tr>
<tr>
<td>Por <%# String.Format("{0:c}", Eval("UnitPrice")) %></td>
</tr>
<tr>
<td>
<a href='Default.aspx?id=<%# Eval("ProductID") %>'>Comprar</a>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
Rodando a aplicação (tecla F5), perceba o resultado final gerado à partir da codificação que acabamos de fazer.
Como nosso foco não era a exibição da imagem dos produtos no projeto, posicionamos uma figura genérica para compor o template do DataList. Por enquanto é só, espero que tenham gostado e até o próximo artigo.
Nenhum comentário:
Postar um comentário
Deixe aqui seu comentário