Μετάβαση στο κύριο περιεχόμενο
Υποστήριξη
Είσοδος με Microsoft
Είσοδος ή δημιουργία λογαριασμού.
Γεια σας,
Επιλέξτε διαφορετικό λογαριασμό.
Έχετε πολλούς λογαριασμούς
Επιλέξτε τον λογαριασμό με τον οποίο θέλετε να εισέλθετε.
Αγγλικά
Λυπούμαστε. Αυτό το άρθρο δεν είναι διαθέσιμο στη γλώσσα σας.

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




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:


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 controlFor 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 controlFor more information about the efficient data paging with the ASP.NET 2.0 DataList control and ObjectDataSource, visit the following websit:

General information about the efficient data paging with the ASP.NET 2.0 DataList control and ObjectDataSource

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.

Χρειάζεστε περισσότερη βοήθεια;

Θέλετε περισσότερες επιλογές;

Explore subscription benefits, browse training courses, learn how to secure your device, and more.

Communities help you ask and answer questions, give feedback, and hear from experts with rich knowledge.

Σας βοήθησαν αυτές οι πληροφορίες;

Τι επηρέασε την εμπειρία σας;
Πατώντας "Υποβολή" τα σχόλια σας θα χρησιμοποιηθούν για τη βελτίωση των προϊόντων και των υπηρεσιών της Microsoft. Ο διαχειριστής IT θα έχει τη δυνατότητα να συλλέξει αυτά τα δεδομένα. Δήλωση προστασίας προσωπικών δεδομένων.

Σας ευχαριστούμε για τα σχόλιά σας!

×