控件代碼： 

    在我主持過的一個Asp.Net論壇上，一個用戶詢問如何在一個頁面上去通過hyperlink列出一個路徑下的很多文件名，能使用戶能點擊它們。我認為這是可能是經常執行的動作，所以決定建立一個服務器控件來封裝它。

    起初，我嘗試了Web用戶控件，但我想能允許設置邊框，字體，背景顏色等。使用Web用戶控件，我要為每一個屬性手動設置。俗話說：“你寫的代碼越少，你的錯誤越少了”，所以我要研究一個更好的方法。

    我決定創建自己首個自定義服務器控件。我試著去繼承一個label控件，但label控件不支持滾動條。 所以，我選擇繼承Panel控件。最終的控件具有Panel控件的所有屬性（顏色，邊框，滾動支持等），再加上一些我添加自定義屬性。使用Panel控件將會盡最小的努力。

第一部分：自定義服務器控件

初始化的服務器控制相對容易。下面是最終的代碼：

代碼

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Drawing.Design;
using System.IO;
using System.Text;
using System.Web;
using System.Web.Caching;
using System.Web.UI;
using System.Web.UI.WebControls;

[assembly: TagPrefix("EndWell", "EW")]
namespace EndWell
{
    [DefaultProperty("Text")]
    [ToolboxData("<{0}:HyperlinkFileList runat="server">")]
    [ToolboxBitmap("HyperlinkFileList.ico")]
    
    public class HyperlinkFileList : Panel
    {
         [Bindable(true)]
         [Category("Files List")]
         [Description("The Title of the list of files")]
         public string FilesTitle {get; set;}

         [Bindable(true)]
         [Category("Files List")]     
         [Description("The directory of the files to list:  (~/Files/)")]
         // these two built in editors were lacking:
         //[EditorAttribute(typeof(System.Web.UI.Design.UrlEditor), typeof(UITypeEditor))]
         //[EditorAttribute(typeof(System.Windows.Forms.Design.FolderNameEditor), typeof(UITypeEditor))]
        [EditorAttribute(typeof(EndWell.DualModeFolderEditor), typeof(UITypeEditor))]  
         public string FilesDirectory { get; set; }

         [Bindable(true)]
         [Category("Files List")]
         [Description("The filter for the files to show:  (*.*)")]
         public string FilesFilter { get; set; }

         [Bindable(true)]
         [Category("Files List")]
         [Description("Text to show when there are no files")]
         public string NoFilesText { get; set; }

         // ---- Private vars --------------------------

         private String[] m_FilesArray;  // cached for performance

         // ---- Default constants-------------------

         const String DEF_FILES_DIR = "~/xml/";
         const String DEF_FILES_FILT = "*.xml";
         const String DEF_FILES_TITLE = "XML Files:";
         const String DEF_NOFILES_TEXT = "";

         // ---- Constructor -------------------------- 

         public HyperlinkFileList()
        {
             // set defaults for our properties
            FilesDirectory = DEF_FILES_DIR;
             FilesFilter = DEF_FILES_FILT;
             FilesTitle = DEF_FILES_TITLE;
             NoFilesText = DEF_NOFILES_TEXT;

             // Set defaults for panel properties
             // I don't like the default width to be full screen
             // And a border looks better
            Width = new Unit("300px");
             BorderStyle = BorderStyle.Solid;
             BorderWidth = 1;
             BorderColor = Color.Black;

             // If height is set, force scroll bars to keep list
             // from spilling over the panel/div boundaries.
            if ((Height != null) && (ScrollBars == ScrollBars.None))
                 ScrollBars = ScrollBars.Auto;
           
             // Allow multiple controls to be placed horizontally
             // (normally each div get's its own line)           
            Style["display"] = "inline-block";

             // add spacing outside the control
            Style["margin"] = "0.5em";

             // add space inside the control           
            Style["padding-left"] = "0.5em";
             Style["padding-right"] = "0.5em";
             Style["padding-bottom"] = "0.5em";
             // top space usually comes from the title...
            if (String.IsNullOrEmpty(FilesTitle) == true)
                 Style["padding-top"] = "0.5em";
        }

         // ---- RenderContents ----------------------------
         //
         // Spit out the HTML
 
         protected override void RenderContents(HtmlTextWriter Output)
        {
             // output the title if one was set
            if (String.IsNullOrEmpty(FilesTitle) == false)
            {
                 Output.Write("<h3>  ");  // cosmetic spacing
                Output.Write(FilesTitle);
                 Output.Write("</h3>");
            }

            GetFilesArray();
  
             if (m_FilesArray.Length == 0)
            {
                Output.Write(HttpUtility.HtmlEncode(NoFilesText));              
            }
             else
            {
                 foreach (String OneFile in m_FilesArray)
                {
                     HyperLink Link = new HyperLink();
                     Link.NavigateUrl = Path.Combine(FilesDirectory, Path.GetFileName(OneFile));
                     Link.Text = Path.GetFileNameWithoutExtension(OneFile);                  
                    Link.RenderControl(Output);
                    Output.WriteBreak();
                }
            }
        }

         // ---- GetFilesArray -------------------------
         //
         // Fill the m_FilesArray with a list of files
         // either from disk or the cache

         private void GetFilesArray()
        {
             // see if the file list is in the cache.
             // use directory and filter as unique key
            m_FilesArray = Page.Cache[FilesDirectory + FilesFilter] as String[];

             if (m_FilesArray != null)
                 return;

             // if no files filter set, use the default one.
            if (String.IsNullOrEmpty(FilesFilter))
                 FilesFilter = DEF_FILES_FILT;

             // if no files directory set, use the default one.
            if (String.IsNullOrEmpty(FilesDirectory))
                 FilesDirectory = DEF_FILES_DIR;

             // if a virtual path is detected, map to full path
            String FullPath;
             if (FilesDirectory.StartsWith("~"))
                 FullPath = Context.Server.MapPath(FilesDirectory);
             else
                 FullPath = FilesDirectory;

             // get the files
            m_FilesArray = Directory.GetFiles(FullPath, FilesFilter, SearchOption.TopDirectoryOnly);
            
             // put the list in the cache so we don't have to read the disk again
             // use a dependency on the directory being read from for auto refreshing
            Page.Cache.Insert(FilesDirectory + FilesFilter,   // unique key
                              m_FilesArray,                   // list of files to store
                              new CacheDependency(FullPath)); // dependency on directory
           
        }
    }
}

 注意：

控件名字:

   去煩惱一個控件的名稱是非常愚蠢做法，真的是這樣嗎？錯誤的命名一個控件（或里任何變量）就像結婚。由于你將要與它走很長一段時間，在將來改變它可能會非常痛苦。所以首先要用好你的命名。

    我稱這個控件為: HyperlinkFileList.

溢出問題：

    如果控件的高度一旦設置，文件的列表超出了控件的高度。就會使文件“溢出”控件的邊界。

    為了解決這個問題，我說下面代碼到控件的構造函數之中：

CSS 布局:

    因為控件是基本是一個div（panel渲染成一個div），然后，設置"display"屬性為"inline-block"，允許多個控件被并排的一起。

CSS框模型：

    我不喜歡文本卡在控件的左側，所以我添加一些CSS來填充。我也在控件的周圍使用一些css樣式。使它不會與其它控件貼的很死。

狀態管理：

    在最初的測試的時候， 我發現每次控件都能運行，它都將重新讀取的文件目錄。文件輸入輸出代價是很昂貴的。我想去結合的服務器控件的“State”。但它使用的是View State 類型，兩次發送文件列表到客戶端是效率非常低的 。一次作為HTML列表，一次在ViewState 。

    所以我想使用 Session State, Application State 和Cache。

    我決定將文件列表放在一個緩存對象之中。使列表能在session之間共享。如果內存在溢出，緩存中的列表將會丟失。

    我將文件的目錄和文件filter連接在一起，作為緩存中索引鍵。這樣允許多個控件同時使用和共享文件列表。

    開始，我添加了使開發人員可以強制重新讀取需要的文件的功能。但是，緩存對象可以使用依賴關系：任何從屬目錄更改會導致緩存過期。最后的代碼是非常的簡單：

代碼

// put the list in the cache so we don't have to read the disk again
// use a dependency on the directory being read from for auto refreshing
Page.Cache.Insert(FilesDirectory + FilesFilter,   // unique key
                  m_FilesArray,                   // list of files to store
                  new CacheDependency(FullPath)); // dependency on directory

    側注：當然，這只是一個代碼行，但做了幾個小時的研究，以決定這是最好的方法去處理狀態的管理的問題。有時需要很長的時間編寫很少的代碼。

Property Editor:

    我將所有的自定義屬性分組到標題 "Files List"下面。他們都在一個地方與Panel的屬性分離開來。

下面是四個控件在一個頁面上的標簽

代碼

    <EW:HyperlinkFileList ID="HyperlinkFileList5"  runat="server" BackColor="#FFFF66"
         Height="200px">
    
    <EW:HyperlinkFileList ID="HyperlinkFileList6"  runat="server" FilesTitle="The Same XML Files"
         Height="200px">
    <br >
    <EW:HyperlinkFileList ID="HyperlinkFileList7"  runat="server" BackColor="#66FFFF"
         BorderColor="#FF3300" BorderWidth="3px" FilesDirectory="C:/Peachw/EndSofi/BAK/"
         FilesFilter="*.Zip" FilesTitle="Whole lotta files!" ForeColor="#3333CC" Width="293px"
         Height="156px">
    
    <EW:HyperlinkFileList ID="HyperlinkFileList8"  runat="server" BackColor="#66CCFF"
         Height="156px" Width="198px" FilesDirectory="~/Images/" FilesFilter="*.jpg" 
         FilesTitle="Pretty Pictures">
    

下面是他們渲染之后的樣子：

第二部分：自定義服務器控件編輯器

選擇文件目錄：

   我認為粘貼文件的目錄路徑是業余開發人員使用的法子，所以我決定添加一個目錄瀏覽器。  

  開發服務器控件編輯器所用時間比開發實際控件用的時間更長。

   我認為控件的文件的目錄，應在兩個方面可設置：

Absolute Path: C:\PublicData\ImageFiles\

Virtual Path: ~\xmlFiles\

    我試著設計兩個內置瀏覽來設置FilesDirectory屬性。

    我沒有使用UrlEditor，因為它不允許瀏覽外部站點的主目錄。

    我沒有使用FolderNameEditor，因為它沒有提供虛擬路徑的選擇。此外，它迫使用戶選擇一個我不想選擇文件。

要創建自定義服務器控件編輯器，就要創建一個類自UITypeEditor繼承和覆蓋兩個功能...其中一個啟動一個DialogBox。

下面是代碼：

代碼

using System;
using System.Collections.Generic;
using System.Drawing.Design;
using System.ComponentModel;
using System.Windows.Forms.Design;
using System.Text;

namespace EndWell
{
    class DualModeFolderEditor : UITypeEditor
    {
         // ---- GetEditStyle --------------------------------
         //
         // tell designer what kind of UI we are (Dropdown or Modal DialogBox)

         public override UITypeEditorEditStyle 
           GetEditStyle(ITypeDescriptorContext context)
        {
              return UITypeEditorEditStyle.Modal;
        }

         // ---- EditValue ----------------------------------------
         //
         // Called by IDE designer when user clicks the ... button
         // A DialogBox is launched

         public override object EditValue(ITypeDescriptorContext Context,
                                         IServiceProvider Provider,
                                          object Value)
        {           
             IWindowsFormsEditorService EditorService = null;
             if (Provider != null)
            {
                 EditorService = (IWindowsFormsEditorService)
                    Provider.GetService(typeof(IWindowsFormsEditorService));
            }
             if (EditorService != null)
            {
                 // launch the dialog box
                DuaModeFolderEditorForm Editor = 
                    new DuaModeFolderEditorForm(Value.ToString(), Context);
                
                EditorService.ShowDialog(Editor);
                 return Editor.m_Value;
            }
             else
            {
                  return Value;
            }
        }
    }
}

     以下是編輯的DialogBox，如下所示：

    我將不會顯示DialogBox代碼，因為這是它比較長，涉及廣。由于缺乏文檔，在開發過程中進行了反復的試錯。但也有一些利益的東西...

目錄分隔符（斜線）：

    反斜杠像 "\~"這樣被使用的時候，GetProjectItemFromUrl 函數將不能正常使用。它正斜杠："/~"能正常工作。因此，我確保所有的目錄分隔符使用正斜杠。但是，從目錄瀏覽器返回的目錄使用的是反斜杠。所以我們要確保一致性...雖然它使代碼有點凌亂，但真的沒有我更喜歡其他選擇。

服務器控件開發提示：

    一旦控件放置到頁面上，你能自動的更新bin文件路徑下面的DLL，通過右擊右擊控件，選擇“Refresh”。我不得不刪除從bin目錄下的控件，然后重新添加到網頁上，以獲取最新版本到該項目中。

調試編輯器：

    調試控件是非常容易的。調試控件的編輯器卻非常的難。因為它運行在Visual Studio中。我在不同的地方添加下面代碼：

System.Diagnostics.Debugger.Break();

當運行到斷點，你得到下面這個令人爽快的畫面：

點擊 "Debug the program"，將創建一個新的 Visual Studio 實例。你就能夠調試控件的編輯器了。原來的運行Visual Studio將鎖定的（至少在我這里是這樣的），你不得不去終止。由于欠缺自定義服務器控件編輯器的文檔，這是非常寶貴的去尋找和了解什么被傳遞了，發生了什么。

可能的改進：

?標題字體可設置（大小，顏色，背景顏色...）

?將名稱放在一個固定的div中，文件列表在另一可調整大小或有scrollable的div中。

?添加一個布爾字段來選擇顯示在鏈接的文件擴展名。

希望這篇文章能夠幫助你。

歡迎討論，謝謝！

參考原文：