How to use the DataList control to create an Image Gallery

Article translations Article translations
Article ID: 2512242 - View products that this article applies to.
Expand all | Collapse all

On This Page

INTRODUCTION

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

Collapse this imageExpand this image
codefx Medium

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:
  1. Create a C# ASP.NET web application that is named CSASPNETDataListImageGallery in Microsoft Visual Studio 2008.
  2. 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" >
  3. 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>
  4. 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" />
  5. Open the Default.aspx.cs code file.
  6. Use the following code to import the System.Data and System.IO namespaces to the page:
    using System.Data;
    using System.IO;
  7. 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; }
    }
  8. 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);
    }
  9. 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;
            }
  10. 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;
            }
  11. 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:

Collapse this tableExpand this table
LanguageProject Name
Visual C#CSASPNETDataListImageGallery
Visual Basic.NETVBASPNETDataListImageGallery

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:

More information

What is All-In-One Code Framework?

All-In-One Code Framework shows most Microsoft development techniques by using code samples in different programming languages. Each example is carefully selected, composed, and documented to show one common code scenario. For more information about All-In-One Code Framework, visit the following Microsoft website:
http://1code.codeplex.com

How to find more All-In-One Code Framework samples

To find more All-In-One Code Framework samples, search for "kbcodefx" together with related keywords on the Microsoft support Web site. Or, visit the following Microsoft website:
All-In-One Code Framework samples
Rapid publishing disclaimer
Microsoft corporation and/or its respective suppliers make no representations about the suitability, reliability, or accuracy of the information and related graphics contained herein. All such information and related graphics are provided "as is" without warranty of any kind. Microsoft and/or its respective suppliers hereby disclaim all warranties and conditions with regard to this information and related graphics, including all implied warranties and conditions of merchantability, fitness for a particular purpose, workmanlike effort, title and non-infringement. You specifically agree that in no event shall Microsoft and/or its suppliers be liable for any direct, indirect, punitive, incidental, special, consequential damages or any damages whatsoever including, without limitation, damages for loss of use, data or profits, arising out of or in any way connected with the use of or inability to use the information and related graphics contained herein, whether based on contract, tort, negligence, strict liability or otherwise, even if Microsoft or any of its suppliers has been advised of the possibility of damages.

Properties

Article ID: 2512242 - Last Review: May 23, 2014 - Revision: 2.0
Applies to
  • Microsoft ASP.NET 2.0
  • Microsoft ASP.NET 3.5
  • Microsoft ASP.NET 4
Keywords: 
kbcodefx kbinfo kbsurveynew kbnomt kbrapidpub atdownload KB2512242

Give Feedback

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com