Menu
I am trying to make a simple photo gallery website. Using ASP.NET and C#. Right now I don't have a server set up but I am just using the development one that Visual Studio Starts when you make a website project and run it.
I have a folder on my hard drive that contains an unknown number of images. I want to write a piece of code that will go through each image and add them to the default webpage. I have tried this code but it doesn't work. What am I doing wrong? Should I be using a ListView control or a DataView or something like that? Do I need to add a virtual directory in order to access the images? If so, how do I to that on this test server?
ALSO, how do I set the position and alignment of these pictures? For example, how would I make it so that the pictures are in a line vertically and centered on the webpage?
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++;
}
}
608
First you need to place the images you want to display under the web tree. Let's assume you have done that and they are in folder called Images. You can then use a Repeater control to display them by data-binding it like so:
Something like this...
<asp:Repeater ID="RepeaterImages" runat="server">
<ItemTemplate>
<asp:Image ID="Image" runat="server" ImageUrl='<%# Container.DataItem %>' />
</ItemTemplate>
</asp:Repeater>
And then in your code behind:
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();
}
This basically creates an array of images with their full path from the directory. It then creates a List of strings that contain the virtual path to the image. It then binds that List to the repeater, which displays each item in it's template, which is an Image control which uses the path as the ImageUrl. It's quick'n'dirty, but works and should be a good starting point.
140
You're creating an <img> element with a URL of C:\Users\Jordan\Desktop\Web Images\SomeImage.jpg. Obviously, that won't work in a web browser.
You should copy the images to a subfolder of your project, and set the URL to a relative URL, like this:
img.ImageUrl = "~/Web Images/" + Path.GetFileName(s);
(Assuming that the Web Images folder is a subfolder of the application root)
42
For instance
You need to have a way to specify where your images will be stored in your app. Therefore you need a web config file with the path in it. Or if you want to be really creative, you can store it in a database....
In your Web Page
<%@ 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>
In your web.config
<appSettings>
<add key="FilePath" value="~/images"/>
</appSettings>
and In your code behind .cs file You really need to filter files, that way if someone( maybe you ;) ) puts erroneous files in it, you won't inadvertently include them...
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();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
