Guardar una imagen en SQL SERVER y mostrarla en un grid view con VB.net

Hace un tiempo atrás, si mas no recuerdo en el año 2010 , publiqué aquí mismo en este blog un articulo acerca de como guardar una imagen en sql server  mediante c#.net, y me preguntaban como hacerlo en vb.net y además como mostrarlo, estube investigando al respecto y hoy comparto este tutorial, asi que empecemos:

1. creamos la base de datos y la tabla que nos servirá para este ejemplo

create database imagen
go

use imagen

CREATE TABLE Producto(
IDproducto int IDENTITY(1,1) NOT NULL,
Descripcion varchar(50) NULL,
Precio numeric(18, 2) NOT NULL,
Foto image NULL,
CONSTRAINT [PK_Producto] PRIMARY KEY CLUSTERED (IDproducto)
)

GO

 

2.- Ahora en visual studio 2008  y creamos un nuevo proyecto de visual basic.net

elegimos Aplicación de Windows Forms y le colocamos un nombre

creamos la siguiente intrefaz: dentro de un groupbox 2 labels, dos textbox(txtdescripcion y txtprecio), un control picture box llamado picFoto, dos buttons ( cmdguardar y cmdexaminar) y un control DataGridView llamado DataGridViewImage

3.- Ahora hacemos clic derecho en la solucion y elegimos agregar,  luego clase

 y le ponemos de nombre ImageClass

y la estructura de nuestro proyecto queda como la imagen anterior

4.- Hacmeos doble clic en la en el archivo Image Class.vb , borramos todo y pegamos el siguiente codigo

Imports System.Data
Imports System.Data.SqlClient

Public Class ImageClass

#Region «Set Class Variables …»

Private clsobj As ImageClass
Private lstobj As List(Of ImageClass)

Private sqlcon As SqlConnection
Private sqlcom As SqlCommand
Private sqlrdr As SqlDataReader

Private sqlstr As String = «Data Source=MYPC;Initial Catalog=imagen;Integrated Security=True»

#End Region

#Region «Set Property Data …»
Private _productoid As Integer
Public Property ProductoID() As Integer
Get
Return _productoid
End Get
Set(ByVal value As Integer)
_productoid = value
End Set
End Property

Private _descripcion As String
Public Property Descripcion() As String
Get
Return _descripcion
End Get
Set(ByVal value As String)
_descripcion = value
End Set
End Property

Private _precio As Double
Public Property Precio() As String
Get
Return _precio
End Get
Set(ByVal value As String)
_precio = value
End Set
End Property

Private _imagen() As Byte
Public Property Imagen() As Byte()
Get
Return _imagen
End Get
Set(ByVal value() As Byte)
_imagen = value
End Set
End Property
#End Region

Public Function ObtenerImagenes() As List(Of ImageClass)

lstobj = New List(Of ImageClass)
lstobj.Clear()

sqlcon = New SqlConnection(sqlstr)
sqlcon.Open()

sqlcom = New SqlCommand()

With sqlcom
.Connection = sqlcon
.CommandType = CommandType.Text
.CommandText = «SELECT * FROM Producto order by IdProducto»
sqlrdr = .ExecuteReader()
End With

Do While sqlrdr.Read()
clsobj = New ImageClass()

clsobj.ProductoID = Convert.ToInt32(sqlrdr.GetValue(0))
clsobj.Descripcion = Convert.ToString(sqlrdr.GetValue(1))
clsobj.Precio = Convert.ToString(sqlrdr.GetValue(2))
clsobj.Imagen = sqlrdr.GetValue(3)

lstobj.Add(clsobj)
clsobj = Nothing
Loop

sqlrdr.Close()
sqlcom.Cancel() : sqlcom.Dispose()
sqlcon.Close() : sqlcon.Dispose()

Return lstobj

End Function

End Class

5.- Ahora en la vista codigo de nuestro formulario agregamos al principio el siguiente codigo refrenciando a los namespace que utilizaremos

Imports System.Data
Imports System.Data.SqlClient
Imports System.Diagnostics
Imports System.IO

y luego de la linea  Public Class Form1, agregamos lo siguiente:

Private objgridimages As ImageClass

Public Sub cargargrid()

objgridimages = New ImageClass()

Me.Cursor = Cursors.WaitCursor

Try
DataGridViewImage.DataSource = objgridimages.ObtenerImagenes()

If DataGridViewImage.Rows.Count = 0 Then
MessageBox.Show(«No existen registros «, «Grid Image», MessageBoxButtons.OK, MessageBoxIcon.Information)
End If

Catch ex As Exception
MessageBox.Show(ex.Message, «Grid Image», MessageBoxButtons.OK, MessageBoxIcon.Error)
Finally
objgridimages = Nothing
End Try

Me.Cursor = Cursors.Default
End Sub

Private Sub FromatDataGridView()

With DataGridViewImage
.AutoGenerateColumns = False
.Columns.Clear()

Dim ColumnaCodigoProducto As New DataGridViewTextBoxColumn()
With ColumnaCodigoProducto
.DataPropertyName = «ProductoID»
.HeaderText = «Codigo»
.ReadOnly = True : .Visible = False
.Width = 0
End With
.Columns.Add(ColumnaCodigoProducto)

Dim ColumnaDescripcionProducto As New DataGridViewTextBoxColumn()
With ColumnaDescripcionProducto
.DataPropertyName = «Descripcion»
.HeaderText = «DescripcionProducto»
.ReadOnly = True : .Visible = True
.Width = 400
End With
.Columns.Add(ColumnaDescripcionProducto)

Dim ColumnaPrecioProducto As New DataGridViewTextBoxColumn()
With ColumnaPrecioProducto
.DataPropertyName = «Precio»
.HeaderText = «PrecioProducto»
.ReadOnly = True : .Visible = True
.Width = 200
End With
.Columns.Add(ColumnaPrecioProducto)

Dim ColumnaImagen As New DataGridViewImageColumn()
With ColumnaImagen
.DataPropertyName = «Imagen»
.HeaderText = «Imagen Producto»
.ImageLayout = DataGridViewImageCellLayout.Zoom
.ReadOnly = True : .Visible = True
.Width = 50
End With
.Columns.Add(ColumnaImagen)
End With

End Sub

Public Sub limpiarcontroles()
txtdescripcion.Text = «»
txtprecio.Text = «»
picfoto.Image = Nothing
txtdescripcion.Focus()
End Sub

5.- Ahora le damos doble click al boton cmdexaminar y colocamos el siguiente codigo para que nos muestre un auadro de dialogo para seleccionar nuestra imagen y nos lo muestre en el control picFoto

Dim openFileDialog1 As New OpenFileDialog()

Dim result As New DialogResult
openFileDialog1.InitialDirectory = «Bibliotecas\Imágenes»
openFileDialog1.Filter = «archivos de imagen (*.jpg)|*.png|All files (*.*)|*.*»
openFileDialog1.FilterIndex = 3
openFileDialog1.RestoreDirectory = True
result = openFileDialog1.ShowDialog()
If (result = DialogResult.OK) Then
picfoto.Image = Image.FromFile(openFileDialog1.FileName)
End If

6.- Ahora en el evento load del form (doble clic en cualquier espacio del form), agremos la siguiente linea de código

cargargrid()

7.- En el boton cmdguardar damos boble clic y escribimos el siguiente código
Try

Dim cn As New SqlConnection(«Data Source=.;Initial Catalog=imagen;Integrated Security=True»)
Dim coUsuario As New SqlCommand
coUsuario.Connection = cn
coUsuario.CommandText = «INSERT INTO Producto VALUES (@Descripcion,@precio, @foto)»
coUsuario.Parameters.Add(«@Descripcion», System.Data.SqlDbType.NVarChar)
coUsuario.Parameters.Add(«@precio», System.Data.SqlDbType.SmallMoney)
coUsuario.Parameters.Add(«@foto», System.Data.SqlDbType.Image)

coUsuario.Parameters(«@Descripcion»).Value = txtdescripcion.Text
coUsuario.Parameters(«@precio»).Value = Val(txtprecio.Text)

Dim ms As New System.IO.MemoryStream()
picfoto.Image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg)
coUsuario.Parameters(«@foto»).Value = ms.GetBuffer()
cn.Open()
coUsuario.ExecuteNonQuery()
cn.Close()

Catch ex As Exception
MessageBox.Show(ex.Message)
End Try
cargargrid()
limpiarcontroles()

8.- Ahora solo nos queda ejecutar nuestra aplicación , para presionamos f5, si no tenemos ningun registro en nuestra bd nos saldrá el siguiente mensaje

hacemos clic en aceptar

clic en el botón ….

seleccionamos la imagen que deseamos guardar y clic en abrir

hacemos clic en save para guardar el registro

y si hemos hecho todo bien automáticamente nos debe aparecer el registro en el grid view con la imagen que acabamos de insertar

Espero haber ayudado en algo, se agradece comentarios, sugerencias y críticas constructivas gracias por la atención .. hasta otra oportunidad 🙂