In this article I will explain with an example, how to display Binary Image from database in RDLC report in ASP.Net MVC.
Database
I have made use of the following table Hobbies with the schema as follow.
![ASP.Net MVC: Display Binary Image from database in RDLC Report]()
I have already inserted few records in the table.
![ASP.Net MVC: Display Binary Image from database in RDLC Report]()
Note: You can download the database table SQL by clicking the download link below.
Configuring RDLC Report
Finally, the RDLC Report will look as shown below.
![ASP.Net MVC: Display Binary Image from database in RDLC Report]()
Configuring Typed DataSet for displaying Image
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 by right clicking on the Photo column and click on Add button, then choose Column option.
![ASP.Net MVC: Display Binary Image from database in RDLC Report]()
Then, inside the properties window, change the DataType to System.Bytes[].
![ASP.Net MVC: Display Binary Image from database in RDLC Report]()
Adding Image Field in the Report Designer.
First, we need to delete the Photo field by right clicking the field and selecting Delete option from the Context menu as shown below.
![ASP.Net MVC: Display Binary Image from database in RDLC Report]()
Once the Photo field is deleted, the Image object needs to be dragged from the Toolbox and dropped into the empty Photo column as shown below.
![ASP.Net MVC: Display Binary Image from database in RDLC Report]()
As soon as the Image object is dropped, the Image Properties dialog window will open.
In the General Tab of the window, the Image Source property needs to be set to Database, the Field property should be set to Photo column and the MIME Type property should be set as image/jpeg as shown below.
![ASP.Net MVC: Display Binary Image from database in RDLC Report]()
Then, in the Size Tab, the Display property needs to be set to Original size option as shown below.
![ASP.Net MVC: Display Binary Image from database in RDLC Report]()
Finally, the RDLC Report will look as shown below.
![ASP.Net MVC: Display Binary Image from database in RDLC Report]()
HTML Markup
The HTML Markup consists of following controls:
ScriptManager – For enabling ASP.Net
AJAX.
ReportViewer – For generating report.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Report.aspx.cs" Inherits="RDLC_Report_MVC.Report" %>
<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=15.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91"
Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server"></asp:ScriptManager>
<rsweb:ReportViewer ID="reportViewer1" runat="server"></rsweb:ReportViewer>
</form>
</body>
</html>
Namespaces
You will need to import the following namespaces.
using System.Configuration;
using System.Data.SqlClient;
using Microsoft.Reporting.WebForms;
Populating the RDLC Report from Database in ASP.Net
Inside the Page Load event handler, Employes DataSet is populated with records from the Employees table using the GetData method and set as DataSource to the Report Viewer.
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
reportViewer1.ProcessingMode = ProcessingMode.Local;
reportViewer1.LocalReport.ReportPath = Server.MapPath("~/Report.rdlc");
Employees dsEmployees = this.GetData("SELECT * FROM Employees");
ReportDataSource datasource = new ReportDataSource("Employees", dsEmployees.Tables[0]);
reportViewer1.LocalReport.DataSources.Clear();
reportViewer1.LocalReport.DataSources.Add(datasource);
}
}
private Employees GetData(string sql)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlDataAdapter sda = new SqlDataAdapter(sql, con))
{
using (Employees dsEmployees = new Employees())
{
sda.Fill(dsEmployees, "DataTable1");
return dsEmployees;
}
}
}
}
Screenshot
![ASP.Net MVC: Display Binary Image from database in RDLC Report]()
Downloads
