Display Image using file path stored in database in ASP.Net DataList using C# and VB.Net

Hi ada20,

Refer below sample.

You need to use datalist for displaying as per your requirement.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/start/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#dialog").dialog({
            autoOpen: false,
            modal: true,
            height: 300,
            width: 200,
            title: "Zoomed Image"
        });
        $("[id*=dlData] img").click(function () {
            $('#dialog').html('');
            $('#dialog').append($(this).clone());
            $('#dialog').dialog('open');
        });
    });
</script>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" />
<hr />
<div class="row" style="padding-top: 50px">
    <asp:DataList ID="dlData" runat="server" RepeatDirection="Horizontal" RepeatColumns="2">
        <ItemTemplate>
            <div class="col-sm-3 col-md-3">
                <div class="thumbnail border=rounded-pill align-text-bottom" style="background-color: aliceblue">
                    <asp:Image ImageUrl='<%#Eval("Path") %>' runat="server" Height="100px" Width="100px" />
                    <div class="caption">
                        <div class="probrand">
                            <%#Eval("Id") %>
                        </div>
                        <div class="proName">
                            <%#Eval("Name") %></div>
                    </div>
                </div>
                </a>
            </div>
        </ItemTemplate>
    </asp:DataList>
</div>
<div id="dialog" style="display: none">
</div>

Namespaces

C#

using System.IO;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;

VB.Net

Imports System.IO
Imports System.Data.SqlClient
Imports System.Data

Code

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 TOP 4 * FROM tblfilespath", conn))
            {
                DataTable dt = new DataTable();
                sda.Fill(dt);
                dlData.DataSource = dt;
                dlData.DataBind();
            }
        }
    }
}

protected void Upload(object sender, EventArgs e)
{
    string fileName = Path.GetFileName(FileUpload1.PostedFile.FileName);
    string filePath = "~/Uploads/" + fileName;
    FileUpload1.PostedFile.SaveAs(Server.MapPath(filePath));
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection conn = new SqlConnection(constr))
    {
        string sql = "INSERT INTO tblfilespath VALUES(@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 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 TOP 4 * FROM tblfilespath", conn)
                Dim dt As DataTable = New DataTable()
                sda.Fill(dt)
                dlData.DataSource = dt
                dlData.DataBind()
            End Using
        End Using
    End If
End Sub

Protected Sub Upload(ByVal sender As Object, ByVal e As EventArgs)
    Dim fileName As String = Path.GetFileName(FileUpload1.PostedFile.FileName)
    Dim filePath As String = "~/Uploads/" & fileName
    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 tblfilespath VALUES(@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

Screenshot