How to Bind all Images from a Folder to Gridview using Asp.Net C# VB.Net

Sometimes we need to Bind all Images from a Folder to a GridView. Here in this article I will explain how we can achieve it. But I will show the example in a way so that developers can meet the user requirement. Usually we upload images in a folder and keep the image path in a Database. So here i will display all images from a folder those were previously entered into the Database with Image Path URL.

Objective/Outcome:
How to Bind all Images from a Folder to Gridview using Asp.Net C# VB.Net

To Do the Example First Create the Database Table:

CREATE TABLE [dbo].[Employee](
	[EmployeeID] [bigint] NOT NULL,
	[EmployeeName] [varchar](max) NOT NULL,
	[Designation] [varchar](max) NOT NULL,
	[Posting] [varchar](max) NOT NULL,
	[Dept] [varchar](max) NOT NULL,
	[ImageURL] [varchar](max) NULL,
 CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED 
(
	[EmployeeID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

Insert Some Data into Database:
Employee

Modify the Web.Config File to connect to Database:

<configuration>
  <connectionStrings>
    <add name="DBConnection" connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=TESTDB;Trusted_Connection=yes;" providerName="System.Data.SqlClient"/>
    <!--<add name="BONConnection" connectionString="Data Source=XXX.com;Initial Catalog=DBNAME;User Id=UserName;Password=YourPassword;" providerName="System.Data.SqlClient" />-->
  </connectionStrings>
...................
...................

Note: If you use windows authentication then use the first key. Otherwise use second key line. Update server name, Database name, User name, Password as per your settings.

Now prepare the GridView Control:

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="CornflowerBlue" HeaderStyle-Font-Bold="true" HeaderStyle-ForeColor="White" CellPadding="5">
    <Columns>
    <asp:BoundField HeaderText="Employee Name" DataField="EmployeeName" />
    <asp:BoundField HeaderText="Designation" DataField="Designation" />
    <asp:BoundField HeaderText="Posting" DataField="Posting" />
    <asp:BoundField HeaderText="Department" DataField="Dept" />
    <asp:TemplateField>
    <ItemTemplate>
    <img src="<%#Eval("ImageURL")%>" alt="<%#Eval("EmployeeName")%>" width="100px" height="70px"/>
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    </asp:GridView>

Note: To display images here I have used HTML IMG control within TemplateField.

Now Bind Folder Images into Asp.Net GridView:
C# Code:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            string consString = ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString;
            using (SqlConnection conn = new SqlConnection(consString))
            {
                SqlCommand cmd = new SqlCommand("SELECT * FROM [Employee]", conn);
                cmd.CommandType = CommandType.Text;
                conn.Open();
                SqlDataReader drStudents = cmd.ExecuteReader();
                
                GridView1.DataSource = drStudents;
                GridView1.DataBind();
            }
        }
    }

Note: Don’t forget to add “System.Data”, “System.Data.SqlClient” & “System.Configuration” namespaces.

VB.Net Code:

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Dim consString As String = ConfigurationManager.ConnectionStrings("DBConnection").ConnectionString
            Using conn As New SqlConnection(consString)
                Dim cmd As New SqlCommand("SELECT * FROM [Employee]", conn)
                cmd.CommandType = CommandType.Text
                conn.Open()
                Dim drStudents As SqlDataReader = cmd.ExecuteReader()

                GridView1.DataSource = drStudents
                GridView1.DataBind()
            End Using
        End If
    End Sub

Note: Don’t forget to add “System.Data”, “System.Data.SqlClient” & “System.Configuration” namespaces.

Hope now you can bind all images of a folder to the GridView Control.

Download Code Example C#        Download Code Example VB.Net

Posted in .Net, Asp.net, C#, Gridview, VB.Net

Leave a Reply

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

AlphaOmega Captcha Classica  –  Enter Security Code
     
 

*