web-dev-qa-db-ja.com

ASP.NET Webサイトで、ハードドライブのフォルダーから画像のリストをどのように表示しますか？

シンプルなフォトギャラリーサイトを作ろうと思っています。 ASP.NETおよびC＃の使用。現在、私はサーバーをセットアップしていませんが、Webサイトプロジェクトを作成して実行するときにVisual Studioが開始する開発サーバーを使用しています。

不明な数の画像を含むフォルダがハードドライブにあります。各画像を通過してデフォルトのWebページに追加するコードを書きたいのですが。私はこのコードを試しましたが、動作しません。何が悪いのですか？ ListViewコントロールまたはDataViewなどを使用する必要がありますか？画像にアクセスするために仮想ディレクトリを追加する必要がありますか？もしそうなら、このテストサーバーでどうすればいいですか？

また、これらの画像の位置と配置を設定するにはどうすればよいですか？たとえば、画像を垂直に並べ、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

まず、表示したい画像をWebツリーの下に配置する必要があります。あなたがそれを実行し、それらがImagesと呼ばれるフォルダにあると仮定しましょう。次に、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として使用するイメージコントロールです。それは簡単なことではありませんが、動作し、良い出発点になるはずです。

17
Dan Diplo

URLが<img>のC:\Users\Jordan\Desktop\Web Images\SomeImage.jpg要素を作成しています。明らかに、これはWebブラウザーでは機能しません。

画像をプロジェクトのサブフォルダーにコピーし、URLを次のように相対URLに設定する必要があります。

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

（Web Imagesフォルダーがアプリケーションルートのサブフォルダーであると想定）

3
SLaks

例えば

画像をアプリのどこに保存するかを指定する方法が必要です。したがって、パスが含まれている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>

あなたの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();
2
CA Martin