In this article I will explain with an example, how to upload and display Image file using Path stored in Database in GridView in ASP.Net using C# and VB.Net.
Image files will be uploaded and then will be saved into a Folder (Directory) on disk. The Path of the saved files will be inserted into SQL Server Database Table.
Finally using the Path, the Image Files will be retrieved and displayed in GridView along with feature to Zoom the Image using jQuery.
 
 

Database

This article makes use of a table named Files whose schema is defined as follows.
Upload and Display Images using Path stored in database in GridView in ASP.Net using C# and VB.Net
 
Note: You can download the database table SQL by clicking the download link below.
          
 
 

HTML Markup

The following HTML Markup consists of:
FileUpload – For Select image file.
Button – For upload selected image file.
GridView – For display data.

Columns

The GridView consists of two BoundField and one ImageField columns.
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" />
<hr />
<asp:GridView ID="gvImages" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="FileId" HeaderText="Image Id" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:ImageField DataImageUrlField="Path" HeaderText="Image" />
    </Columns>
</asp:GridView>
<div id="dialog" style="display:none">
</div>
 
 

Namespaces

You will need to import the following namespaces.
C#
using System.IO;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
 
VB.Net
Imports System.IO
Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient
 
 

Displaying Images using Path stored in database in ASP.Net GridView

Inside the Page Load event handler, the records from the database table are fetched and are used to populate the GridView control.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection conn = new SqlConnection(constr))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter("SELECT * FROM Files", conn))
            {
                DataTable dt = new DataTable();
                sda.Fill(dt);
                gvImages.DataSource = dt;
                gvImages.DataBind();
            }
        }
    }
}
 
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using conn As SqlConnection = New SqlConnection(constr)
            Using sda As SqlDataAdapter = New SqlDataAdapter("SELECT * FROM Files", conn)
                Dim dt As DataTable = New DataTable()
                sda.Fill(dt)
                gvImages.DataSource = dt
                gvImages.DataBind()
            End Using
        End Using
    End If
End Sub
 
 

Uploading Image and saving Image Path in SQL Server database in ASP.Net

The Upload event handler gets called when an Image file is selected and the Upload Button is clicked.
The uploaded Image file is first saved into a Folder named Uploads within the Project Folder and then the Name and the Path of the Image file is inserted into the SQL Server database table.
Note: The Relative Path of the Image file will be saved in the database for ease of conversion to Absolute Path or Absolute URL.
 
C#
protected void Upload(object sender, EventArgs e)
{
    //Extract Image File Name.
    string fileName = Path.GetFileName(FileUpload1.PostedFile.FileName);
 
    //Set the Image File Path.
    string filePath = "~/Uploads/" + fileName;
 
    //Save the Image File in Folder.
    FileUpload1.PostedFile.SaveAs(Server.MapPath(filePath));
 
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection conn = new SqlConnection(constr))
    {
        string sql = "INSERT INTO FilesVALUES(@Name, @Path)";
        using (SqlCommand  cmd = new SqlCommand(sql, conn))
        {
            cmd.Parameters.AddWithValue("@Name", fileName);
            cmd.Parameters.AddWithValue("@Path", filePath);
            conn.Open();
            cmd.ExecuteNonQuery();
            conn.Close();
        }
    }
 
    Response.Redirect(Request.Url.AbsoluteUri);
}
 
VB.Net
Protected Sub Upload(ByVal sender As Object, ByVal e As EventArgs)
    'Extract Image File Name.
    Dim fileName As String = Path.GetFileName(FileUpload1.PostedFile.FileName)
 
    'Set the Image File Path.
    Dim filePath As String = "~/Uploads/" & fileName
 
    'Save the Image File in Folder.
    FileUpload1.PostedFile.SaveAs(Server.MapPath(filePath))
 
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using conn As SqlConnection = New SqlConnection(constr)
        Dim sql As String = "INSERT INTO FilesVALUES(@Name, @Path)"
        Using cmd As SqlCommand = New SqlCommand(sql, conn)
            cmd.Parameters.AddWithValue("@Name", fileName)
            cmd.Parameters.AddWithValue("@Path", filePath)
            conn.Open()
            cmd.ExecuteNonQuery()
            conn.Close()
        End Using
    End Using
 
    Response.Redirect(Request.Url.AbsoluteUri)
End Sub
 
 

Implement Zoom feature when Image is clicked using jQuery

A jQuery click event handler is assigned to all the HTML Image elements within the GridView. When an HTML Image element is clicked, the Image element is cloned and displayed in larger size within a jQuery UI Model Popup.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript">
    $(function () {
        $("#dialog").dialog({
             autoOpen: false,
             modal: true,
             height: 600,
             width: 600,
             title: "Zoomed Image"
        });
        $("[id*=gvImages] img").click(function () {
            $('#dialog').html('');
            $('#dialog').append($(this).clone());
            $('#dialog').dialog('open');
        });
    });
</script>
 
 

Screenshots

Uploading and displaying the Image Files

Upload and Display Images using Path stored in database in GridView in ASP.Net using C# and VB.Net
 

Inserted records of Image files

Upload and Display Images using Path stored in database in GridView in ASP.Net using C# and VB.Net
 
 

Downloads

Download Code