In this article I will explain how to bind and display images in DataList from folder in ASP.Net using C# and VB.Net.
The images will be uploaded and saved into some folder on disk using ASP.Net FileUpload control and finally the images will be populated and displayed in ASP.Net DataList control.
 
 
HTML Markup
The HTML consists an ASP.Net FileUpload control, a Button to trigger the upload process and an ASP.Net DataList that will display the uploaded images once upload is completed.
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" />
<hr />
<asp:DataList ID="DataList1" runat="server" RepeatColumns = "2" CellPadding = "4">
    <ItemTemplate>
        <table border="0" cellpadding="0" cellspacing="0" width = "120px">
            <tr>
                <td align = "center">
                    <asp:Image ID="Image1" ImageUrl='<%# Eval("Value") %>' runat="server" Height="100"
                        Width="100" />
                </td>
            </tr>
            <tr>
                <td align = "center">
                    <%# Eval("Text") %>
                </td>
            </tr>
        </table>
    </ItemTemplate>
</asp:DataList>
 
 
Namespaces
You will need to import the following namespaces.
C#
using System.IO;
using System.Collections.Generic;
 
VB.Net
Imports System.IO
Imports System.Collections.Generic
 
 
Uploading Images using ASP.Net FileUpload Control
When the Upload button is clicked the following event handler is executed which saves the image files to a folder named Images within the website folder.
Note: If you need to know about validation of files so that user can upload only images and no other type of files then please visit ASP.Net FileUpload: File Extension Validation
Once the file is uploaded user is redirected to the same page so that the DataList can be loaded with images from folder inside the Page Load event of the ASP.Net Page.
C#
protected void Upload(object sender, EventArgs e)
{
    if (FileUpload1.HasFile)
    {
        string fileName = Path.GetFileName(FileUpload1.PostedFile.FileName);
        FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Images/") + fileName);
        Response.Redirect(Request.Url.AbsoluteUri);
    }
}
 
VB.Net
Protected Sub Upload(sender As Object, e As EventArgs)
    If FileUpload1.HasFile Then
        Dim fileName As String = Path.GetFileName(FileUpload1.PostedFile.FileName)
        FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Images/") + fileName)
        Response.Redirect(Request.Url.AbsoluteUri)
    End If
End Sub
 
 
Displaying images from folder on disk in ASP.Net DataList control
In the Page Load event of the ASP.Net Web Page the files are fetched from the Images folder and then the fetched image files are bound to the ASP.Net DataList control.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string[] filePaths = Directory.GetFiles(Server.MapPath("~/Images/"));
        List<ListItem> files = new List<ListItem>();
        foreach (string filePath in filePaths)
        {
            string fileName = Path.GetFileName(filePath);
            files.Add(new ListItem(fileName, "~/Images/" + fileName));
        }
        DataList1.DataSource = files;
        DataList1.DataBind();
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Dim filePaths As String() = Directory.GetFiles(Server.MapPath("~/Images/"))
        Dim files As New List(Of ListItem)()
        For Each filePath As String In filePaths
            Dim fileName As String = Path.GetFileName(filePath)
            files.Add(New ListItem(fileName, "~/Images/" + fileName))
        Next
        DataList1.DataSource = files
        DataList1.DataBind()
    End If
End Sub
 
 
Screenshot
Bind (Display) images in DataList from folder in ASP.Net using C# and VB.Net
 
 
Demo
View Demo
 
 
Downloads

Download Code