Ver imagenes desde un Gridview .Net basado en base de datos

Antes que nada vamos a crear los archivos aspx. El Primero contiene los controles para subir una imagen al servidor e insertar la ruta en un campo de una base de datos. Al archivo le pondremos SubirFoto.aspx.

runat=”server” id=”File1″ type=”file” />
TextBox ID=”TextBoxComent” runat=”server”>
Image ID=”Image1″ runat=”server” AlternateText=”Ok” Width=”80px” />
TextBox ID=”TextBoxF1″ runat=”server” ReadOnly=”True” Width=”1px” BorderStyle=”None” ForeColor=”White”>
Button ID=”ButtonSubirFoto” runat=”server” OnClick= “ButtonSubirFoto_Click” Text=”Subir Fotos” />

Solo vamos a usar cuatro controles. Un de HTML que se ejecutará en el servidor con la propiedad runat=”server”. Tambien agregamos dos asp:TextBox, un asp:Image  y un asp:Button.

En el módulo de codigo SubirFoto.aspx.cs del archivo SubirFoto.aspx escribiremos el evento para el control Button.

//la Conexion la obtenemos del archivo web.config.

//<connectionStrings>
//name=”CDCConnectionStringMdb” //connectionString=”Provider=Microsoft.Jet.OLEDB.4.0;Data Source=D:\DatosWeb\fotos\fotos.mdb” providerName=”System.Data.OleDb”/>
//</connectionStrings>

public static string MiConeccion = MiConeccion = System.Configuration.ConfigurationManager.ConnectionStrings[“CDCConnectionStringMdb”].ConnectionString;

private void ButtonSubirFoto_Click(object sender, EventArgs e)
{
if ((File1.PostedFile != null) && (File1.PostedFile.ContentLength > 0))
{
string fn = System.IO.Path.GetFileName(File1.PostedFile.FileName);
string[] Archivos;
Archivos = Directory.GetFiles(Server.MapPath(“SubirImagenes/”));
int i = Archivos.Length; //Conseguimos la cantidad de imagenes en la carpeta
//agregamos un consecutivo para que no haya problemas de sobreescribir imagenes
string Ubicacion = Server.MapPath(“SubirImagenes/”) + “\\” + i + “_” + fn;
this.TextBoxF1.Text = “SubirImagenes/” + i + “_” + fn;
try
{
File1.PostedFile.SaveAs(Ubicacion);
this.Image1.Visible = true;
this.Image1.ImageUrl = this.TextBoxF1.Text;
Response.Write(“La imagen se ha subido satisfatoriamente”);
}
catch (Exception ex)
{
Response.Write(“Error: ” + ex.Message);
}
}
else
{
string Mensaje = “// “;
Page.ClientScript.RegisterStartupScript(this.GetType(), “Mensaje”, Mensaje);
return;
}
}

//Insertar un registro en la base de datos con la dirección de la imagen y su comentario.

private void InsertarFoto()
{
string Foto = this.TextBoxF1.Text;
string Comentario = this.TextBoxComent.Text;
string InsertarDatosFoto = “INSERT INTO direccionfotos ”
+ “(foto1, comentarios1)”
+ “VALUES (Foto + “‘, ‘” + Comentario + “‘)”;
OleDbConnection MyConexion = new OleDbConnection(MiConeccion);//La conexion la tengo en el archivo web.config
System.Data.OleDb.OleDbCommand MyInsert = new OleDbCommand(InsertarDatosFoto, MyConexion);
MyInsert.Connection.Open();
MyInsert.ExecuteNonQuery();
MyInsert.Connection.Close();
}

Vean que guardamos la ruta de la imagen simplemente como un string.

Ahora creamos otro archivo que se llamara VerImagenes.aspx y allí pondremos un asp:GridView con las siguientes propiedades. Antes cabe mencionar que identificamos el id del registro con la propiedad DataKeyNames=”Iddireccion” (por si despues queremos modificar el registro desde el GridView).

GridView ID=”GridViewFotos” runat=”server” AutoGenerateColumns=”False” BackColor=”White” BorderColor=”#999999″ BorderStyle=”None” BorderWidth=”1px” CellPadding=”3″ GridLines=”Vertical” OnPageIndexChanging=”GridViewFotos_PageIndexChanging” DataKeyNames=”Idruta” Font-Names=”Arial” Font-Size=”XX-Small” AllowPaging=”True” OnSelectedIndexChanged=”GridViewFotos_SelectedIndexChanged”>
BackColor=”#CCCCCC” ForeColor=”Black” />
BackColor=”#EEEEEE” ForeColor=”Black” />
<Columns>
BoundField DataField=”iddireccion” HeaderText=”Id” />
TemplateField HeaderText=”Foto”>
<HeaderTemplate>Foto</HeaderTemplate>
<ItemTemplate>
alt=”Foto” id=”MiFoto” src='<%# DataBinder.Eval(Container.DataItem, “foto1″) %>’ border=”0” height=”100px”/>

href='<%# DataBinder.Eval(Container.DataItem, “foto1″) %>’ target=”_blank” style=”font-size:xx-small; color:Red;”>Ver tamaño real
TemplateField>
BoundField DataField=”comentarios1″ HeaderText=”Comentarios” />
</Columns>
BackColor=”#999999″ ForeColor=”Black” HorizontalAlign=”Center” />
BackColor=”#008A8C” Font-Bold=”True” ForeColor=”White” />
BackColor=”#000084″ Font-Bold=”True” ForeColor=”White” />
BackColor=”Gainsboro” />
Position=”TopAndBottom” />
GridView>

Ahora, escribimos el siguiente código en el archivo VerImagenes.aspx.cs:

public static string MiConeccion = MiConeccion = System.Configuration.ConfigurationManager.ConnectionStrings[“CDCConnectionStringMdb”].ConnectionString;

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGrid();
}
}

//Cargamos el GridView

private void BindGrid()
{
string consulta = “SELECT * FROM direccionfotos”;
OleDbDataAdapter da;
DataTable dt = new DataTable();
da = new OleDbDataAdapter(consulta, MiConeccion);
da.Fill(dt);
this.GridViewFotos.DataSource = dt;
this.GridViewFotos.DataBind();
}

//Para poder pasar la página y ver mas fotos

protected void GridViewFotos_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
this.GridViewFotos.PageIndex = e.NewPageIndex;
BindGrid();
}

Bueno pues, creo que de esta manera podrá subir y ver las fotos.

Saludos

Anuncios

Un comentario sobre “Ver imagenes desde un Gridview .Net basado en base de datos

  1. Hola Jazdian, es excelente tu post, lo que me gustaria saber es si me puedes pasar el ejemplo para poder probarlo. Seria de gran ayuda para mi.
    Muchisimas gracias

    Mariano

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s