Bind Images from Folder to DataList to Create Image Album in Asp.Net C# VB.Net

If you are looking for how to bind images from database to DataList or GridView I hope you will get a lot of example for it. But in this article here I will show you “How one can bind images from server folder to a DataList to create an Image Album Page“. Its a bit easy in Asp.Net since Asp.Net provides us a really efficient namespace “System.IO”. In this post I will first read the folder where images stored then read all file names if file has a valid extension for images then stored into a list. After that i will bind those list into the DataList. Within DataList I will use an Image control and HyperLink control to display images & name respectively. Here you can also filter image file extension like bmp, jpeg, jpg, png, gif whatever you want. In this example I only consider Jpeg, Jpg, Gif format files or images. You may also like my another post “Display Original Image size in a Popup Window“.

Objective/Output of an Image Album:
Bind images from folder to DataList Asp.Net Csharp

HTML Markup Code:

<asp:DataList ID="DataList1" runat="server" RepeatColumns="5" CellPadding="5">
<asp:Image Width="100" ID="Image1" ImageUrl='<%# Bind("Name", "~/Images/Flowers/{0}") %>' runat="server" />
<br />
<asp:HyperLink ID="HyperLink1" Text='<%# Bind("Name") %>' NavigateUrl='<%# Bind("Name", "~/Images/Flowers/{0}") %>' runat="server"/>
<ItemStyle BorderColor="silver" BorderStyle="dotted" BorderWidth="3px" HorizontalAlign="Center"
VerticalAlign="Bottom" />

Note: One important property is “RepeatColumns”. You can adjust your values as per your requirement. Also you can set RepeatColumns value in runtime from code behind to create a dynamic layout.

Now Bind Images From Folder to DataList:
C# Code:

    protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
            DirectoryInfo dir = new DirectoryInfo(MapPath("Images/Flowers"));
            FileInfo[] files = dir.GetFiles();
            ArrayList list = new ArrayList();
            foreach (FileInfo oItem in files)
                if (oItem.Extension == ".jpg" || oItem.Extension == ".jpeg" || oItem.Extension == ".gif")
            DataList1.DataSource = list;

Note: Don’t forget to add “System.IO”, “System.Collections” namespaces.

VB.Net Code:

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Dim dir As New DirectoryInfo(MapPath("Images/Flowers"))
            Dim files As FileInfo() = dir.GetFiles()
            Dim list As New ArrayList()
            For Each oItem As FileInfo In files
                If oItem.Extension = ".jpg" OrElse oItem.Extension = ".jpeg" OrElse oItem.Extension = ".gif" Then
                End If
            DataList1.DataSource = list
        End If
    End Sub

Note: Don’t forget to add “System.IO”, “System.Collections” namespaces.

Download Code Example C#        Download Code Example VB.Net

Posted in .Net,, C#, DataList, VB.Net

Leave a Reply

Your email address will not be published. Required fields are marked *