實(shí)例開發(fā):ASP.NET創(chuàng)建網(wǎng)絡(luò)相冊_.Net教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

推薦：“黑盒測試管理”以外的編程經(jīng)驗(yàn)片斷
除了很好地進(jìn)行“黑盒測試管理”，個(gè)人覺得下述更值得用功；畢竟“前除后略”！ 1、架構(gòu)和算法的可行性測試分析：主要包括性能、并發(fā)等方面 2、CodeReview：很簡單，但

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

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

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

以下為引用的內(nèi)容：

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獲得當(dāng)前目錄的路徑，而dirinfo.getfiles()將會(huì)返回該目錄下的所有文件。而由于我們的是相冊，只需要看到比如JPG，BMP，GIF等圖象文件，所以我們可以通過程序?qū)崿F(xiàn)，只裝載這些類型的文件，這通過一個(gè)自定義的過程FilterForImages來實(shí)現(xiàn)，該過程將只返回指定文件夾中圖象類型的文件。代碼如下：

以下為引用的內(nèi)容：

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

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

接下來，我們看下如何顯示每一張圖片，并以“上一張，下一張”來顯示。為了知道當(dāng)前瀏覽的是第幾張圖片，可以通過使用傳遞參數(shù)的方法來實(shí)現(xiàn)。先往窗體中添加一個(gè)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來表示當(dāng)前瀏覽的是第幾張圖片，剛開始時(shí)候N=0，則獲得images數(shù)組中的第一個(gè)變量，也即第一張圖片，之后每次讀取該變量值，則可以知道當(dāng)前瀏覽的是第幾張圖片。

而為了實(shí)現(xiàn)“下一張，上一張”的功能，往窗體增加兩個(gè)HyPerlink鏈接控件，并添加以下代碼

以下為引用的內(nèi)容：

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 部分代碼

以下為引用的內(nèi)容：

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

上面代碼比較容易理解，當(dāng)點(diǎn)下一張，上一張的鏈接時(shí)，參數(shù)N的值加1，或者減1。

最后，為了實(shí)現(xiàn)比較直觀的效果，我們放置一個(gè)datalist控件，其中顯示圖象文件夾下的所有文件，每當(dāng)瀏覽一張新的圖片時(shí)，則將當(dāng)前正在瀏覽的圖片的名稱以鏈接的形式加亮顯示，代碼如下：

以下為引用的內(nèi)容：

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部分代碼

以下為引用的內(nèi)容：

＜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事件中，首先判斷當(dāng)前觸發(fā)的項(xiàng)目是否是列表項(xiàng)listitemtype或者是交替項(xiàng)AlternatingItem，如果是的話，則動(dòng)態(tài)生成鏈接hl,設(shè)置hl的值為當(dāng)前正在瀏覽圖象的文件名，并且注明了文件的大小，設(shè)置其鏈接的地址為當(dāng)前瀏覽圖象的地址，這樣，用戶可以直接點(diǎn)要瀏覽的圖片了，不一要通過上一張，下一張的鏈接來實(shí)現(xiàn)。

最后給出運(yùn)行的一個(gè)例子和全部代碼：

以下為引用的內(nèi)容：

＜%@ 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＞
�。糞TYLE 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＞

分享：Asp.Net2.0技巧(續(xù))
1. 在開發(fā)web控件時(shí)，如果控件必須放在服務(wù)器端的form內(nèi)，可以通過Page.VerifyRenderingInServerForm(Control) 方法來保證。 2. 使用Control類的ResolveClientUrl（string）方法可以將類似&