一个"简单"的ASP.NET的服务器控件

控件代码： /Files/zhuqil/HyperlinkFileList.zip

在我主持过的一个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
==

)
{
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.

溢出问题：

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

为了解决这个问题，我将下面代码放到控件的构造函数之中：



if
((Height
!=

null
)
&&
(ScrollBars
==
ScrollBars.None))
ScrollBars
=
ScrollBars.Auto;

CSS 布局:

因为控件是基本是一个div（panel渲染成一个div），然后，设置"display"属性为"inline-block"，允许多个控件并排在一起。


Style[
"
display
"
]
=

"
inline-block
"
;

CSS框模型：

我不喜欢文本卡在控件的左侧，所以我添加一些CSS来填充。我也在控件的周围使用一些css样式。使它不会与其它控件贴的很死。

//
add spacing outside the control

Style[
"
margin
"
]
=

"
0.5em
"
;

//
add space inside the control

Style[
"
padding-left
"
]
=

"
0.5em
"
;

状态管理：

在最初的测试的时候， 我发现每次控件都能运行，它都将重新读取的文件目录。文件输入输出代价是很昂贵的。我想去结合的服务器控件的“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属性。


[EditorAttribute(typeof(System.Web.UI.Design.UrlEditor), typeof(UITypeEditor))]

我没有使用UrlEditor，因为它不允许浏览外部站点的主目录。


[EditorAttribute(typeof(System.Windows.Forms.Design.FolderNameEditor), typeof(UITypeEditor))]

我没有使用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中。

•添加一个布尔字段来选择显示在链接的文件扩展名。

希望这篇文章能够帮助你。

欢迎讨论，谢谢！

参考原文：http://www.codeproject.com/Articles/46264/A-Simple-ASP-NET-Custom-Server-Control.aspx

原文链接：
http://www.cnblogs.com/zhuqil/archive/2009/12/28/HyperlinkFileList.html