Display image in crystal report from database in ASP.NET

Introduction

Today I saw in CodeGain message board one of the user asked a question, how to display image in crystal report from the SQL Server 2005 in asp.net and he save image as binary data using file upload control asp.net.

Technologies

ASP.NET

Language

C# and T-SQL

Prerequisite

Visual Studio 2008, SQL Server 2005

Implementation

First we need to design a database to store image as binary format. For this we have to create table like follow.

Now we have database to store images.

Note: we assume have save few image in database already.

Let us start to retrieve image and display in crystal report. On this progress first steps is need design report.

Create new web application using Visual Studio 2008 and give a project name as "DisplayImageInCry" and then right click on the project and then select add new item.

Then select crystal report in template collection. Look at the following figure.

Then click OK button to continue the report design. When you click ok you will get report design wizard. Look following figure.

In this we need to select the using the report wizard option to continue and then click OK button to continue.

This screen is Important to move the next step. You know why we need to create database connection to design report. In above figure new need to select the "Create New Connection" node to create new connection.

Note: this is demonstration using SQL Server 2005. Here we need select SQL Native Client driver to create connection.

Click next button to specify database connection properties. It is look like figure below.

Select the table according to use in report and select column to build report. Finally it will look as following figure.

Note: its display first image from the database in the design time. But need write code to display image in dynamic way.

Let us start to write code. Here we need write code for read image from the database.

public DataSet ReadImageFromDB(int imageID){DataSet imageData = new DataSet();using (SqlConnection connection = new SqlConnection("connectionstring")){using (SqlCommand cmd = connection.CreateCommand()){cmd.CommandText = "select ImageData FROM UserImages where ID=" + imageID + ";";cmd.CommandType = System.Data.CommandType.Text;using (SqlDataAdapter adapter = new SqlDataAdapter(cmd)){adapter.Fill(imageData);}}}return imageData;}

Above method code help us to retrive image from the database and fill into the dataset.

Next step is design a web page to render and display report in page. To this we need to add crystal report viewer in the default webpage.

When we add viewer in page should be similar like followings html tags.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CryReportWithImage.aspx.cs"
Inherits="Crystal_CryReportWithImage" %>

<%@ Register Assembly="CrystalDecisions.Web, Version=10.5.3700.0, Culture=neutral, PublicKeyToken=692fbea5521e1304"
Namespace="CrystalDecisions.Web" TagPrefix="CR" %>

Now we need to write code to display crystal report and display image.

using System;using System.Collections.Generic;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using CrystalDecisions.CrystalReports.Engine;using CG.CS.Data.Sql;using System.Data;public partial class Crystal_CryReportWithImage : System.Web.UI.Page
{protected void Page_Load(object sender, EventArgs e){ReportDocument doc = new ReportDocument();doc.Load(Server.MapPath("ImageRpt.rpt"));ImageUtilityDA imageUtilityDA = new ImageUtilityDA();DataSet data = imageUtilityDA.ReadImageFromDB(131);doc.SetDataSource(data.Tables[0]);CrystalReportViewer1.ReportSource = doc;}}

Cool everything finished now build and run application.

Output look like followings

Note:

1. Here I didn't use any image resizing operation

2. For demonstration purpose we are displaying one image only. You can display multiple images.

3. Image is already saving to the database as binary format. 

Conclusion

This article explains about display image in crystal report from the Sql Server 2005 database Here i haven't written code for handle the image resize or formatting.