用ASP.NET創(chuàng)建網絡相冊

在現在的數碼時代，我們會經常拍攝一些相片以供留念，而隨著數碼照片的增多，往往需要很好地管理這些照片，以便更好地查閱留念。現在網上有不少的電子相冊，都能很好的實現這些功能，那我們能否自己動手創(chuàng)建自己的相冊呢？當然可以，在這篇文章中，我們將利用asp.net，來創(chuàng)建一個簡單的在線相冊，以收藏我們的照片。

　首先來看下，這個相冊有哪些功能。在這個相冊中，我們必須先把預先攝影好的照片放到一個目錄下去，之后，可以供在網上使用“上一張，下一張”的鏈接一張張地查看。

　　下面先介紹如何獲得文件夾中的圖片。我們可以使用System.IO命名空間中的DirectoryInfo類來實現。將文件夾所在的路徑做為參數傳遞到該類的構造函數中，并聲明一個DirectoryInfo類的實例。DirectoryInfo類中有一個GetFiles()的方法，會返回FileInfo的對象數組，而每一個FileInfo的實例將包含指定路徑下文件的具體信息。下面的代碼片段說明了該過程：

Sub Page_Load(sender as Object, e as EventArgs) 　'Get list of images 　Dim dirInfo as New DirectoryInfo(Server.MapPath("")) 　Dim images() as FileInfo = FilterForImages(dirInfo.GetFiles()) 　... End Sub

　　其中，用Server.mappath獲得當前目錄的路徑，而dirinfo.getfiles()將會返回該目錄下的所有文件。而由于我們的是相冊，只需要看到比如JPG，BMP，GIF等圖象文件，所以我們可以通過程序實現，只裝載這些類型的文件，這通過一個自定義的過程FilterForImages來實現，該過程將只返回指定文件夾中圖象類型的文件。代碼如下：

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

　　該過程對于傳遞進來的FileInfo參數數組進行遍歷，對文件夾中的文件的后綴名進行叛斷，如果屬于圖象文件，則添加到newimages數組中去，并以arraylist形式返回。

　　接下來，我們看下如何顯示每一張圖片，并以“上一張，下一張”來顯示。為了知道當前瀏覽的是第幾張圖片，可以通過使用傳遞參數的方法來實現。先往窗體中添加一個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事件中，首先判斷當前觸發(fā)的項目是否是列表項listitemtype或者是交替項AlternatingItem，如果是的話，則動態(tài)生成鏈接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＞

轉載于:https://www.cnblogs.com/luyongqun/archive/2007/02/05/641355.html

總結

以上是生活随笔為你收集整理的转：用ASP.NET创建网络相册的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。