ASP.Net Image Browser

I have some experience with .Net (Win Forms and WPF) but I am very green in ASP.Net. I was tasked with creating a simple file system based file browser and I would like your help to guide me on how I can do this. Images are expected to be stored on the web server where the application is running in the Images folder in the application's main directory.

Here's what I have so far:

I am using DataList and ItemTemplate from DataList consists of 1 img (for actual thumbnail image) and 1 label (for image title).

In the code behind, I am linking a list of directories and image files to the DataList like this:

//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 display the file name correctly, but the image is not displayed yet. What am I doing wrong?

How are you going to design an image browser this way?

If you have an image or code browser "starter kit" to share, I'd really appreciate it!

Thank!!!