In this article I will explain with an example, how to display images stored in database in ASP.Net Image control without using Generic HTTP Handler.
The images stored as Binary data will be fetched as BYTE Array and then the BYTE Array will be converted to BASE64 string and then assigned to the ASP.Net image control.
Database
This article makes use of a table named tblFiles whose schema is defined as follows.
Binary Images stored in Database
The following screenshot displays database table with three images stored in it.
HTML Markup
The HTML Markup consists of:
DropDownList – For capturing Name of the image to be displayed.
Image – For displaying selected image.
DropDownList has been assigned with the following properties and event handlers:
Properties
AutoPostBack – For allowing controls submit the Form (PostBack) which cannot submit on their own.
Events
OnSelectedIndexChanged – For displaying Images from Database.
<span>Select Image: </span>
<asp:DropDownList runat="server" ID="ddlImages" AppendDataBoundItems="false" AutoPostBack="true" OnSelectedIndexChanged="FetchImage">
<asp:ListItem Text="Select Image" Value="0"/>
</asp:DropDownList>
<hr/>
<asp:Image runat="server" ID="Image1" Visible="false" Height="60" Width="60" />
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Populating the list of Images in DropDownList control
Inside the
Page Load event handler, using
GetData method the
Id and
Name of the Image file is fetched from
SQL Server database.
The Id and Name of the Image file is set to the DataTextField and DataValueField property of DropDownList respectively and DropDownList will be populated.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
ddlImages.DataSource = GetData("SELECT Id, Name FROM tblFiles");
ddlImages.DataTextField = "Name";
ddlImages.DataValueField = "Id";
ddlImages.DataBind();
}
}
private DataTable GetData(string query)
{
DataTable dt = new DataTable();
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
sda.Fill(dt);
}
return dt;
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
ddlImages.DataSource = GetData("SELECT Id, Name FROM tblFiles")
ddlImages.DataTextField = "Name"
ddlImages.DataValueField = "Id"
ddlImages.DataBind()
End If
End Sub
Private Function GetData(query As String) As DataTable
Dim dt As New DataTable()
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using sda As New SqlDataAdapter(query, con)
sda.Fill(dt)
End Using
Return dt
End Using
End Function
Display image from database in Image control without using Generic Handler
When an Image is selected in DropDownList, first the Image control is made visible and then the Binary Data of the Image is fetched from Database as BYTE Array which is later converted to BASE64 string.
Finally, the BASE64 string is set to the ImageUrl property of the Image control and the Image will be displayed.
C#
protected void FetchImage(object sender, EventArgs e)
{
string id = ddlImages.SelectedItem.Value;
Image1.Visible = id != "0";
if (id != "0")
{
byte[] bytes = (byte[])GetData("SELECT Data FROM tblFiles WHERE Id =" + id).Rows[0]["Data"];
string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
Image1.ImageUrl = "data:image/png;base64," + base64String;
}
}
VB.Net
Protected Sub FetchImage(sender As Object, e As EventArgs)
Dim id As String = ddlImages.SelectedItem.Value
Image1.Visible = id <> "0"
If id <> "0" Then
Dim bytes As Byte() = DirectCast(GetData(Convert.ToString("SELECT Data FROM tblFiles WHERE Id =") & id).Rows(0)("Data"), Byte())
Dim base64String As String = Convert.ToBase64String(bytes, 0, bytes.Length)
Image1.ImageUrl = Convert.ToString("data:image/png;base64,") & base64String
End If
End Sub
Screenshot
Demo
Downloads
