In this article I will explain step by step with an example, how to display binary images stored in database in Crystal Report in ASP.Net using C# and VB.Net.
The Binary Data field will be displayed using Photo field in Crystal Reports and using an Image handler, the Images from Database Table will be fetched and displayed in Crystal Report.
Note: By default Visual Studio does not include Crystal Reports hence you need to download and install the Crystal Reports software for Visual Studio.
Please refer the following link and download the appropriate version of Crystal Reports for your version of Visual Studio.
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Note: The Employees Table of Northwind database already has Binary Images stored in it.
1. Add Typed DataSet to the ASP.Net Website
Since I am using disconnected Crystal Reports we will make use of Typed DataSet to populate the Crystal Reports with data from database.
2. Adding DataTable to the Typed DataSet
Our next step would be to add a DataTable to the Typed DataSet.
3. Adding Columns or fields to DataTable
In the DataTable we need to specify the column names that we want to display in the Crystal Report.
Note: The Column Names of the DataTable must exactly match with the actual Database Table column names.
![Display image from database in Crystal Report in ASP.Net using C# and VB.Net]()
By default all the columns are of String data type but since the Image is stored in binary format for the Photo column we need to change the data type to Byte Array using the properties window as show below.
4. Add Crystal Report to the ASP.Net Website
Now you will need to add a Crystal Report to the ASP.Net Application. You can give it name as per your choice.
![Display image from database in Crystal Report in ASP.Net using C# and VB.Net]()
As soon as you click OK you get the following dialog. You must select Using the Report Wizard option.
![Display image from database in Crystal Report in ASP.Net using C# and VB.Net]()
Once you press OK in the above dialog, the Report Wizard starts and you get the following dialog where you need to choose the type of Database connection for your Crystal Report. Since we are using DataSet you will need to choose the Employees DataSet.
![Display image from database in Crystal Report in ASP.Net using C# and VB.Net]()
Next the Wizard will ask for the Columns or Fields from the Employees DataSet you need to display on the Crystal Reports. You can choose either all or specific fields as per you choice.
![Display image from database in Crystal Report in ASP.Net using C# and VB.Net]()
Note: There are more steps in the Wizards but those are Optional hence are not included in this article.
Once you click Finish button, your Crystal Report should look as below. Sometimes the Photo might not be shown thus in such case you can Drag and Drop it from the left panel.
HTML Markup
The following HTML Markup consists of a CrystalReportViewer control.
<%@ Register Assembly="CrystalDecisions.Web, Version=13.0.2000.0, Culture=neutral, PublicKeyToken=692fbea5521e1304"
Namespace="CrystalDecisions.Web" TagPrefix="CR" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<CR:CrystalReportViewer ID="CrystalReportViewer1" runat="server" AutoDataBind="true" />
</form>
</body>
</html>
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
using CrystalDecisions.CrystalReports.Engine;
VB.Net
Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient
Imports CrystalDecisions.CrystalReports.Engine
Populating the Crystal Report from Database
Inside the Page Load event, the Crystal Reports is populated with the records from database.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ReportDocument crystalReport = new ReportDocument();
crystalReport.Load(Server.MapPath("~/EmployeesReport.rpt"));
Employees dsEmployees = GetData("select * from employees");
crystalReport.SetDataSource(dsEmployees);
CrystalReportViewer1.ReportSource = crystalReport;
}
}
private Employees GetData(string query)
{
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
SqlCommand cmd = new SqlCommand(query);
using (SqlConnection con = new SqlConnection(conString))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (Employees dsEmployees = new Employees())
{
sda.Fill(dsEmployees, "DataTable1");
return dsEmployees;
}
}
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not IsPostBack Then
Dim crystalReport As New ReportDocument()
crystalReport.Load(Server.MapPath("~/EmployeesReport.rpt"))
Dim dsEmployees As Employees = GetData("select * from employees")
crystalReport.SetDataSource(dsEmployees)
CrystalReportViewer1.ReportSource = crystalReport
End If
End Sub
Private Function GetData(query As String) As Employees
Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim cmd As New SqlCommand(query)
Using con As New SqlConnection(conString)
Using sda As New SqlDataAdapter()
cmd.Connection = con
sda.SelectCommand = cmd
Using dsEmployees As New Employees()
sda.Fill(dsEmployees, "DataTable1")
Return dsEmployees
End Using
End Using
End Using
End Function
Adding the Crystal Reports Image Handler in Web.Config
This is the most important part and without it you will not see the Images in Crystal Report. You need to add the following in the httpHandlers section of Web.Config.
<add verb="GET" path="CrystalImageHandler.aspx" type="CrystalDecisions.Web.CrystalImageHandler, CrystalDecisions.Web, Version=13.0.2000.0, Culture=neutral, PublicKeyToken=692fbea5521e1304" />
Screenshot
![Display image from database in Crystal Report in ASP.Net using C# and VB.Net]()
Demo
Downloads
