Как вы отображаете список изображений из папки на жестком диске на веб-сайте ASP.NET?

Я пытаюсь сделать простой сайт фотогалереи. Использование ASP.NET и С#. Прямо сейчас у меня нет настроенного сервера, но я просто использую разработку, которую запускает Visual Studio, когда вы создаете проект веб-сайта и запускаете его.

У меня есть папка на моем жестком диске, которая содержит неизвестное количество изображений. Я хочу написать фрагмент кода, который пройдет через каждое изображение и добавит его на веб-страницу по умолчанию. Я пробовал этот код, но он не работает. Что я делаю не так? Должен ли я использовать элемент управления ListView или DataView или что-то в этом роде? Нужно ли добавлять виртуальный каталог для доступа к изображениям? Если да, то как это сделать на этом тестовом сервере?

ТАКЖЕ, как мне установить положение и выравнивание этих изображений? Например, как я могу сделать это так, чтобы изображения были вертикально и центрированы на веб-странице?

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++;

    }

}

ОТВЕТЫ

Ответ 1

Сначала вам нужно поместить изображения, которые вы хотите отобразить под веб-деревом. Предположим, вы сделали это, и они находятся в папке "Изображения". Затем вы можете использовать элемент Repeater для отображения их путем привязки данных таким образом:

Что-то вроде этого...

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

И затем в вашем коде позади:

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

В основном создается массив изображений с полным путем из каталога. Затем он создает список строк, содержащих виртуальный путь к изображению. Затем он связывает этот список с ретранслятором, который отображает каждый элемент в его шаблоне, который является элементом управления изображением, который использует путь как ImageUrl. Это быстро, грязно, но работает и должно быть хорошей отправной точкой.

Ответ 2

Создается элемент <img> с URL-адресом C:\Users\Jordan\Desktop\Web Images\SomeImage.jpg. Очевидно, что это не будет работать в веб-браузере.

Скопировать изображения в подпапку вашего проекта и установить URL-адрес для относительного URL-адреса, например:

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

(Предполагая, что папка Web Images является подпапкой корня приложения)

Ответ 3

Например

У вас должен быть способ указать, где ваши изображения будут храниться в вашем приложении. Поэтому вам нужен файл веб-конфигурации с указанием пути в нем. Или если вы хотите быть действительно творческим, вы можете сохранить его в базе данных....

На веб-странице

    <%@ 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>

В вашем web.config

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

и в вашем коде за .cs файлом Вам действительно нужно фильтровать файлы, если кто-то (возможно, вы;)) ставит ошибочные файлы в нем вы не будете непреднамеренно включать их...

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