Asp.net| Create | The network in the digital age, we often take photos for souvenir, and as digital photos increase, it is often necessary to manage these photos well so as to better consult the souvenir. Now there are a lot of electronic albums online, can be very good to achieve these functions, then we can create their own albums it? Of course, in this article, we will use ASP.net to create a simple online album to collect our photos.
First let's look at the features of this album. In this album, we must first put the photos of the photo into a directory, after which you can use the online "last, next" link to a sheet of view.
Here's how to get a picture in a folder. We can use the DirectoryInfo class in the System.IO namespace to implement it. The path where the folder is located is passed as a parameter to the constructor of the class, and an instance of the DirectoryInfo class is declared. The DirectoryInfo class has a GetFiles () method that returns an array of FileInfo objects, and each instance of FileInfo contains specific information about the file under the specified path. The following code fragment illustrates the process:
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
Where the path to the current directory is obtained with Server.MapPath, and Dirinfo.getfiles () returns all the files in that directory. And because we are albums, just want to see such as jpg,bmp,gif image files, so we can implement the program, loading only these types of files, this through a custom process filterforimages to implement, the process will only return the specified folder image type of files. The code is as follows:
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
This procedure traverses the FileInfo parameter array passed in, betrays the suffix name of the file in the folder, and if it belongs to the image file, adds it to the Newimages array and returns in ArrayList form.
Next, we'll look at how to display each picture and show it as "last, next." To know how many pictures are currently being browsed, you can do this by using the method of passing parameters. First add an image control and text box to the form, with the following program code:
Sub Page_Load (sender as Object, E as EventArgs)
...
' Dim imgindex as Integer = 0
If not Request.QueryString ("N") are 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 Part Code
<asp:label runat= "Server" id= "Currentimgtitle"/><br/>
<asp:image runat= "Server" id= "currentimg"/>
In the above code, the variable imgindex is used to indicate the current browsing is the first few pictures, at the beginning of the n=0, you get the images array, the first variable, and then each time you read the variable value, you can know the current browsing is the first few pictures.
To achieve the "next, previous" feature, add two hyperlink link controls to the form, adding the following code
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 Part Code
<asp:hyperlink runat= "Server" id= "Lnkprev" text= "< Previous"/> |
<asp:hyperlink runat= "Server" id= "Lnknext" text= "Next >"/>
The above code is easier to understand, when the next one, the previous link, the value of the parameter n plus 1, or minus 1.
Finally, in order to achieve a more intuitive effect, we place a DataList control, which displays all the files under the Image folder, and each time a new picture is browsed, the name of the picture currently being browsed is highlighted in the form of a link with the following code:
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 Part Code
<asp:datalist runat= "Server" id= "Dlindex" onitemdatabound= "Dlindex_itemdatabound"
repeatcolumns= "3" >
<ItemTemplate>
<li><asp:hyperlink runat= "Server" id= "Lnkpic"/></li>
</ItemTemplate>
</asp:DataList>
In the above code, in the DataList Onitemdatabound event, first determine whether the currently triggered item is a list item ListItemType or an alternating item alternatingitem, and if so, dynamically generate a link HL, Sets the value of HL to the name of the file that is currently browsing the image. And note the size of the file, set its link to the address of the current browse image address, so that users can directly point to browse the picture, not to pass the previous one, the next link to achieve.
Finally, give an example of running (http://aspnet.4guysfromrolla.com/London/) and all the code:
<%@ 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") are 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>
