Cargar Imagenes con asp.net
Hola a todos nuevamente, creo que ya una o dos semanas sin publicar nada. He tenido mucho trabajo y por eso me he apartado, de igual forma acá les traigo un tema que me consulto Osvaldo Torchia desde Mexico, lo cual es algo sencillo pero que se vuelve complicado si estamos iniciando en el mundo del ASP.
Como mostrar una imagen utilizando rutas en variables desde el lado del servidor. En realidad este tema tiene varias respuestas en dependencia de lo que necesitemos. En esta publicación veremos como recuperar una o varias rutas de imagenes desde la base de datos.
Primer caso: Este sería el escenario más simple, tenemos una sola imagen y queremos mostrarla en nuestra página pero la ruta la pasaremos desde el lado del servidor.
En HTML llamar a una imagen es muy sencillo.
<img src="Img/Logotipo.gif"/> |
El control de servidor ASP que hace esta misma tarea es también muy sencillo de utilizar seria:
<asp:Image ID="Image1" runat="server" ImageUrl="~/Img/Logotipo.gif"/> |
Nuestro control de servidor ASP Image será el que utilizaremos para mostrar nuestra imagen, y es realmente simple puesto que lo único que aremos en el lado del servidor (CODE BEHIND) será por ejemplo en el evento Load de la página, llamar a nuestro control y modificar su propiedad ImageUrl
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not Page.IsPostBack Then Dim variable As String = "~/Img/Logotipo.gif" Me.Image1.ImageUrl = variable End If End Sub |
Nuestro resultado sería el mismo que si tuviéramos asignado la ruta desde nuestro código HTML
Otra opción es utilizar un control Literal (El control literal sirve para generar código HTML, recomiendo no generar controles del lado del servidor solo código HTML comun) y generar el código HTML completo.
En nuestro HTML tendríamos:
<asp:Literal ID="Literal1" runat="server"></asp:Literal> |
Ahora bien desde nuestro código del lado del servidor tendríamos:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not Page.IsPostBack Then Dim variable As String = "~/Img/Logotipo.gif" Me.Literal1.Text = "<img src=" & variable & "/>" End If End Sub |
Ahora si la ruta la tuviéramos guardada en nuestra base de datos en SQL, el código quedaría muy similar con la diferencia claro que incorporaríamos objetos de conexión y un objeto DATAREADER para recuperar los valores desde SQL; entonces nos quedaría de la siguiente forma:
Es importante importar el System.Data
Private Sub Mostrar_Imagen() '' CREAMOS UN OBJETO CONEXION Dim dbCon As New System.Data.OleDb.OleDbConnection("CADENA DE CONEXION") Try '' VALIDAMOS SI LA CONEXION YA ESTA ABIERTA If dbCon.State = ConnectionState.Closed Then dbCon.Open() End If Dim sql As String = "SET DATEFORMAT DMY " & vbCrLf 'EN CASO QUE EL SQL ESTE EN INGLES Y ESTEMOS UTILIZANDO FECHA DD/MM/YY '' AGREGAMOS NUESTRA CONSULTA QUE RECUPERARA EL VALOR '' LA CONSULTA DEBE RECUPERAR UNA SOLA FILA sql &= "TU CONSULTA" '' CREAMOS NUESTRO OBJETO COMAND PARA EJECUTAR LA CONSULTA EN SQL Dim cmd As New System.Data.OleDb.OleDbCommand(sql, dbCon) '' CREAMOS EL OBJETO DATAREADER QUE OBTENDRA LOS DATOS Dim dr As System.Data.OleDb.OleDbDataReader dr = cmd.ExecuteReader '' CREAMOS LA VARIABLE QUE ALMACENARA EL VALOR DE LA RUTA Dim variable As String = String.Empty '' VALIDAMOS SI EL DATAREADER TIENE DATOS If dr.Read() Then variable = dr.Item("NOMBRE DEL CAMPO EN LA CONSULTA").ToString() Me.Literal1.Text = "<img src=" & variable & "/>" '' O BIEN Me.Image1.ImageUrl = variable End If '' CERRAMOS EL DATAREADER PARA QUE NO QUEDE EN MEMORIA dr.Close() Catch ex As Exception '' ENVIAMOS MENSAJE EN CASO HAYA UN ERROR Finally '' CERRAMOS LA CONEXION If dbCon.State = ConnectionState.Open Then dbCon.Close() End If End Try End Sub |
Ahora en nuestro evento Load colocaríamos
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not Page.IsPostBack Then Mostrar_Imagen End If End Sub |
Y listo nuestro trabajo en este caso estaría finalizado.
Segundo Caso: Tenemos un conjunto de imágenes y todas las mostraremos desde el lado del servidor.
En este caso, la información de esas imágenes las tendremos en nuestra base de datos y recuperaremos dicha información desde un objeto DATASET, podemos por ejemplo utilizar varios controles pero lo mejor es utilizar un solo control LITERAL para generar cada imagen, quedaría entonces:
Private Sub Mostrar_Imagen() '' CREAMOS UN OBJETO CONEXION Dim dbCon As New System.Data.OleDb.OleDbConnection("CADENA DE CONEXION") Try '' VALIDAMOS SI LA CONEXION YA ESTA ABIERTA If dbCon.State = ConnectionState.Closed Then dbCon.Open() End If Dim sql As String = "SET DATEFORMAT DMY " & vbCrLf 'EN CASO QUE EL SQL ESTE EN INGLES Y ESTEMOS UTILIZANDO FECHA DD/MM/YY '' AGREGAMOS NUESTRA CONSULTA QUE RECUPERARA EL VALOR '' LA CONSULTA DEBE RECUPERAR DEBE TENER UNA FILA O MAS sql &= "TU CONSULTA" '' CREAMOS UN OBJETO DATAADAPTAR PARA ENVIAR LA CONSULTA A SQL Dim da As New System.Data.OleDb.OleDbDataAdapter(sql, dbCon) '' CREMAOS EL OBJETO DATASET Dim ds As New DataSet() '' LLENAMOS EL DATASET CON NUESTRO DATAADAPTER da.Fill(ds, "NOMBRE_DE_LA_TABLA_VIRTUAL_QUE_SE_GENERA") '' CREAMOS LA VARIABLE QUE ALMACENARA EL VALOR DE LA RUTA Dim variable As String = String.Empty '' VALIDAMOS SI EL DATASET TIEN REGISTROS If ds.Tables(0).Rows.Count > 0 Then '' RECORREMOS EL DATASET PARA IR AGREGANDO CADA IMAGEN For i As Integer = 0 To ds.Tables(0).Rows.Count - 1 '' RECUPERAMOS EL CAMPO EN LA FILA QUE ESTAMOS PASANDO variable = ds.Tables(0).Rows(i).Item("NOMBRE DEL CAMPO EN LA CONSULTA").ToString '' ASIGNAMOS UNA NUEVA IMAGEN, ES IMPORTANTE EL &= SI SOLO DEJAMOS = EL DATO SE REMPLAZARA Me.Literal1.Text &= "<img src=" & variable & "/>" Next i End If '' ELIMINAMOS EL DATASET PARA QUE NO QUEDE EN MEMORIA ds.Dispose() Catch ex As Exception '' ENVIAMOS MENSAJE EN CASO HAYA UN ERROR Finally '' CERRAMOS LA CONEXION If dbCon.State = ConnectionState.Open Then dbCon.Close() End If End Try End Sub |
Ahora finalmente solo colocamos la el proceso en nuestro evento y listo hemos mostrado un listado de imágenes desde nuestro lado del servidor hasta nuestra página ASP.
Eso ha sido todo, si tienen alguna duda comenten y siempre compartan, me ayudaría mucho.
[…] Como mostrar una imagen utilizando rutas en variables desde el lado del servidor. En realidad este tema tiene varias respuestas en dependencia de lo que necesitemos. En esta publicación veremos como recuperar una o varias rutas de imagenes desde la base de datos… Sigue Leyendo […]
Gracias