user51064
user51064

Reputation:

Image Browser in ASP.Net

I have some experience with .Net (Win Forms and WPF) but am very very green in ASP.Net. I was given the task of building a simple, file system-based picture browser, and I would like your help in guiding me on how I can accomplish this. The images are supposed to be stored in the web server where the application runs, in a folder called "Images" under the main application directory.

Here's what I have so far:

I am using a DataList and the ItemTemplate of the DataList consists of 1 img (for the actual thumbnail image) and 1 label (for the name of the picture).

On the code behind I bind a list of directories and image files to the DataList like so:

//Class property:
public List<FileSystemInfo> filesAndDirs;

//Page load:
if (filesAndDirs == null)
{
    filesAndDirs = new List<FileSystemInfo>();
}
DirectoryInfo di = new DirectoryInfo(MapPath("Images"));
filesAndDirs.AddRange(di.GetDirectories());
filesAndDirs.AddRange(di.GetFiles("*.jpg"));
DataList1.DataSource = filesAndDirs;
DataList1.DataBind();

In the aspx file I have the following:

<asp:DataList ID="DataList1" runat="server" RepeatColumns="4" ...>
    <ItemTemplate>
        <img src='~/Images/<%#Eval("Name") %>' width="100" />
        <asp:Label ID="Label3" Text='<%#Eval("Name") %>' runat="server" ></asp:Label>
    </ItemTemplate>
</asp:DataList>

The labels displays the name of the file correctly, but so far, the image shows nothing. What am I doing wrong?

How would you go about building an image browser like this?

If you have a "starter kit" of a image browser or code that you can share I would really appreciate it!

Thanks!!!

Upvotes: 1

Views: 1934

Answers (1)

Bob
Bob

Reputation: 99684

Add runat="server" to your img tag. The tilde "~" only works for server based controls. With the code in its current state it sends "~/Images/img.jpg" to the client. Making it a server control will have it resolve the image path.

I would recommend checking out this project as a starter http://www.jigar.net/applications/album/index.aspx

Upvotes: 2

Related Questions