Peanut Gallery – ASP.NET 简易图片库

• 下载源代码 - 628 Kb

引言

本文介绍了如何构建一个简单的图片库类型 Web 应用程序。这并不是 Web 图片库的终极解决方案，但如果您想分享一些照片或创建一个展示少量图片目录的网站，这是一个非常简单的方法。事实上，它非常简单，整个过程完全在一个 Web 窗体的 Page_Load 事件中处理。

图 1：正在使用的图片库 Web 应用程序

入门

解压缩下载中包含的解决方案，并将其存储在您的文件系统中。保存解决方案后，使用 IIS 管理控制台创建一个指向该解决方案的虚拟目录。接下来，在 Visual Studio 2005 中打开该解决方案。在解决方案资源管理器中，您会看到以下内容：

图 2：显示图片库项目的解决方案资源管理器

可以看到，项目并没有多少内容。有一个名为 Default.aspx 的 Web 窗体，以及一个名为 (Images) 的附加文件夹，其中包含七个 JPG 图片文件。与此项目相关的所有操作都发生在 Default.aspx 页面的代码隐藏文件中。

顺便说一下，所有照片都是关于“艾舍伍德号”驱逐舰 (DD-520) 的，这是我父亲在第二次世界大战期间服役的军舰。“DD520_1.jpg”摄于 1945 年 4 月 16 日冲绳岛战役期间；六天后，“艾舍伍德号”遭到神风特攻队袭击，造成 80 名水兵（包括我的父亲）死亡或受伤。

Default.aspx 窗体布局

此示例的窗体布局非常简单，Web 窗体使用绝对定位，包含两个对象。一个是 Panel 控件 (pnlThumbs)，它设置为垂直滚动，并具有固定的宽度和高度（500 x 170px）。另一个控件是 Image 控件 (imgMain)，其高度和宽度属性未设置。当这些属性未设置时，每当将新图像加载到控件中时，宽度和高度将自动调整以显示图像而不产生任何失真。

代码：Default.aspx

正如宣传的那样，此项目中只有一个代码块需要查看，那就是 Page_Load 事件处理程序。在类开始时有一些导入操作，这些导入包括：

Imports System.IO
Imports System.Drawing
Imports System.Drawing.Bitmap
Imports System.Drawing.Drawing2D

这些导入是必需的，用于处理图像文件。现在，看一下 Page_Load 事件处理程序；那段代码如下：

Protected Sub Page_Load(ByVal sender As Object, _
          ByVal e As System.EventArgs) Handles Me.Load

    Me.Title = "USS Isherwood DD-520"

    'retrieve selected files of a folder
    Dim files() As String
    Dim i As Integer
    files = Directory.GetFiles(Server.MapPath("~\Images"), "*.jpg")

    If Page.IsPostBack Then
        Me.imgMain.ImageUrl = Request.QueryString("Img")
    End If

    Dim arrIbs(files.Length) As ImageButton
    For i = 0 To files.Length - 1
        Dim image As New Bitmap(files(i).ToString)
        arrIbs(i) = New ImageButton()
        arrIbs(i).ImageUrl = files(i).ToString()
        arrIbs(i).Width = 160
        arrIbs(i).Height = 100
        arrIbs(i).BorderStyle = BorderStyle.Inset
        arrIbs(i).BorderWidth = 2
        arrIbs(i).AlternateText = _
            System.IO.Path.GetFileName(files(i).ToString())
        arrIbs(i).PostBackUrl = "default.aspx?Img=" & _
                                files(i).ToString()
        Me.pnlThumbs.Controls.Add(arrIbs(i))
        Dim lbl As New Label
        lbl.Text = "<br/>"
        pnlThumbs.Controls.Add(lbl)
    Next

End Sub

处理程序的第一行只是设置页面的标题。

Me.Title = "USS Isherwood DD-520"

在此之后，下一段代码声明了一个 String 数组 (files)，用于存储 Images 文件夹中图像文件的路径。收集的文件仅限于 JPG 文件；当然，也可以包含其他文件类型。

'retrieve selected files of a folder
Dim files() As String
Dim i As Integer
files = Directory.GetFiles(Server.MapPath("~\Images"), "*.jpg")

在识别完文件后，事件处理程序会检查是否为回发（post back），如果页面是回发，则使用名为“Img”的查询字符串值来获取最后一个选定文件的路径，并通过设置控件的 ImageUrl 属性来指向最后一个选定图像文件的路径，从而设置窗体的主图像以显示该图像。

If Page.IsPostBack Then
    Me.imgMain.ImageUrl = Request.QueryString("Img")
End If

事件处理程序将通过创建图片库来完成。

Dim arrIbs(files.Length) As ImageButton
For i = 0 To files.Length - 1
    arrIbs(i) = New ImageButton()
    arrIbs(i).ImageUrl = files(i).ToString()
    arrIbs(i).Width = 160
    arrIbs(i).Height = 100
    arrIbs(i).BorderStyle = BorderStyle.Inset
    arrIbs(i).BorderWidth = 2
    arrIbs(i).AlternateText = System.IO.Path.GetFileName(files(i).ToString())
    arrIbs(i).PostBackUrl = "default.aspx?Img=" & files(i).ToString()
    Me.pnlThumbs.Controls.Add(arrIbs(i))
    Dim lbl As New Label
    lbl.Text = "<br/>"
    pnlThumbs.Controls.Add(lbl)
Next

要创建图库，处理程序会创建一个 ImageButton 控件数组，数组的大小设置为等于 files 数组中的文件数。接下来，代码将循环遍历文件数组，声明并捕获当前文件的图像，并在每次循环中实例化图像按钮数组中的图像控件，并将 ImageUrl 属性设置为指向当前图像文件。图像控件的高度和宽度被设置为使所有图像大小相同（根据您处理的图像，您可能希望将高度和宽度设置为其他值）。在此示例中，我将图像大小设置为 320 x 200 像素图像的一半。

设置图像 URL 后，图像将获得一个 2px 宽的内边框。当前图像按钮的 AlternateText 属性设置为显示文件名而不包含完整路径信息。接下来，设置 PostBackUrl 属性以调用当前页面并传递包含最后一个选定图像文件路径的查询字符串。然后将此控件添加到面板的控件集合中。

Label 控件被添加为小尺寸图像和面板之间的间隔，在声明和填充完它之后，它也被添加到 Panel 中。

就这样；当页面显示时，每当用户从图库中选择一个图像按钮时，页面会进行回发，并使用查询字符串值将选定的图像加载到主图像中。

摘要

本文的目的是介绍一种使用 Visual Basic 和 ASP.NET 2.0 快速创建图片库的方法。这种方法不打包图像也不使用缩略图，并且可以用很少的时间和精力来实现。