Display Images in GridView from folder in ASP.NET

We need to display images in GridView control from a folder in ASP.NET. This is really very simple task.

Gridview is very rich control and easy to use. The GridView control is a powerful data grid control that allows you to display an entire collection of data, sorting, paging, and perform inline editing.

Display images in GridView from folder - Example

In the following example we will see how to upload image to folder and display the uploaded images in GridView control.

Web form

<h3>Display images in gridview from folder</h3>
<table>
    <tr>
        <td>
            File:
        </td>
        <td>
              <asp:FileUpload ID="fupload" runat="server" />
        </td>
    </tr>
    <tr>
        <td>

        </td>
        <td>
            <asp:Button ID="btnUpload" runat="server" cssClass="button"
             Text="Upload Selected File" onclick="btnUpload_Click" />
        </td>
    </tr>
</table>
 <asp:GridView ID="Gv_imgs" CssClass="grid" runat="server" AutoGenerateColumns="false" ShowHeader="false">
      <Columns>
           <asp:BoundField DataField="Text" HeaderText="Name" />
            <asp:ImageField DataImageUrlField="Value" ControlStyle-Height="75" ControlStyle-Width="75" HeaderText="Images" />
      </Columns>
 </asp:GridView>

C#-code behind

 

Import the following namespace
using System.IO;

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string[] ImagePaths = Directory.GetFiles(Server.MapPath("~/Images/"));
        List<ListItem> Imgs = new List<ListItem>();
        foreach (string imgPath in ImagePaths)
        {
            string ImgName = Path.GetFileName(imgPath);
            Imgs.Add(new ListItem(ImgName, "~/Images/" + ImgName));
        }
        Gv_imgs.DataSource = Imgs;
        Gv_imgs.DataBind();
    }
}
protected void btnUpload_Click(object sender, EventArgs e)
{
    if (fupload.HasFile)
    {
        string fileName = fupload.FileName;
        fupload.PostedFile.SaveAs(Server.MapPath("~/Images/") + fileName);
        Response.Redirect(Request.Url.AbsoluteUri);
    }
}

 

Output