Instance development: ASP. NET creates a network album

In the current digital age, we often take some photos for reference. With the increase of digital photos, we often need to manage these photos to better view them. Now there are many electronic albums on the Internet, which can be well implemented. Can we create our own albums by ourselves? Of course. In this article Article We will use Asp.net to create a simple online album to add our photos to favorites.
First, let's take a look at the functions of this album. In this album, we must first put the photos taken in advance into a directory, and then we can use the "previous, next" link on the Internet to view them one by one.

The following describes how to obtain images in a folder. We can use the directoryinfo class in the system. Io namespace. Pass the path of the folder as a parameter to the constructor of the class and declare an instance of the directoryinfo class. The directoryinfo class has a getfiles () method, which returns an array of fileinfo objects. Each fileinfo instance contains the file details in the specified path. The followingCodeThe snippet 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

Use server. mappath to obtain the path of the current directory, and dirinfo. getfiles () will return all files in this directory. Because we only need to see JPG, BMP, GIF, and other image files, we canProgramTo load only these types of files, this is achieved through a custom process filterforimages. This process will only return images in the specified folder. The Code is as follows:

Function filterforimages (images () 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

In this process, the passed fileinfo parameter array is traversed to break the suffix of the file in the folder. If it belongs to an image file, it is added to the newimages array, and return in the form of arraylist.
Next, let's take a look at how to display each image and display it with "previous and next. To know which images are currently browsed, you can use the method of passing parameters. First, add an image control and text box to the form. The program code is as follows:

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 code

<Asp: Label runat = "server" id = "currentimgtitle"/> <br/> <Asp: Image runat = "server" id = "currentimg"/>

In the above Code, the imgindex variable is used to indicate the number of images currently browsed. At the beginning, n = 0, the first variable in the images array is obtained, that is, the first image. Each time you read the variable value, you can know which image you are browsing.

To implement the "next and last" function, add two hyperlink links to the form and add 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 code

<Asp: hyperlink runat = "server" id = "lnkprev" text = "<previous"/> | <Asp: hyperlink runat = "server" id = "lnknext" text = "next>"/>

The above code is easy to understand. When you click the next link or the previous link, the value of parameter n is increased by 1 or minus 1.

Finally, in order to achieve a more intuitive effect, we place a datalist control, which displays all the files in the image folder. Whenever you browse a new image, the name of the currently browsed image is highlighted as a link. The Code is as follows:

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 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 onitemdatabound event of datalist, first judge whether the currently triggered Project is a list item listitemtype or an alternate item alternatingitem. If yes, the link HL, set the HL value to the file name of the currently browsed image, specify the file size, and set the link address to the address of the current browsed image. In this way, you can click the image you want to browse directly, instead of using the previous and next links.

Finally, an example and all the code are provided:

<% @ 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 () 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> |< br> repeatcolumns = "3" cssclass = "Index">