This article describes an All-In-One framework sample that is available for download. This code sample demonstrates how to create an Image Gallery application by using the DataList control in ASP.NET. You can get the sample package from the following download icons.
Difficulty level
Download information
To download this code sample, click one of the following links:
Technical overview
You may find the Image Gallery is widely used in many social networking sites, personal websites and E-Business websites. For example, you may use the Image Gallery to show a library of personal uploaded images on a personal website. Slideshow is also a popular tool to display images on websites. This code sample demonstrates how to use the DataList and ImageButton controls in ASP.NET to create an Image Gallery with image navigation. You can click on a thumbnail image in the Datalist control to display a larger version of the image on the page. This sample code reads the image paths from a certain directory into a FileInfo array. Then, the FileInfo array is used to populate a custom DataTable object which is bound to the Datalist control. This code sample also implements a custom paging system that allows five images to be displayed horizontally on one page. The following link buttons are used to implement a custom paging system:
- First
- Previous
- Next
- Last
Note We recommend that you use this method to load no more than five images at a time.
You can also set the SelectedIndex property for the DataList control to limit the number of the thumbnail images that can be selected. To indicate which image is selected, you can set the SelectedStyle property for the DataList control.
Sample Overview
This code sample contains the following three parts:
- An Image control for displaying large images when they are selected by a user.
- A DataList control for listing the thumbnail images for navigation.
- Four link buttons for implementing the navigation bar.
You can download sample code and follow these steps to create an Image Gallery:
- Create a C# ASP.NET web application that is named CSASPNETDataListImageGallery in Microsoft Visual Studio 2008.
- Drag a DataList control onto a page. Then, use the following code to set the RepeatColumns property to 5, and set the RepeatDirection property to Horizontal:
<asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" >
- Use the following code to set the template in the DataList control to bind to a URL field:
<ItemTemplate> <asp:ImageButton ID="IB_tn" runat="server" ImageUrl='<%# "/Image/" + Eval("Url") %>' Width="100px" Height="100px" OnClick="IB_tn_Click" CommandArgument='<%# Container.ItemIndex %>' /> </ItemTemplate> - Use the following code to add four buttons to the page navigation:
<asp:LinkButton ID="lbnFirstPage" Text="First" CommandName="first" OnCommand="Page_OnClick" runat="server" Width="125px" /> <asp:LinkButton ID="lbnPrevPage" Text="Prev" CommandName="prev" OnCommand="Page_OnClick" runat="server" Width="125px" /> <asp:LinkButton ID="lbnNextPage" Text="Next" CommandName="next" OnCommand="Page_OnClick" runat="server" Width="125px" /> <asp:LinkButton ID="lbnLastPage" Text="Last" CommandName="last" OnCommand="Page_OnClick" runat="server" Width="125px" />
- Open the Default.aspx.cs code file.
- Use the following code to import the System.Data and System.IO namespaces to the page:
using System.Data; using System.IO;
- Insert the following code to create two new properties, Page_Index and Page_Count:
//property for current page index public int Page_Index { get { return (int)ViewState["_Page_Index"]; } set { ViewState["_Page_Index"] = value; } } //property for total page count public int Page_Count { get { return (int)ViewState["_Page_Count"]; } set { ViewState["_Page_Count"] = value; } } - Insert the following code to get the number of the images:
//return total number of images protected int ImageCount() { DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/")); FileInfo[] fi = di.GetFiles(); return fi.GetLength(0); } - Insert the following code to bind the DataList control:
//return the data source for DataList protected DataTable BindGrid() { //get all image paths DirectoryInfo di = new DirectoryInfo(Server.MapPath("/Image/")); FileInfo[] fi = di.GetFiles(); //save all paths to the DataTable as the data source DataTable dt = new DataTable(); DataColumn dc = new DataColumn("Url", typeof(System.String)); dt.Columns.Add(dc); int lastindex = 0; if (Page_Count == 0 || Page_Index == Page_Count - 1) { lastindex = ImageCount(); } else { lastindex = Page_Index * PageSize + 5; } for (int i = Page_Index * PageSize; i < lastindex; i++) { DataRow dro = dt.NewRow(); dro[0] = fi[i].Name; dt.Rows.Add(dro); } return dt; } - Insert the following code to handle page button events:
//handle the navigation button event public void Page_OnClick(Object sender, CommandEventArgs e) { if (e.CommandName == "first") { Page_Index = 0; lbnFirstPage.Enabled = false; lbnPrevPage.Enabled = false; lbnNextPage.Enabled = true; lbnLastPage.Enabled = true; } else if (e.CommandName == "prev") { Page_Index -= 1; if (Page_Index == 0) { lbnFirstPage.Enabled = false; lbnPrevPage.Enabled = false; lbnNextPage.Enabled = true; lbnLastPage.Enabled = true; } else { lbnFirstPage.Enabled = true; lbnPrevPage.Enabled = true; lbnNextPage.Enabled = true; lbnLastPage.Enabled = true; } } else if (e.CommandName == "next") { Page_Index += 1; if (Page_Index == Page_Count - 1) { lbnFirstPage.Enabled = true; lbnPrevPage.Enabled = true; lbnNextPage.Enabled = false; lbnLastPage.Enabled = false; } else { lbnFirstPage.Enabled = true; lbnPrevPage.Enabled = true; lbnNextPage.Enabled = true; lbnLastPage.Enabled = true; } } else if (e.CommandName == "last") { Page_Index = Page_Count - 1; lbnFirstPage.Enabled = true; lbnPrevPage.Enabled = true; lbnNextPage.Enabled = false; lbnLastPage.Enabled = false; } DataList1.SelectedIndex = 0; DataList1.DataSource = BindGrid(); DataList1.DataBind(); Image1.ImageUrl = ((Image)DataList1.Items[0].FindControl("IB_tn")).ImageUrl; } - Insert the following code to handle image click events:
//handle the thumbnail image selecting event protected void IB_tn_Click(object sender, EventArgs e) { ImageButton ib = (ImageButton)sender; Image1.ImageUrl = ib.ImageUrl; DataList1.SelectedIndex = Convert.ToInt32(ib.CommandArgument); }
Technology category
- ASP.NET 2.0
- ASP.NET 3.5
- ASP.NET 4.0
Languages
This code sample is available in the following programming languages:
| Language | Project Name |
|---|---|
| Visual C# | CSASPNETDataListImageGallery |
| Visual Basic.NET | VBASPNETDataListImageGallery |
References
For more information about the DataList server control, visit the following Microsoft Developer (MSDN) website:
General information about the DataList server control
For more information about how to decide when to use the DataGrid, DataList and Repeater control, visit the following MSDN website:
How to decide when to use the DataGrid, DataList and Repeater control
For more information about the efficient data paging with the ASP.NET 2.0 DataList control and ObjectDataSource, visit the following websit: