title: Image Browser in ASP.Net
body: <p>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.</p>
  
  <p>Here's what I have so far:</p>
  
  <p>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).</p>
  
  <p>On the code behind I bind a list of directories and image files to the DataList like so:</p>
  
  <pre><code>//Class property:
  public List&lt;FileSystemInfo&gt; filesAndDirs;
  
  //Page load:
  if (filesAndDirs == null)
  {
      filesAndDirs = new List&lt;FileSystemInfo&gt;();
  }
  DirectoryInfo di = new DirectoryInfo(MapPath("Images"));
  filesAndDirs.AddRange(di.GetDirectories());
  filesAndDirs.AddRange(di.GetFiles("*.jpg"));
  DataList1.DataSource = filesAndDirs;
  DataList1.DataBind();
  </code></pre>
  
  <p>In the aspx file I have the following:</p>
  
  <pre><code>&lt;asp:DataList ID="DataList1" runat="server" RepeatColumns="4" ...&gt;
      &lt;ItemTemplate&gt;
          &lt;img src='~/Images/&lt;%#Eval("Name") %&gt;' width="100" /&gt;
          &lt;asp:Label ID="Label3" Text='&lt;%#Eval("Name") %&gt;' runat="server" &gt;&lt;/asp:Label&gt;
      &lt;/ItemTemplate&gt;
  &lt;/asp:DataList&gt;
  </code></pre>
  
  <p>The labels displays the name of the file correctly, but so far, the image shows nothing. What am I doing wrong?</p>
  
  <p>How would you go about building an image browser like this?</p>
  
  <p>If you have a "starter kit" of a image browser or code that you can share I would really appreciate it!</p>
  
  <p>Thanks!!!</p>