web-dev-qa-db-fra.com

Comment affichez-vous une liste d'images, à partir d'un dossier sur disque dur, sur le site Web ASP.NET?

J'essaie de faire un simple site Web de la galerie de photos. En utilisant ASP.NET et C #. À l'heure actuelle, je n'ai pas de serveur mis en place mais j'utilise simplement le développement que Visual Studio démarre lorsque vous effectuez un projet de site Web et de l'exécuter.

J'ai un dossier sur mon disque dur qui contient un nombre inconnu d'images. Je veux écrire un morceau de code qui traversera chaque image et les ajoutera à la page Web par défaut. J'ai essayé ce code mais ça ne marche pas. Qu'est-ce que je fais mal? Devrais-je utiliser un contrôle ListView ou un DataView ou quelque chose comme ça? Dois-je ajouter un répertoire virtuel afin d'accéder aux images? Si oui, comment puis-je à cela sur ce serveur de test?

En outre, comment définir la position et l'alignement de ces images? Par exemple, comment puis-je le faire pour que les images soient alignées verticalement et centrées sur la page 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++;

    }

}
c#htmlasp.netimagelistview
15
PICyourBrain

Vous devez d'abord placer les images que vous souhaitez afficher sous l'arborescence Web. Supposons que vous ayez fait cela et ils sont dans un dossier appelé des images. Vous pouvez ensuite utiliser un contrôle de répéteur pour les afficher par la liaison de données.

Quelque chose comme ça...

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

Et puis dans votre code derrière:

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

Cela crée essentiellement une gamme d'images avec leur chemin complet dans le répertoire. Il crée ensuite une liste de chaînes contenant le chemin virtuel de l'image. Il lie ensuite cette liste au répéteur, qui affiche chaque élément de son modèle, ce qui est une commande d'image qui utilise le chemin comme image de l'image. C'est Quick'n'Dirty, mais fonctionne et devrait être un bon point de départ.

17
Dan Diplo

Vous créez un <img> élément avec une URL de C:\Users\Jordan\Desktop\Web Images\SomeImage.jpg. De toute évidence, cela ne fonctionnera pas dans un navigateur Web.

Vous devez copier les images dans un sous-dossier de votre projet et définir l'URL à une URL relative, comme celle-ci:

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

(En supposant que le Web Images Dossier est un sous-dossier de la racine de l'application)

3
SLaks

Par exemple

Vous devez avoir un moyen de spécifier où vos images seront stockées dans votre application. Par conséquent, vous avez besoin d'un fichier de configuration Web avec le chemin d'accès. Ou si vous voulez être vraiment créatif, vous pouvez le stocker dans une base de données ....

Dans votre page 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>

Dans votre web.config

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

et dans votre code derrière le fichier .Cs, vous devez vraiment filtrer des fichiers, de cette façon si quelqu'un (peut-être vous;)) Place des fichiers erronés, vous ne les inclurez pas par inadvertance ...

    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();
2
CA Martin