HTML/[removed] Iterate through all elements of local (server-side) folder

Question

Basically, I have a very simple website where the root directory looks like:

/images/
index.html
stuff.js

I want some way to recursively it

Answer 1

I stumbled on this article, as I was looking for the same thing, how to iterate through a list of files in a "Resources" folder, and display a webpage with clickable shortcuts to each of them.

Here's a clip of the webpage I ended up with:

Here's how I did it.

I added a very simple ASP.Net service, to iterate through the files in this folder...

List listOfFilenames = new List();

string Icon = "";
string localFolder = Server.MapPath("../Resources");
string[] fileEntries = Directory.GetFiles(localFolder);
foreach (string fileName in fileEntries)
{
    string filename = System.IO.Path.GetFileName(fileName);
    switch (Path.GetExtension(filename).ToLower())
    {
        case ".pptx":
        case ".ppt":
            Icon = "cssPowerPoint";
            break;
        case ".doc":
        case ".docx":
            Icon = "cssWord";
            break;
        case ".xlsx":
        case ".xlsm":
        case ".xls":
            Icon = "cssExcel";
            break;
        default:
            Icon = "cssUnknown";
            break;
    }
    OneResourceFile oneFile = new OneResourceFile()
    {
        Filename = filename,
        IconClass = Icon,
        URL = "../Resources/" + filename
    };
    listOfFilenames.Add(oneFile);
}

string JSON = JsonConvert.SerializeObject(listOfFilenames);
return JSON;

..which built up a List of OneResouceFile records, each with a Filename, a CSS Class to apply to that shortcut (which would give it, say, an Excel icon, a PDF icon, etc) and a full URL of the item.

public class OneResourceFile
{
    public string Filename { get; set; }
    public string IconClass { get; set; }
    public string URL { get; set; }
}

..and which returned a JSON set of results like this...

[
    {
        Filename: "Mikes Presentation.pptx",
        IconClass: "cssPowerPoint",
        URL: "~/Resources/Mikes Presentation.pptx"
    },
    {
        Filename: "Mikes Accounts.xlsx",
        IconClass: "cssExcel",
        URL: "~/Resources/Mikes Accounts.xlsx""
    }
]

Then, I just got some JQuery to call this web service, and create a a href for each item in the results:

All you need then is to add some CSS styling for cssPowerPoint, cssExcel, etc, to give the a hrefs a relevant icon, for example:

.cssPowerpoint
{
    vertical-align: top;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center 5px;
    background-image: url(/Images/Icons/icnPowerPoint.png);
    width: 100px;
    height: 60px;
    padding-top: 60px;
    text-decoration: none;
    display:inline-block;
    color: #666;
    margin-left: 20px;
}

And that's it. Cool, hey ?