在上面的代码中,使用变量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> |
|