Photo gallery user control

Question

I am trying to create something that is very reusable here so that I can use it in other sites for other pages etc.

This code is for a simple photo gallery,

I took the code from here, but I changed it a bit and would like to add more functionality to it eventually, though.

PhotoGallery.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PhotoGallery.ascx.cs" Inherits="PhotoGallery" %>
<style>
    #ImageGallery {
        overflow:auto; 
        height:500px; 
        width:330px; 
        display:block;
    }
    #GalleryContainer {
        width:300px;
        align-content:center;
        border-right:3px solid #EEEEEE;
    }
    .thumbnails {
        cursor:pointer;
        width:100px;
    }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#ImageGallery img').click(function () {
            var bigImagePath = $(this).attr('src');
            $('#bigImage').attr('src', bigImagePath);
        });
    });
</script>
<h3>Before and After Pictures</h3>
<table>
    <tr>
        <td id="GalleryContainer">
            <div id="ImageGallery">
                <asp:Repeater ID="Repeater1" runat="server">
                    <ItemTemplate>
                        <img class="thumbnails" src='<%#Eval("ImageUrl") %>' alt='<%#Eval("ImageUrl") %>' />
                    </ItemTemplate>
                </asp:Repeater>
            </div>
        </td>
        <td>
            <img id="bigImage" alt="" />
        </td>
    </tr>
</table>

PhotoGallery.ascx.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class PhotoGallery : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            PopulateImages();
        }
    }

    public string FolderPath {get;set;}

    private void PopulateImages()
    {
        List<Image> myImages = new List<Image>();
        DirectoryInfo DI = new DirectoryInfo(Server.MapPath(FolderPath));
        foreach (var file in DI.GetFiles())
        {
            myImages.Add(new Image { ImageUrl = FolderPath + file.Name });
        }
        Repeater1.DataSource = myImages;
        Repeater1.DataBind();
    }
}

Answer 1

• the variable holding the DirectoryInfo object should be named using lower case.

• you should always use Sytem.IO.Path.Combine() to combine a folder with a filename.

• you could use DirectoryInfo.EnumerateFiles combined with the Select() and assign the returned IEnumerable to the DataSource property of the Repeater control.

• you should add spacing to the property FolderPath. Instead of

  public string FolderPath {get;set;}  
  

  you should use

  public string FolderPath { get; set; }  
  

• Repeater1 is an ugly name which isn't decsriptive either. Change it to something more descriptive.

Answer 2

You really just need an IEnumerable of strings and not images. You could probably directly bind the results of the GetFiles method!!

Also I don't really see a need to break the method out of Page_Load. Too many submethods leads to spaghetti.

Generally when dealing with IEnumerables there is no need to new up a list and add to it, just call a linq method on the IEnumerable you want to transform.