用ASP.NET创建网络相册

接下来，我们看下如何显示每一张图片，并以“上一张，下一张”来显示。为了知道当前浏览的是第几张图片，可以通过使用传递参数的方法来实现。先往窗体中添加一个image控件和文本框，程序代码如下：

Sub Page_Load(sender as Object, e as EventArgs) 　... 　' Dim imgIndex as Integer = 0 　If Not Request.QueryString("N") is Nothing AndAlso _ 　　IsNumeric(Request.QueryString("N")) then 　　　imgIndex = CInt(Request.QueryString("N")) 　End If 　 　currentImgTitle.Text = "You are Viewing: " & _ 　　Path.GetFileNameWithoutExtension(images(imgIndex).Name) & _ 　　" (" & imgIndex + 1 & " of " & images.Length & ")" 　　　currentImg.ImageUrl = Path.GetFileName(images(imgIndex).Name) 　　　 ... End Sub

　　HTML部分代码

＜asp:Label runat="server" id="currentImgTitle" /＞＜br /＞ ＜asp:Image runat="server" id="currentImg" /＞

　　在上面的代码中，使用变量imgindex来表示当前浏览的是第几张图片，刚开始时候N=0，则获得images数组中的第一个变量，也即第一张图片，之后每次读取该变量值，则可以知道当前浏览的是第几张图片。

　　而为了实现“下一张，上一张”的功能，往窗体增加两个Hyperlink链接控件，并添加以下代码

Sub Page_Load(sender as Object, e as EventArgs) ... If imgIndex ＞ 0 then 　lnkPrev.NavigateUrl = "Default.aspx?N=" & imgIndex - 1 End If If imgIndex ＜ images.Length - 1 then 　lnkNext.NavigateUrl = "Default.aspx?N=" & imgIndex + 1 End If ... End Sub

　　HTML 部分代码

＜asp:HyperLink runat="server" id="lnkPrev" Text="＜ Previous" /＞ | ＜asp:HyperLink runat="server" id="lnkNext" Text="Next ＞" /＞

　　上面代码比较容易理解，当点下一张，上一张的链接时，参数N的值加1，或者减1。

　　最后，为了实现比较直观的效果，我们放置一个datalist控件，其中显示图象文件夹下的所有文件，每当浏览一张新的图片时，则将当前正在浏览的图片的名称以链接的形式加亮显示，代码如下：

Sub Page_Load(sender as Object, e as EventArgs) 　... 　dlIndex.DataSource = images 　dlIndex.DataBind() End Sub Sub dlIndex_ItemDataBound(sender as Object, e as DataListItemEventArgs) 　If e.Item.ItemType = ListItemType.Item OrElse _ 　　e.Item.ItemType = ListItemType.AlternatingItem then 　　'Get the Hyperlink 　　　Dim hl as HyperLink = CType(e.Item.FindControl("lnkPic"), HyperLink) 　　'Set the Text and Navigation properties 　　hl.Text = Path.GetFileNameWithoutExtension(_ 　　　DataBinder.Eval(e.Item.DataItem, "Name").ToString()) & _ 　　　" (" & _ 　　　　Int(DataBinder.Eval(e.Item.DataItem, "Length") / 1000) & _ 　　　" KB)" 　　hl.NavigateUrl = "Default.aspx?N=" & e.Item.ItemIndex 　End If End Sub

　　HTML部分代码

＜asp:DataList runat="server" id="dlIndex" OnItemDataBound="dlIndex_ItemDataBound" RepeatColumns="3"＞ ＜ItemTemplate＞ ＜li＞＜asp:HyperLink runat="server" id="lnkPic" /＞＜/li＞ ＜/ItemTemplate＞ ＜/asp:DataList＞

　　在上面的代码中，在DATALIST的onitemdatabound事件中，首先判断当前触发的项目是否是列表项listitemtype或者是交替项AlternatingItem，如果是的话，则动态生成链接hl,设置hl的值为当前正在浏览图象的文件名，并且注明了文件的大小，设置其链接的地址为当前浏览图象的地址，这样，用户可以直接点要浏览的图片了，不一要通过上一张，下一张的链接来实现。

　　最后给出运行的一个例子（http://aspnet.4guysfromrolla.com/London/）和全部代码：

＜%@ Import Namespace="System.IO" %＞ ＜script runat="server" language="VB"＞ Sub Page_Load(sender as Object, e as EventArgs) 　Dim dirInfo as New DirectoryInfo(Server.MapPath("")) 　Dim images() as FileInfo = FilterForImages(dirInfo.GetFiles()) 　Dim imgIndex as Integer = 0 　If Not Request.QueryString("N") is Nothing AndAlso IsNumeric(Request.QueryString("N")) then 　　imgIndex = CInt(Request.QueryString("N")) 　End If 　currentImgTitle.Text = "You are Viewing: " & _ 　　Path.GetFileNameWithoutExtension(images(imgIndex).Name) & _ 　　" (" & imgIndex + 1 & " of " & images.Length & ")" 　　currentImg.ImageUrl = Path.GetFileName(images(imgIndex).Name) 　　If imgIndex ＞ 0 then 　　　lnkPrev.NavigateUrl = "Default.aspx?N=" & imgIndex - 1 　　End If 　　If imgIndex ＜ images.Length - 1 then 　　　lnkNext.NavigateUrl = "Default.aspx?N=" & imgIndex + 1 　　End If 　　dlIndex.DataSource = images 　　dlIndex.DataBind() End Sub Function FilterForImages(images() as FileInfo) as FileInfo() 　Dim newImages as New ArrayList(images.Length) 　Dim i as Integer 　For i = 0 to images.Length - 1 　　If Path.GetExtension(images(i).Name) = ".jpg" OrElse _ 　　　Path.GetExtension(images(i).Name) = ".jpeg" OrElse _ 　　　Path.GetExtension(images(i).Name) = ".png" OrElse _ 　　　Path.GetExtension(images(i).Name) = ".gif" then 　　　　newImages.Add(images(i)) 　　End If 　Next 　Return CType(newImages.ToArray(GetType(FileInfo)), FileInfo()) End Function Sub dlIndex_ItemDataBound(sender as Object, e as DataListItemEventArgs) 　If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = 　　ListItemType.AlternatingItem then 　　Dim hl as HyperLink = CType(e.Item.FindControl("lnkPic"), HyperLink) 　　hl.Text = Path.GetFileNameWithoutExtension(DataBinder.Eval(e.Item.DataItem, "Name").ToString()) & _ 　　" (" & Int(DataBinder.Eval(e.Item.DataItem, "Length") / 1000) & " KB)" 　　hl.NavigateUrl = "Default.aspx?N=" & e.Item.ItemIndex 　End If End Sub ＜/script＞ ＜HTML＞ ＜HEAD＞ 　＜STYLE TYPE="text/css"＞ 　　body { font-family:Verdana;font-size: medium;} 　　.ImageTitle { font-weight:bold; font-size:large;} 　　.index {font-size: small;} 　　.NavLink { background-color: yellow; font-weight: bold; } 　＜/STYLE＞ ＜/HEAD＞ ＜BODY＞ ＜center＞ ＜asp:Label runat="server" id="currentImgTitle" CssClass="ImageTitle" /＞＜br /＞ ＜asp:Image runat="server" id="currentImg" /＞ ＜asp:HyperLink runat="server" CssClass="NavLink" id="lnkPrev" Text="＜ Previous" /＞ | ＜asp:HyperLink runat="server" CssClass="NavLink" id="lnkNext" Text="Next ＞" /＞ ＜asp:DataList runat="server" id="dlIndex" OnItemDataBound="dlIndex_ItemDataBound" RepeatColumns="3" CssClass="index"＞ ＜ItemTemplate＞ ＜li＞＜asp:HyperLink runat="server" id="lnkPic" /＞＜/li＞ ＜/ItemTemplate＞ ＜/asp:DataList＞ ＜/center＞ ＜/BODY＞ ＜/HTML＞

查看本文来源