2010-04-13 10 views
15

Sto cercando di creare un semplice sito web di gallerie fotografiche. Utilizzo di ASP.NET e C#. In questo momento non ho un server configurato, ma sto solo utilizzando quello di sviluppo che Visual Studio inizia quando si realizza un progetto di sito Web ed è in esecuzione.Come si visualizza un elenco di immagini, da una cartella sul disco rigido, sul sito Web ASP.NET?

Ho una cartella sul mio disco rigido che contiene un numero sconosciuto di immagini. Voglio scrivere un pezzo di codice che passerà attraverso ogni immagine e aggiungerli alla pagina web predefinita. Ho provato questo codice ma non funziona. Che cosa sto facendo di sbagliato? Dovrei usare un controllo ListView o un DataView o qualcosa del genere? Devo aggiungere una directory virtuale per accedere alle immagini? In tal caso, come faccio a farlo su questo server di prova?

ANCHE, come si imposta la posizione e l'allineamento di queste immagini? Ad esempio, come faccio a fare in modo che le immagini si trovino in una linea verticalmente e centrata sulla pagina 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++; 

    } 

} 

risposta

17

Per prima cosa è necessario posizionare le immagini che si desidera visualizzare sotto l'albero del web. Supponiamo che tu l'abbia fatto e che siano nella cartella chiamata Immagini. È quindi possibile utilizzare un controllo Repeater per visualizzare loro da associazione dati in questo modo:

qualcosa di simile ...

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

E poi nel codice dietro:

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(); 
} 

Questo in pratica crea una serie di immagini con il loro percorso completo dalla directory. Quindi crea un elenco di stringhe che contengono il percorso virtuale dell'immagine. Quindi associa l'Elenco al ripetitore, che visualizza ogni elemento nel suo modello, che è un controllo Immagine che utilizza il percorso come ImageUrl. È veloce e non lavorativo, ma funziona e dovrebbe essere un buon punto di partenza.

+0

Grazie Dan, funziona benissimo. Un'altra domanda ... Come posso far apparire tutte le immagini in una linea verticalmente centrata sulla pagina web? Ed è possibile ridimensionare le immagini? – PICyourBrain

+1

Per allineare le immagini utilizzare alcuni CSS - forse avvolgere ciascuna immagine in un div. Puoi utilizzare "ridimensionamento browser" specificando una larghezza e un'altezza nel controllo immagine, ma questo ridimensionerà l'immagine solo nel browser. Per ridimensionare effettivamente le immagini, guardare a livello di codice all'indirizzo http://www.west-wind.com/Weblog/posts/283.aspx –

3

si sta creando un elemento <img> con un URL di C:\Users\Jordan\Desktop\Web Images\SomeImage.jpg. Ovviamente, questo non funzionerà in un browser web.

È necessario copiare le immagini in una sottocartella del vostro progetto e impostare l'URL di un URL relativo, in questo modo:

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

(Supponendo che la cartella Web Images è una sottocartella della radice dell'applicazione)

1

Per esempio

È necessario disporre di un modo per specificare dove le immagini saranno memorizzate nella vostra app. Quindi è necessario un file di configurazione web con il percorso in esso. O se si vuole essere veramente creativi, è possibile memorizzare in un database ....

Nella tua pagina 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> 

Nel web.config

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

e In il tuo codice dietro il file .cs Hai davvero bisogno di filtrare i file, in questo modo se qualcuno (forse tu;)) inserisce file errati in esso, non li includerai inavvertitamente ...

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(); 
Problemi correlati