Use the ASP.net GridView control to display images by PAGE, and record the files in the given folder to the GridView control.

Last Update:2018-12-05 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

When you create a photo album, you often need to distribute and display images because there are many images. There are many ways to use the ASP.net paging display. I like to use the GridView control, because the GridView control itself has a powerful paging function and does not require much programming. It is very convenient to use, the following are custom controls used to organize image libraries on this website. They are posted for your reference. The method is as follows:

(1) set the page in the GridView control, which mainly includes the following settings:

AutoGenerateColumns = "False" when running, columns are not automatically generated by the data source;

AllowPaging = "True" Enables automatic distribution;

PageSize = "2": two rows are displayed on each page. Here, two images are displayed on each page;

PagerSettings FirstPageText = "Page 1"

LastPageText = "last page"

Mode = "nextpreviusfirstlast" display Mode, custom

NextPageText = "next page"

Position = "TopAndBottom" is displayed on the upper and lower pages of the control;

PreviousPageText = "Previous Page"

Onpageindexchanging = "GridView1_PageIndexChanging" is triggered when the previous page or the next page is selected

(2) Add a TemplateField template to the GridView control and add "ima" to the TemplateField template to display the image.

(3) The default character array in the background is used to store files in a given folder.

(4) use the foreach loop to assign the file directory and image file name to the data source and bind it to the GridView control.

(5) Tell the GridView1_PageIndexChanging event what to do.

The following is the foreground source code:

<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "Default4.aspx. cs" Inherits = "Default4" %>

<〈! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> No title page </title>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Label for = "pagebody1" style = "display: none"> </label>
<Fieldset id = "container">
<Legend> show images by page </legend>
<Div style = "list-style: none;">
<Ul style = "width: 808px; margin: 0px">
<Li style = "margin-left: 10px">
<Asp: GridView ID = "GridView1" runat = "server" AutoGenerateColumns = "False"
AllowPaging = "True" PageSize = "2" Width = "800px" CellPadding = "3"
CellSpacing = "1" GridLines = "None" onpageindexchanging = "GridView1_PageIndexChanging">
<PagerSettings FirstPageText = "first page" LastPageText = "last page" Mode = "nextpreviusfirstlast"
NextPageText = "next page" Position = "TopAndBottom" PreviousPageText = "Previous Page"/>
<Columns>
<Asp: TemplateField HeaderText = "stand on the tall buildings network Gallery">
<ItemTemplate>
'/>
</ItemTemplate>
</Asp: TemplateField>
</Columns>
</Asp: GridView>
</Li>
</Ul>
</Div>
</Fieldset>
</Form>
</Body>
</Html>
Background source code:

Using System;
Using System. Collections;
Using System. Configuration;
Using System. Data;
Using System. Linq;
Using System. Web;
Using System. Web. Security;
Using System. Web. UI;
Using System. Web. UI. HtmlControls;
Using System. Web. UI. WebControls;
Using System. Web. UI. WebControls. WebParts;
Using System. Xml. Linq;
Using System. IO;
Using System. Net;
Using System. Text. RegularExpressions;

Public partial class Default4: System. Web. UI. Page
{
Protected void Page_Load (object sender, EventArgs e)
{
If (! Page. IsPostBack)
{
This. BindToGridView (); // call the BindToGridView () binding above
}
}
Protected void BindToGridView ()
{
// Obtain the file name
// String [] files = Directory. GetFiles (Server. MapPath (imagepath ));
String [] files = Directory. GetFiles (Server. MapPath ("images /"));
// Create a data table
DataTable dt = new DataTable ();
// Dt. Columns. Add ("filename ");
// Dt. Columns. Add ("size ");
Dt. Columns. Add ("filePath ");
Foreach (string s in files)
{
DataRow dr = dt. NewRow ();
FileInfo f = new FileInfo (s );
// Dr ["filename"] = f. Name;
// Dr ["size"] = f. Length;
// Dr ["filePath"] = imagepath + "/" + f. Name;
Dr ["filePath"] = "/images/" + f. Name;
Dt. Rows. Add (dr );
}
// Bind to display
This. GridView1.DataSource = dt;
This. GridView1.DataBind ();
}

Protected void GridView1_PageIndexChanging (object sender, GridViewPageEventArgs e)
{
This. GridView1.PageIndex = e. NewPageIndex;
This. BindToGridView (); // call the BindToGridView () binding above
}
}

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More