How to Create Crystal Reports in ASP.NET Webforms

In this tutorial, we are going to discuss how to create a Crystal Report using ASP.NET Web Form applications. We will show you how to create the Typed Dataset and bind the Crystal Report to the Dataset in a Web Form application.

You can read our following tutorial on how to Create Crystal Reports

• How to Create Crystal Reports using Windows Forms Application
• How to Create Crystal Reports Using ASP.NET MVC Application

We are using Visual Studio 2013 and SAP Crystal Reports for Developer Edition to Visual Studio. Click to Download Crystal Report for Visual Studio. The Code also works under Visual Studio 2015 Community Edition and the latest version of Crystal Reports.

We are using the Northwind Database. You can download it from CodePlex

Create the ASP.NET Web Forms Application

Creating the Crystal Reports involves the following steps

1. Create ASP.NET Web Forms Project
2. Create the Dataset
3. Add Crystal Report to the Project
4. Bind Dataset to the Crystal Report and Add Fields
5. Add a Web Form to the project
6. Add CrystalReportViewer control & Bind it to the Report
7. Run and Test the Report

1. Create ASP.NET Web Forms Project

The First step is to create a Web form application.

Follow these steps to create a Web Forms Project

1. Launch Visual Studio.
2. From the File menu, click New Project
3. From Templates ->Visual C#
4. Select Web
5. Select ASP.NET Web Application
6. Choose Name as CrWebApp
7. Click on OK

This will open the New ASP.NET Project Wizard.

1. Select Empty Template
2. Click on Webforms
3. Click on OK

2. Create a Dataset

In the Previous Tutorial, we learnt how to use OLE DB (ADO) connection. For this example let us choose  ADO.NET Dataset. To use ADO.NET Dataset we need to create a dataset in our project. To do that follow the following steps

1.  Select your Project
2.  Right Click
3.  Go to Add New

Add New Item dialogue box appears. Here follow these steps

1.  Select New Item  
2.  Select Data on left-hand side box
3.  On the right-hand side select Dataset
4.  Name the dataset as customer
5. Click on Add

This will bring Dataset Designer on your screen

Dataset Designer

Right-click and select Table Adapter.  

Choose your data connection wizard

This will bring up Choose your data connection wizard. The drop-down will display the already created connections. To Create a new connection, click on the New Connection

Click on New Connection

Add Connection dialogue box

The next dialogue box is  Add Connection dialogue box. The first Option in this screen is data source which, is as you can see is displayed as Microsoft SQL Server (SQL Client).  If you wish to change it to some other provider then, click on Change.  That will take you to the list of available Data Source Select the appropriate one for your project and Click OK

Since we are connecting to the SQL server database let us choose to cancel

Follow these steps to set your database connection

1. In Server Name field  enter name of your SQL Server Instance Name
2. Under authentication, you can either choose windows authentication or specify user ID & Password.  I will choose Windows Authentication
3. Select database Name.  Select NorthWInd
4. Click on Test Connection to verify Connection
5. Click on OK to finish

We are taken back to the Choose your data Connection window

Choose your data connection wizard

The new connection which we created in the previous step appears on drop down. Expand the plus right below connection drop-down see the connection string

1. Select the Newly created connection
2. Click on NEXT

You will be prompted to whether you wish to add this connection to the web.config file. Select yes and click Next.  This will bring up Choose your Command Type Dialog Box

Choose your Command Type

Here you are given three options to select the Command Type

1. Use SQL Statement
2. New Stored Procedure
3. Existing Stores Procedure

Let us choose Use SQL Statement. Click on Next.  This will bring up Enter SQL Statement dialogue box

Enter SQL Statement dialogue box

Here you are prompted for the SQL statement.  Enter our query as

Click on Next.  This will take us to the Choose methods to Generate  dialogue box

Choose methods to Generate

This wizard asks for the methods you want to add to our TableAdapter. Select tick on all three and  Click on Next. The dataset is generated for us. Save and close the dataset

Now we have created our dataset. We are now ready to connect this dataset to our crystal report

3. Add Crystal Report to the Project

To Add Crystal Reports to the Report do the following

1. Select your Project
2. Click Add
3. Click New Item
4. On the left-hand templates column, choose Reporting
5. Select Crystal Reports
6. Name the Report as rptCustomerList
7. Click on Add

This will bring up the Crystal Report Gallery

Crystal Report Gallery

The Gallery offers  three options to create report

1. Using The Report Wizard
2. As a Blank Report
3. From an existing Report

In the Create your first Crystal Report Using Windows Forms, we showed you how to create the report using the first Option i.e. using the Report wizard. For this example let us create the report as a Blank Report

Select as blank Report  and click on Ok

A blank Report is Created and ready for use. Notice that the reference to the following Crystal Report Namespace is added to our project

1. CrystalDecisions.CrystalReports.Engine
2. CrystalDecisions.ReportSource
3. CrystalDecisions.Shared

4. Bind the Dataset to Crystal Report and Add Fields

Now we need to connect this report to the dataset we created. Locate and Open the crystal Report rptCustomerList. To Connect to the dataset do the following

1. Select Field Explorer
2. On Database fields ->   Right Click
3. Click on Database Expert
4. Go to Project Data and select ADO.NET Datasets

The dataset we have created will appear in the Project Data

1. Select Customers Dataset.
2. Click on Right Arrow to add this to the Report.
3. Click on OK.

Add fields to Report

The next step is to add the fields to the report. To do this follow these steps

1. Go to Fields Explorer.
   You will notice that the customer table which has added here appears here with all the fields.
2. Expand database fields.
3. Expand customers.
4. Select the fields you wish to place on Report Drag them to the report.
5. Let us Place title,  companyName, contactName, contactTitle, and city in the report.

Save the report and close all the open windows.

5. Create an ASP.NET Web Form

The next step is to create a web form to show the report. To do this follow these steps

1. Go to Project  Right-click
2. Click on Add
3. Click on New Item
4. Add New Wizard Appears
5. Select Web
6. Select Webform
7. Name it as default.aspx

Click on add to create the form

Add a button to our web form

The next step is to add a button to our web form. To do this

1. Open the default.aspx.
2. Click on Design tab at the bottom.
3. Go to the toolbox.
4. Select button.
5. Drag it and place it on the web page.
6. Rename the button caption as SHOW.
7. Rename the ID Property to Show.

6. Add a Crystal Viewer Control to Web Forms and Bind it to the Report

The next step is to add crystal Viewer control to our form. To do this

1. Open the default.aspx.
2. Click on Design tab at the bottom.
3. Go to the toolbox.
4. Locate Reporting Tab.
5. Select Crystal Report Viewer Control.
6. Drag it on the web page.

Bind Report to the Crystal Report Viewer

To View the Crystal Report we need to bind the Report (rptCustomer) to the Crystal Viewer Control, which we added to our Web Form. To do this double click on Show Button to open the code behind class

We need to Import following Name Space from the Crystal Reports.

First, We need to Fill the data table with the Customers data. To do that Create an instance of Table Adapter CustomersTableAdapter and invoke the Fill Method to Fill the data.

Create the rpt object, which is an instance of our rptCustomerList. Note the rptCustomerList is the name of the Crystal Report, which we had created in step 3. Assigning the Dataset ds to Report using the method SetDataSource. The object rpt is our Report.

Crystal Report Viewer control’s job is to display the report. All we need to do is to assign the report to the ReportSource Property of the Crystal Report Viewer Control (CrystalReportViewer.ReportSource = rpt). Now our Crystal Report Viewer is ready to display our report.

Finally, store our Report in the Session using Session.Add(“report”, rpt). The Report object is retrieved from the Session and assigned to the ReportSource Property of the CrystalReportViewer Control when the page is refreshed or user navigates from one page to another. This is done from the Page_Init event.

Finally, our code looks like this

7. Run And View The Report

Save and run and you will see your first report in ASP.NET Web Forms

Notes

It may happen that report might not display properly or may not display at all.  There are two common problems, that usually occurs in ASP.NET Web Forms application.

1. Crystal report Errors : Could not load file or assembly crdb_adoplus or one of its dependencies
2. Crystal Report Shows a blank Page in ASP.NET Web Application

Source Code

You can download the source code from the GitHub. The Source code is made using Visual Studio 2015 Community Edition and SAP Crystal Reports Developer Edition for Visual Studio Service Pack 17

The sample database Northwind can found from CodePlex

Run Crystal Reports Under 64 Bit IIS.

Go to Tools -> Option then select Project and Solutions -> Web Projects and tick on the option “Use the 64-bit version of IIS Express for web sites and projects”