Trabalhando com imagens

vinculadas ao Banco de Dados

• As imagens disponibilizadas na aplicação
podem estar dentro dos campos do banco de
dados, alocando-se o conteúdo em uma
coluna específica do banco de dados.
• Elas podem ser armazenadas em disco e
apenas o caminho para esse arquivo ser
armazenado no banco de dados para ser
encontrado pela aplicação.
• Ambas as formas possuem pontos positivos e
negativos
• Nos exemplos vamos optar por armazenar as
imagens diretamente no disco (sistema de
arquivos) e gravar o nome da imagem e o seu
caminho no banco de dados como referência.
 Modificações no site

Utilizar o site de e-comerce que

estamos fazendo para realizar o
exemplo
• Para facilitar o trabalho, vamos considerar que cada produto do
site possui apenas 1 imagem. Essa imagem do produto possui
como nome o valor da chave primária com a extensão .jpg.
• Com essa abordagem não precisaremos criar um campo novo
na tabela produto para controlar o caminho da imagem e não
haverá necessidade de controlar o nome dos arquivos para
evitar duplicidade Exemplo:

Código Nome da Imagem

1 1.Jpg
2 2.Jpg
10 10.jpg
• Crie uma pasta chamada
“img” na raiz do site e
armazene algumas imagens
de produtos para teste.
• Obs: as imagens devem
ser .jpg e ter como nome a
chave primária dos
produtos armazenados no
banco de dados:
 PesqProdutos.aspx
• Na página pesqProdutos vamos adicionar uma
nova coluna ao gridview. Para isso clique na
caixa de propriedades (com o gridview
selecionado) e escolha a opção columns.
• Adicione uma coluna do tipo ImageField.
• Semelhante ao botão comprar que já foi feito
nessa página. Altere as propriedades da coluna:
– DataImageUrlField: codigo
– DataImageUrlFormatString: img/{0}.jpg
Coluna ImageField
 PesqProdutos.aspx
• Com essa modificação o site já vai exibir as imagens
cadastradas na pasta imagem.
• Porém, não temos disponível no site uma tela para cadastro
das imagens para que o próprio usuário possa cadastrar.
• Em uma das aulas foram adicionados campos de texto e um
botão, na parte inferior da página pesqProdutos.aspx para
fazer a inserção de produtos com o nome e preço, mas não
tinha a imagem.
 PesqProdutos.aspx
• Nessa parte inferior podemos adicionar um campo do tipo File Upload para que o
usuário possa enviar um arquivo de imagem. Deixando o formulário parecido com a
imagem a seguir.
• O botão cadastrar terá o mesmo código que foi feito na aula para inserir o registro no
banco de dados. Não haverá mudança nessa parte porque não criamos um campo
para registrar o caminho da imagem. Usamos o código do produto para ter essa
informação
• Desta forma, o código vinculado ao evento clique do botão cadastrar continuará com
1 linha: SqlDataSource1.Insert();
 PesqProdutos.aspx
• A imagem que foi enviada pelo campo FileUpload deverá
ser gravada na pasta /img do site. Para isso, teremos que
renomear a imagem enviada para ter o “[código do
produto].jpg”.
• Como o código do produto que está sendo inserido no
banco de dados é um campo com auto incremento, nós
não temos acesso ao número até que ele seja registrado
no banco de dados. Por isso, vamos ter que fazer uma
adaptação no sql utilizado no SqlDataSource para que ele
retorne essa código do produto após a inserção. O
próximo slide contém essa descrição.
• Acessar a propriedade InsertQuery do SqlDataSource1 do
formulário pesqProdutos.aspx
1. Adicionar o comando set @id=scope_identity ao final do SQL do
insert.
2. Após a mudança, clicar no botão refresh parameters para criar o
novo parâmetro na consulta e no link “Show Advanced
Properties”
3. Selecionar o parâmetro id e alterar as seguintes propriedades:
– Direction OutPut
– Type: Int32
• Após a configuração podemos dar um “Ok” nessa tela
• O próximo slide demonstra o passo a passo:
Configurações da propriedade InsertQuery
do SqlDataSource
 • Após a configuração, vamos realizar a gravação da imagem na
pasta img.
• Para isso, vamos acessar o evento Inserted do SqlDataSource1
para programá-lo. Esse evento é acionado após a gravação do
registro do novo produto no banco de dados.
• O código a ser adicionado no evento é o seguinte:

protected void SqlDataSource1_Inserted(object sender, SqlDataSourceStatusEventArgs e) {

int cod= Convert.ToInt32(e.Command.Parameters["@id"].Value);
FileUploadImagem.SaveAs(Server.MapPath("img/") + cod + ".jpg");
}
 Exercício
• Com isso, a inserção e listagem das
imagens já está funcionando.
• Para finalizar o exercício, devemos
exibir os dados do produto e a sua
imagem também na página
AdicionaProduto.aspx que foi feita
terminada na última aula. Essa página
possui atualmente uma caixa de texto
para indicar a quantidade do produto
a ser comprado e um botão para
Sugestão: ao invés de usar o
adicionar o produto ao carrinho de
GridView para listar os dados do
compras. produto tente usar outro
• Faça com que a página exiba os dados componente como o FormView, por
e também a imagem do produto. exemplo