Click here to Skip to main content
15,867,704 members
Articles / Web Development / ASP.NET

ASP.NET User Control: File Browser

Rate me:
Please Sign up or sign in to vote.
5.00/5 (11 votes)
16 Dec 2011CPOL2 min read 99.1K   4.2K   31   16
A web user control for selecting a file from the file system.

Introduction

In some web projects I had to implement a configuration user interface containing a remote file selecting action - a file stored on a remote repository. For the first time, I did a simple ASPX page, but soon after I needed it in another ASPX page and I found a the user control would be a better solution. Furthermore it was a good opportunity to develop an interesting web custom control and apply it in an application.

Image 1

Background

User controls are an easy kind of custom controls. They can be created as simply as creating an ASP.NET web page, using the Visual Studio Toolbox for designing and the code behind for defining properties and methods for the control. They can be then included in your ASP.NET web pages, using only the public members for input/output operations. All internal actions are encapsulated in the control and are not visible from the outside. You can't damage the - in some cases - very complex layout, which you designed with several hours of troublesome work. You can define other properties, e.g., to change the background or the forecolor properties of the control.

Using the code

The user control has been designed as an Explorer-like file browser, allowing the setting of access credentials, the start (root) directory, and finally selecting a file for any custom action. It consists, for the most part, a TreeView control for browsing directories and a ListView control for browsing files. The layout of the user control is determined by a CSS file.

The design of the custom control:

ASP.NET
<%@ Control Language="C#" AutoEventWireup="true" 
          CodeFile="FileBrowser.ascx.cs" Inherits="FileBrowser" %>

<link href="../Stylesheets/FileBrowser.css" rel="stylesheet" type="text/css" />
<div id="browserContent" >
  <table id="tableMainContent" runat="server" 
          class="mainContent" cellspacing="2" cellpadding="2">
    <tr style="text-align: left; vertical-align: top;">
      <td class="folderColumn">
        <div id="folderList" runat="server" class="folderPanel">
          <table id="tableFolders" style="width:230px; " 
                  cellspacing="0" cellpadding="0" runat="server">
            <tr id="trHeader" class="fileListHeader" runat="server">
              <td id="tdFolderHeader1" class="folderListHeaderCell1" runat="server">
                <asp:LinkButton ID="Button_Parent" runat="server" 
                      OnClick="Button_Parent_Click" Text="[..]" />
              </td>
              <td id="tdFolderHeader2" class="folderListHeaderCell2" runat="server">
              </td>
            </tr>
          </table>
          <asp:Panel ID="Panel_FolderList" runat="server" 
                           Height="284px" ScrollBars="Auto">
            <asp:ListView ID="ListView_Folders" runat="server" 
                    OnSelectedIndexChanging="ListView_Folders_SelectedIndexChanging"
                    ConvertEmptyStringToNull="False" EnableModelValidation="True">
              <LayoutTemplate>
                <table id="tblFolders" runat="server" class="folderList" 
                            cellspacing="0" cellpadding="0">
                  <tr runat="server" id="itemPlaceholder" />
                </table>
              </LayoutTemplate>
              <ItemTemplate>
                <tr id="Tr1" class="rowUnselected" runat="server">
                  <td>
                    <asp:LinkButton ID="Button_Name" runat="server" 
                           CommandName="Select" ToolTip='<%#Eval("FullName") %>'
                           Text='<%#Eval("Name") %>' />
                  </td>
                </tr>
              </ItemTemplate>
              <SelectedItemTemplate>
                <tr id="Tr2" class="rowSelected" runat="server">
                  <td>
                    <asp:LinkButton ID="Button_Name" runat="server" 
                        CommandName="Select" ToolTip='<%#Eval("FullName") %>'
                        Text='<%#Eval("Name") %>' />
                  </td>
                </tr>
              </SelectedItemTemplate>
              <EmptyItemTemplate>
                <td>
                  <asp:LinkButton ID="Button_Parent" runat="server" 
                     OnClick="Button_Parent_Click" Text="[..]" />
                </td>
              </EmptyItemTemplate>
            </asp:ListView>
          </asp:Panel>
        </div>
      </td>
      <td class="filesColumn">
        <div id="fileList" runat="server" class="filesPanel">
        <table id="Table_Attr" cellspacing="0" cellpadding="0" runat="server">
          <tr id="Tr2" class="fileListHeader" runat="server">
            <td id="tdFilesHeader1" runat="server" class="fileListHeaderCell1">
              <asp:Label ID="Label_Name" runat="server" Text="Name" />
            </td>
            <td id="tdFilesHeader2" class="fileListHeaderCell2" runat="server">
              <asp:Label ID="Label_Size" runat="server" Text="Size" />
            </td>
            <td id="tdFilesHeader3" class="fileListHeaderCell3" runat="server">
              <asp:Label ID="Label_LastWriteTimeUtc" runat="server" Text="LastChanged" />
            </td>
          </tr>
        </table>
        <asp:Panel ID="Panel_FileList" runat="server" Height="284px" ScrollBars="Auto">
          <asp:ListView ID="ListView_Files" runat="server" 
               OnSelectedIndexChanging="ListView_Files_SelectedIndexChanging"
               ConvertEmptyStringToNull="False" EnableModelValidation="True">
            <LayoutTemplate>
              <table class="folderList" cellspacing="0" 
                     cellpadding="0" runat="server" id="tblFiles">
                <tr runat="server" id="itemPlaceholder" />
              </table>
            </LayoutTemplate>
            <ItemTemplate>
              <tr id="Tr1" class="fileUnselected" runat="server">
                <td style="width: 342px;">
                  <asp:LinkButton ID="Button_Name" runat="server" ToolTip='<%#Eval("FullName") %>'
                    CommandName="Select" Text='<%#Eval("Name") %>' />
                </td>
                <td style="width: 80px;">
                  <asp:Label ID="Label_Size" runat="server" Text='<%#Eval("Length") %>' />
                </td>
                <td style="width: 130px;">
                  <asp:Label ID="Label_LastWriteTimeUtc" runat="server" 
                              Text='<%#Eval("LastWriteTimeUtc") %>' />
                </td>
              </tr>
            </ItemTemplate>
            <SelectedItemTemplate>
              <tr id="Tr2" class="fileSelected" runat="server">
                <td style="width: 342px;">
                  <asp:LinkButton ID="Button_Name" runat="server" ToolTip='<%#Eval("FullName") %>'
                    CommandName="Select" Text='<%#Eval("Name") %>' />
                </td>
                <td style="width: 80px;">
                  <asp:Label ID="Label_Size" runat="server" Text='<%#Eval("Length") %>' />
                </td>
                <td style="width: 130px;">
                  <asp:Label ID="Label_LastWriteTimeUtc" runat="server" 
                           Text='<%#Eval("LastWriteTimeUtc") %>' />
                </td>
              </tr>
            </SelectedItemTemplate>
            <EmptyItemTemplate>
              <td id="Td1" runat="server">
              </td>
            </EmptyItemTemplate>
          </asp:ListView>
        </asp:Panel>
        </div>
      </td>
    </tr>
  </table>
</div>

The public properties of the FileBrowser control defined in the code-behind file:

C#
public string UserName
{
  get { return ViewState["UserName"].ToString(); }
  set { ViewState["UserName"] = value; }
}
public string UserDomain
{
  get { return ViewState["UserDomain"].ToString(); }
  set { ViewState["UserDomain"] = value; }
}
public string UserPassword
{
  get { return ViewState["UserPassword"].ToString(); }
  set { ViewState["UserPassword"] = value; }
}
public FileInfo SelectedFile
{
  get { return (FileInfo)ViewState["SelectedFile"]; }
  private set { ViewState["SelectedFile"] = value; }
}
public string CurrentFolder
{
  get { return ViewState["CurrentFolder"].ToString(); }
  set { ViewState["CurrentFolder"] = value; }
}
public string RootFolder
{
  get { return ViewState["RootFolder"].ToString(); }
  set { ViewState["RootFolder"] = value; }
}

The property values are saved in ViewState variables.

Using the control

The control can be simply referenced in your web page using the Register directive:

ASP.NET
<%@ Register TagPrefix="fb" TagName="FileBrowser" Src="~/UserControls/FileBrowser.ascx" %>

and finally embedded into your web page:

ASP.NET
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Stylesheets/FileBrowser.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server" style="width: 800px;">
    <asp:ToolkitScriptManager ID="ScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
          <div>
            <fb:FileBrowser ID="FileBrowser1" runat="server" 
                    OnSelectedFileChanged="FileBrowser1_SelectedFileChanged" />
          </div>
          </ContentTemplate>
      </asp:UpdatePanel>
      <div>      
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
          <Triggers>
            <asp:AsyncPostBackTrigger ControlID="FileBrowser1" EventName="SelectedFileChanged" />
          </Triggers>
          <ContentTemplate>
            <div style="height: 100px;vertical-align:middle;">
              Selected file: <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
            </div>
          </ContentTemplate>
        </asp:UpdatePanel>
      </div>
    </form>
</body>
</html>

I've used here two UpdatePanel controls from the AJAX Control Toolkit for better touch-and-feel of the file browser control. You can remove it, or replace it with another JavaScript based framework.

The initial values of the input properties are set preferably in the web.config file:

XML
<appSettings>
    <add key="FileBrowserUserName" value="IOuser"/>
    <add key="FileBrowserUserDomain" value="IOdomain"/>
    <add key="FileBrowserUserPwd" value="IOpassword"/>
    <add key="FileBrowserInitialPath" value="C:\"/>
</appSettings>

You have to certainly replace the placeholders with valid user credentials. The user must have read access for the target file system.

For using the control in your web page, you have to set the initial properties in the Page_Load event handler and implement the SelectedFileChanged event handler in your code-behind file:

C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
      FileBrowser1.UserName = 
        WebConfigurationManager.AppSettings["FileBrowserUserName"];
      FileBrowser1.UserDomain = 
        WebConfigurationManager.AppSettings["FileBrowserUserDomain"];
      FileBrowser1.UserPassword = 
        WebConfigurationManager.AppSettings["FileBrowserUserPwd"];
      FileBrowser1.CurrentFolder = 
        WebConfigurationManager.AppSettings["FileBrowserInitialPath"];
      FileBrowser1.RootFolder = FileBrowser1.CurrentFolder;
      FileBrowser1.Refresh();
    }
}

protected void FileBrowser1_SelectedFileChanged(object sender, EventArgs e)
{
    Label1.Text = FileBrowser1.SelectedFile.FullName;
}

And voilà, that's all folks.

History

  • 2011-12-16: Initial release.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer Lanxess GmbH
Germany Germany
MCTS .NET Framework 2.0 Web Applications
MCTS .NET Framework 2.0 Windows Applications
MCTS .NET Framework 2.0 Distributed Applications
MCTS Windows 7, Configuration
MCITP Enterprise Desktop Administrator on Windows 7

Comments and Discussions

 
Questiondesigner file Pin
Member 1474481714-Feb-20 4:38
Member 1474481714-Feb-20 4:38 
QuestionWhat is the purpose of this control in current ERA?? Pin
VICK9-Dec-14 21:06
professional VICK9-Dec-14 21:06 
AnswerRe: What is the purpose of this control in current ERA?? Pin
Henryk Filipowicz11-Dec-14 1:13
Henryk Filipowicz11-Dec-14 1:13 
GeneralRe: What is the purpose of this control in current ERA?? Pin
VICK11-Dec-14 1:41
professional VICK11-Dec-14 1:41 
QuestionI like this but is there a VB version??? Pin
Member 1034065117-Dec-13 3:12
Member 1034065117-Dec-13 3:12 
AnswerRe: I like this but is there a VB version??? Pin
Henryk Filipowicz11-Dec-14 1:17
Henryk Filipowicz11-Dec-14 1:17 
Questionproblem with downloading a file Pin
Manik Lochan14-Jan-13 3:35
Manik Lochan14-Jan-13 3:35 
AnswerRe: problem with downloading a file Pin
Henryk Filipowicz11-Dec-14 1:25
Henryk Filipowicz11-Dec-14 1:25 
Questiondownload file Pin
Manik Lochan14-Jan-13 3:33
Manik Lochan14-Jan-13 3:33 
QuestionHow to restrict directory browsing Pin
Master Still Rulz27-Nov-12 19:18
Master Still Rulz27-Nov-12 19:18 
AnswerRe: How to restrict directory browsing Pin
VICK9-Dec-14 21:09
professional VICK9-Dec-14 21:09 
Questiondownload file Pin
Manik Lochan25-Oct-12 5:19
Manik Lochan25-Oct-12 5:19 
AnswerRe: download file Pin
Master Still Rulz27-Nov-12 19:21
Master Still Rulz27-Nov-12 19:21 
QuestionOpen files Pin
bradut17-Oct-12 19:26
professionalbradut17-Oct-12 19:26 
AnswerRe: Open files Pin
Henryk Filipowicz11-Dec-14 1:21
Henryk Filipowicz11-Dec-14 1:21 
QuestionExcelent.... Pin
raytwo1-Feb-12 1:28
raytwo1-Feb-12 1:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.