I'd like to present a simple File Viewer that uses the ASP.NET TreeView control. This is how it looks:

ASP.NET FileViewer.png

In the above example, the File Viewer shows files from the Notes folder located on the server. 

At first, create an ASP.NET file Default.aspx. This will be our test page for the File Viewer.

Next, add two styles to Default.aspx:

.viewer-navigation
{ 
    font-family: Tahoma;
    font-size: 9pt;
    color: #000000;
    float: left; 
    min-width: 220px;
    max-width: 300px;
    padding: 0px;
}    

.viewer-contents
{ 
    font-size: 10pt;
    float: left;
    width: 660px; 
    padding: 0px;
}

The viewer-navigation class determines the look of the TreeView control in the left panel. The viewer-contents class describes the right panel where the file contents are displayed.

Now, add the HTML code:

<div>
    <div class="viewer-navigation">
        <asp:TreeView Id="FileViewerTree" 
            PathSeparator = "|"
            ExpandDepth="1"
            ImageSet="XPFileExplorer"
            OnTreeNodePopulate="FileViewerTree_PopulateNode" 
            OnSelectedNodeChanged="FileViewerTree_SelectedNodeChanged"
            NodeIndent="10"
            runat="server" >
        
            <SelectedNodeStyle BackColor="#B5B5B5" />
            <NodeStyle VerticalPadding="2" HorizontalPadding="2" />
            <HoverNodeStyle Font-Underline="True" ForeColor="#6666AA" />

            <Nodes>
                <asp:TreeNode Text="Notes" PopulateOnDemand="True" Value="Notes" />
            </Nodes>
        </asp:TreeView>  
    </div>
    <div class="viewer-contents">
        <pre id="ContentsArea" class="" runat="server" />
    </div>
</div>

As the last step add the following C# code to the Default.aspx.cs file:

public partial class Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            ContentsArea.Visible = false;
        }
    }

    protected void FileViewerTree_PopulateNode(Object source, TreeNodeEventArgs e)
    {
        TreeNode node = e.Node;

        if (e.Node.Value == "Notes")
        {
            e.Node.Value = Server.MapPath("~/Notes/");
        }

        String[] dirs = Directory.GetDirectories(node.Value);

        // Enumerate directories
        foreach (String dir in dirs)
        {
            TreeNode newNode = new TreeNode(Path.GetFileName(dir), dir);
            newNode.ToolTip = newNode.Text;

            if (Directory.GetFiles(dir).Length > 0 || Directory.GetDirectories(dir).Length > 0)
            {
                newNode.PopulateOnDemand = true;
            }

            node.ChildNodes.Add(newNode);
        }

        // Enumerate files
        String[] files = Directory.GetFiles(node.Value);

        foreach (String file in files)
        {
            TreeNode newNode = new TreeNode(Path.GetFileName(file), file);
            node.ChildNodes.Add(newNode);
        }
    }

    protected void FileViewerTree_SelectedNodeChanged(Object sender, EventArgs e)
    {
        string path = FileViewerTree.SelectedNode.Value;

        if (File.Exists(path))
        {
            // Read an entire file to a string.
            using (StreamReader sr = File.OpenText(path))
            {
                string str = sr.ReadToEnd();
                if (!String.IsNullOrEmpty(str))
                {
                    string ext = Path.GetExtension(path).ToLower();

                    // Set a SyntaxHighlighter style (optional).
                    SetStyle(ext);

                    // Replace the <,>,& characters.
                    ContentsArea.InnerHtml = str.Replace("<", "<").Replace(">", ">");
                    ContentsArea.Visible = true;
                }
                else
                {
                    ContentsArea.InnerHtml = "";
                    ContentsArea.Visible = false;
                }
            }
        }
    }

    // This code has an effect only if SyntaxHighlighter is included on the page.
    private void SetStyle(string ext)
    {
        ContentsArea.Attributes.Remove("class");
        switch (ext)
        {
            case ".cpp":
            case ".h":
                ContentsArea.Attributes.Add("class", "brush: cpp");
                break;
            case ".cs":
                ContentsArea.Attributes.Add("class", "brush: csharp");
                break;
            case ".resx":
            case ".xml":
            case ".xaml":
                ContentsArea.Attributes.Add("class", "brush: xml");
                break;
            default:
                ContentsArea.Attributes.Add("class", "brush: text");
                break;
        }
    }
}

Pay attention to the highlighted line in the above code. It points to a folder on the server (here it is ~/Notes/) that contains files we want to view.

Also, note that the SetStyle method has an effect only when the SyntaxHighlighter is included on the page.

That's all. The entire code in a Visual Studio project can be downloaded from here.