Display Binary Image from database in RDLC Report in ASPNet using C and VBNet

In this article I will explain with an example, how to display Binary Image i.e. Image saved in SQL Server database in RDLC Report in ASP.Net using C# and VB.Net.

Database

I have made use of the following table Employees with the schema as follows.

I have already inserted few records in the table.

Note: You can download the database backup file by clicking the download link below.

Download SQL file

1. Add Typed DataSet to the ASP.Net Website

Since I am using disconnected RDLC Reports we will make use of Typed DataSet to populate the RDLC 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 RDLC Report.

Note: The Column Names of the DataTable must exactly match with the actual Database Table column names.

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 shown below.

4. Adding the RDLC Report

Using the Add New Item option in Visual Studio you need to add new RDLC Report. I am making use of Report Wizard so that it make easier to configure the Report.

5. Choose the DataSet

Now we need to choose the DataSet that will act as the DataSource for the RDLC Report. Thus we need to select the Employees DataSet that we have created earlier.

6. Choose the Fields to be displayed in the RDLC Report

Next we need to choose the fields we need to display, we need to simply drag and drop each fields into the Values Box as shown in the screenshot below.

7. Choose the Layout

The next dialog will ask us to choose the layout, we can simply skip it as of now as this is a simple Report with no calculations involved.

8. Choose the Style

Finally we need to choose the style, i.e. color and theme of the Report.

Once you press Finish button on the above step, the Report is ready and is displayed in the Visual Studio as shown below.

9. Adding Image Field

Since we need to display Image from database, the Photo field needs to be deleted by Right Clicking the field and selecting Delete option from the Context menu as shown below.

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.

As soon as the Image object is dropped, the following 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.

Finally in the Size Tab, the Display property needs to be set to Original size option as shown below.

10. Adding Report Viewer to the page

In order to display the Report we will need to add ReportViewer control to the page from the Toolbox. The ReportViewer control requires ScriptManager on the page.

Once you add the ReportViewer control to the page, your page must look as below.

<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"

Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<rsweb:ReportViewer ID="ReportViewer1" runat="server" Width="600">

</rsweb:ReportViewer>

</form>

</body>

</html>

11. Populating the RDLC Report from Database

Below is the code to populate the RDLC Report from database. The first statement notifies the ReportViewer control that the Report is of type Local Report.

Then the path of the Report is supplied to the ReportViewer, after that the Employees DataSet is populated with records from the Employees Table is set as ReportSource to the Report.

Namespaces

using System.Data;

using System.Configuration;

using System.Data.SqlClient;

using Microsoft.Reporting.WebForms;

Code

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

ReportViewer1.ProcessingMode = ProcessingMode.Local;

ReportViewer1.LocalReport.ReportPath = Server.MapPath("~/Report.rdlc");

Employees dsEmployees = 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 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

Namespaces

Imports System.Data

Imports System.Configuration

Imports System.Data.SqlClient

Imports Microsoft.Reporting.WebForms

Code

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

If Not IsPostBack Then

ReportViewer1.ProcessingMode = ProcessingMode.Local

ReportViewer1.LocalReport.ReportPath = Server.MapPath("~/Report.rdlc")

Dim dsEmployees As Employees = GetData("SELECT * FROM Employees")

Dim datasource As New ReportDataSource("Employees", dsEmployees.Tables(0))

ReportViewer1.LocalReport.DataSources.Clear()

ReportViewer1.LocalReport.DataSources.Add(datasource)

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 Function

Screenshot

Demo

View Demo

Downloads

Download Code

Display Binary Image from database in RDLC Report in ASP.Net using C# and VB.Net

Related

Ask Question

Company

Explore

Follow us

Contact Us