actualizar pantalla cambio de imagen

[titanikoktf]

Buenas a todos!

Os cuento el problema. Tengo una página web aspx con la funcionalidad en C#. La página se ve una imagen y está la opción de poder cambiarla con fuImagen.PostedFile.SaveAs(path + "logotipo.jpg"); y entonces la imagen se cambia en la estructura de archivos pero la página no se actualiza.

¿Cómo puedo recargar la imagen? Sería algo parecido a hacer un Bind en un dataGridView pero a la img.

Gracias de antemano y saludos.

[Malenko]

La imagen en que proceso de ejecución de la página se carga? Load, Init, ...?

[Bravenap]

Buenas. Yo te recomiendo que uses AJAX para el procedimiento dentro de un UpdatePanel.

Un saludo.

[titanikoktf]

Buenos días!

Malenco, la imagen es un img de .aspx. Desconozco cuando se carga. Pero como con AJAX solo he usado los temporizadores, voy a indagar sobre el UpdatePanel. Os voy contando.

Saludos!

[titanikoktf]

Sigo contado!
Como no me entero mucho sigo con mis problemas. Ahora he puesto la imagen en un UpdatePanel y un ScriptManager. Pero no se muy bien como enlazarlos con el botón subir archivo.

Pongo el código que seguro que ayuda. Esto es lo que hago cuando le doy al botón subir archivo:

Código:

//Establecemos el path donde subiremos la foto
            String path = Server.MapPath("/Imagenes/");
            //Comprobamos que tenga imagen cargada cuando se pulsa botón
            if (fuImagen.HasFile)
            {
                try
                {
                    //Subimos la foto
                    fuImagen.PostedFile.SaveAs(path + "logotipo.jpg");
                   
                }
                catch (Exception ex)
                {
                    MessageBox.Show("El archivo no se ha podido subir");
                }
            }

En .aspx lo que tengo es el botón sube archivo y el img:

Código HTML:

 <asp:Button ID="btSubeArchivo" runat="server" onclick="btSubeArchivo_Click" 
        Text="Sube Archivo" />
 <asp:Image ID="Image2" runat="server" Height="121px" 
            ImageUrl="~/Imagenes/logotipo.jpg" Width="114px" /> 

Ahora añadí algo como esto:

Código HTML:

 <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Image ID="Image1" runat="server" Height="142px" 
                ImageUrl="~/Imagenes/logotipo.jpg" Width="115px" />
        </ContentTemplate>
    </asp:UpdatePanel> 

Y entonces he de actualizar el updatePanel cuando pulse el botón!!

Saludos y gracias de antemano.

[Bravenap]

Mete el control para subir el archivo también dentro del UpdatePanel. No tienes que tocar nada más y se refrescará sólo el panel.

[titanikoktf]

Lo primero gracias por la respuesta tan rápida!!
Hice lo que me comentas, pero la fastidio por algún lado porque no lo actualiza!
Metí el FileUpload y el botón de subir dentro del updatePanel y el scriptManager justo encima. Pongo abajo el código.

Con esto lo que hace es que la instrucción fuImagen2.HasFile la devuelve como false, aún cuando hay un archivo seleccionado.

¿Qué estoy haciendo mal?

Muchísimas gracias de antemano!

Código HTML:

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Image ID="Image1" runat="server" Height="142px" 
                ImageUrl="~/Imagenes/logotipo.jpg" Width="115px" />
            <br />
            <br />
            <asp:FileUpload ID="fuImagen" runat="server" />
            &nbsp;
            <asp:Button ID="btSubeArchivo" runat="server" onclick="btSubeArchivo_Click" 
                Text="Sube Archivo" />
            <br />
        </ContentTemplate>
    </asp:UpdatePanel> 

[mdavila]

Me parece que los objetos FileUpload no funcionan dentro de un UpdatePanel ok.

[titanikoktf]

Gracias por la respuesta!

He estado probando y para que funcione el FileUpload, tiene que estar dentro del UpdatePanel junto con el botón que lanza el evento SaveAs. Si pongo el FileUpload fuera del UpdatePanel y el botón SaveAs dentro, no pita el FileUpload!!

Si pongo el FileUpload y el SaveAs dentro del UpdatePanel, el FileUpload funciona, pero tengo que darle a F5 para ver la imagen cambiada. Si pongo el ScriptManager dentro del UpdatePanel junto con el FileUpload y el SaveAs, lo mismo, funciona pero no actualiza!!

Eso me pasa por no tener ni idea de AJAX (weno ni de na)!

Gracias de nuevo!

[Bravenap]

Prueba a hacer esto en el código:

Código C#:

try
{
//Subimos la foto
fuImagen.PostedFile.SaveAs(path + "logotipo.jpg");
this.Image1.ImageUrl = "~/Imagenes/logotipo.jpg";
}
 

[Bravenap]

Puede que al final haya algún problema al usar FileUpload y UpdatePanel, ya que la subida de archivos no se realiza de manera asíncrona.

Una posible solución es usar un control especial que realiza la carga de archivos en iframe: http://fileuploadajax.subgurim.net/

Otra opción sería que abrieses un popup para cargar el archivo, cerrar la ventana y mediante Javascript refrescar el UpdatePanel.

Suerte.

[titanikoktf]

Muchas gracias por tu ayuda!

He intentado usar el control que me comentas pero no consigo hacerlo funcionar. Como voy hasta arriba y no puedo emplear más tiempo, lo solucioné con dos herramientas de bajo nivel. La primera comprándome un libro de javascript que ya era hora y la segunda con el siguiente texto en la página:

* Una vez subida la imagen hay que recargar la página (F5) para que se visualice.

De nuevo gracias y un saludo.

[Bravenap]

Bueno, una solución al fin y al cabo. El control la verdad es que no lo he visto, simplemente tenía el enlace. No obstante, creo que la solución del popup podría resultar y es bastante elegante. Tampoco requeriría grandes complejidades JS.

Un saludo.

[Bravenap]

Acabo de caer. El Ajax Control Toolkit tiene un regalito para ti: AsyncFileUpload

Un saludo.