减小字体
增大字体- ·上一篇文章：HttpRequest获取网站信息的程序示例
- ·下一篇文章：ASP.NET中利用Crystal Report创建图表(4)
保存美丽记忆 用ASP.NET创建网络相册(1)
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>
做人要厚道，请注明转自chinazhan中国站长(www.ChinaZhan.com)。
<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>
做人要厚道，请注明转自chinazhan中国站长(www.ChinaZhan.com)。