2010-04-13 10 views
15

Estoy tratando de hacer un sitio web simple galería de fotos. Usando ASP.NET y C#. En este momento no tengo un servidor configurado pero solo estoy usando el desarrollo que Visual Studio inicia cuando usted hace un proyecto de sitio web y lo ejecuta.¿Cómo se muestra una lista de imágenes, desde una carpeta en el disco duro, en el sitio web de ASP.NET?

Tengo una carpeta en mi disco duro que contiene un número desconocido de imágenes. Quiero escribir un fragmento de código que recorra cada imagen y las agregue a la página web predeterminada. He intentado este código pero no funciona. ¿Qué estoy haciendo mal? ¿Debo usar un control ListView o un DataView o algo así? ¿Debo agregar un directorio virtual para acceder a las imágenes? Si es así, ¿cómo hago eso en este servidor de prueba?

TAMBIÉN, ¿cómo configuro la posición y la alineación de estas imágenes? Por ejemplo, ¿cómo lo haría para que las imágenes estén en una línea vertical y centrada en la página web?

protected void Page_Load(object sender, EventArgs e) 
{ 
    string[] filesindirectory = Directory.GetFiles(@"C:\Users\Jordan\Desktop\Web Images"); 
    int i = 1; 
    foreach (string s in filesindirectory) 
    { 
     Image img = new Image(); 
     img.ID = "image" + i.ToString(); 
     img.ImageUrl = s; 
     img.Visible = true; 
     Page.Controls.Add(img); 
     i++; 

    } 

} 

Respuesta

17

Primero debe colocar las imágenes que desea mostrar debajo del árbol web. Supongamos que lo ha hecho y están en una carpeta llamada Imágenes. A continuación, puede utilizar un control Repeater para mostrarlos por enlace de datos que de este modo:

Algo como esto ...

<asp:Repeater ID="RepeaterImages" runat="server"> 
    <ItemTemplate> 
     <asp:Image ID="Image" runat="server" ImageUrl='<%# Container.DataItem %>' /> 
    </ItemTemplate> 
</asp:Repeater> 

Y luego en su código detrás:

protected void Page_Load(object sender, EventArgs e) 
{ 
    string[] filesindirectory = Directory.GetFiles(Server.MapPath("~/Images")); 
    List<String> images = new List<string>(filesindirectory.Count()); 

    foreach (string item in filesindirectory) 
    { 
     images.Add(String.Format("~/Images/{0}", System.IO.Path.GetFileName(item))); 
    } 

    RepeaterImages.DataSource = images; 
    RepeaterImages.DataBind(); 
} 

Este básicamente crea una matriz de imágenes con su ruta completa desde el directorio. A continuación, crea una lista de cadenas que contienen la ruta virtual a la imagen. A continuación, vincula esa lista al repetidor, que muestra cada elemento en su plantilla, que es un control de imagen que utiliza la ruta como ImageUrl. Es rapid'n'dirty, pero funciona y debería ser un buen punto de partida.

+0

Gracias Dan, esto funciona muy bien. Otra pregunta ... ¿Cómo puedo hacer que todas las imágenes aparezcan en una línea vertical y centrada en la página web? ¿Y es posible escalar las imágenes? – PICyourBrain

+1

Para alinear las imágenes, utilice CSS, tal vez ajuste cada imagen en un div. Puede usar "escalado del navegador" especificando un ancho y alto en el control de imagen, pero esto solo escalará la imagen en el navegador. Para escalar las imágenes mediante programación, consulte http://www.west-wind.com/Weblog/posts/283.aspx –

3

va a crear un elemento <img> con una URL de C:\Users\Jordan\Desktop\Web Images\SomeImage.jpg. Obviamente, eso no funcionará en un navegador web.

Debería copiar las imágenes a una subcarpeta de su proyecto, y establecer la dirección URL a una dirección URL relativa, así:

img.ImageUrl = "~/Web Images/" + Path.GetFileName(s); 

(suponiendo que la carpeta Web Images es una subcarpeta de la raíz de la aplicación)

1

Por ejemplo

Usted necesita tener una forma de especificar dónde se almacenarán las imágenes en su aplicación. Por lo tanto, necesita un archivo de configuración web con la ruta de acceso. O si quieres ser realmente creativo, se puede almacenar en una base de datos ....

En su página Web

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Images.aspx.cs" Inherits="ImageViewer" %> 


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head runat="server"> 
     <title>Viewer Demo</title> 
     <link href='styles.css' rel='stylesheet' type='text/css' /> 
    </head> 
    <body> 
     <form id="form1" runat="server"> 
      <div id="outer"> 
       <h2>Viewer Demo</h2> 
       <br />    
       <div style="clear:both;"> 
        <h4>Using Viewer with the Repeater Control</h4> 
        <p>Repeater control to display a collection of images.</p> 
       </div> 
       <div style="clear:both;"> 
       <asp:Repeater ID="RepeaterImages" runat="server"> 
        <ItemTemplate> 
         <asp:Image ID="Image" runat="server" ImageUrl='<%# Container.DataItem %>' /> 
        </ItemTemplate> 
       </asp:Repeater> 
       </div>     
       <br />  
      </div> 
     </form> 
    </body> 
    </html> 

En su web.config

<appSettings> 
     <add key="FilePath" value="~/images"/> 
    </appSettings> 

e In su código detrás del archivo .cs Realmente necesita filtrar archivos, de esa manera si alguien (tal vez usted;)) pone archivos erróneos en él, no los incluirá inadvertidamente ...

string filters = "*.jpg;*.png;*.gif"; 
    string Path = ConfigurationManager.AppSettings["FilePath"].ToString(); 

    List<String> images = new List<string>(); 

    foreach (string filter in filters.Split(';')) 
    { 
     FileInfo[] fit = new DirectoryInfo(this.Server.MapPath(Path)).GetFiles(filter); 
     foreach (FileInfo fi in fit) 
     { 
      images.Add(String.Format(Path + "/{0}", fi));     
     } 
    } 

    RepeaterImages.DataSource = images; 
    RepeaterImages.DataBind(); 
Cuestiones relacionadas