ASP.NET 用户控件：文件浏览器

Henryk Filipowicz

5.00/5 (11投票s)

2011年12月16日

CPOL

2分钟阅读

105413

4250

一个用于从文件系统中选择文件的 Web 用户控件。

下载源代码 - 1.12 MB

引言

在一些 Web 项目中，我需要实现一个包含**远程**文件选择操作的配置用户界面——一个存储在远程仓库中的文件。最初，我做了一个简单的 ASPX 页面，但很快我就需要在另一个 ASPX 页面中使用它，并且发现用户控件是更好的解决方案。此外，这也是开发一个有趣的 Web 自定义控件并在应用程序中应用它的一个好机会。

背景

用户控件是一种简单的自定义控件。它们可以像创建 ASP.NET Web 页面一样简单地创建，使用 Visual Studio 工具箱进行设计，并使用代码隐藏文件定义控件的属性和方法。然后可以将它们包含在您的 ASP.NET Web 页面中，仅使用公共成员进行输入/输出操作。所有内部操作都封装在控件中，并且从外部不可见。您无法破坏——在某些情况下——您花费数小时辛苦工作设计的非常复杂的布局。您可以定义其他属性，例如更改控件的背景或前景色属性。

使用代码

该用户控件被设计成类似资源管理器的文件浏览器，允许设置访问凭据、起始（根）目录，并最终选择用于任何自定义操作的文件。它主要由一个用于浏览目录的 TreeView 控件和一个用于浏览文件的 ListView 控件组成。用户控件的布局由一个 CSS 文件确定。

自定义控件的设计

<%@ 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>

在代码隐藏文件中定义的 FileBrowser 控件的公共属性

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; }
}

属性值保存在 ViewState 变量中。

使用控件

您可以使用 Register 指令在您的 Web 页面中简单地引用该控件

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

最后将其嵌入到您的 Web 页面中

<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>

我在这里使用了来自 AJAX Control Toolkit 的两个 UpdatePanel 控件，以获得更好的文件浏览器控件的触感。您可以删除它，或将其替换为另一个基于 JavaScript 的框架。

输入属性的初始值最好在 web.config 文件中设置

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

您必须用有效的用户凭据替换占位符。用户必须具有对目标文件系统的读取访问权限。

要在您的 Web 页面中使用该控件，您必须在 Page_Load 事件处理程序中设置初始属性，并在您的代码隐藏文件中实现 SelectedFileChanged 事件处理程序

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;
}

好了，就这样了。

历史

2011-12-16：初始发布。