How to integrate Infragistics Reporting in WEB Applications

[Infragistics] Mihail Mateev / Wednesday, November 23, 2011

Infragistics offers the amazing NetAdvantage Reporting in the new 11.2 Release.  This is the perfect tool to create reports for XAML (Silverlight and WPF).In fact Infragistics Reporting is not only right solution for generating reports in XAML applications. It can be integrated very easily into WEB applications. 

In this article you will learn how to integrate reports created with NetAdvantage Reporting in ASP.Net applications. The demo application will show you how to integrate Silverlight client Report Viewer in an existing ASP.Net project. You will also learn how to generate server-side reports without Report Viewer using the Report Exporter. This approach can be used for integration into any WEB applications without any need for a Silverlight plug-in. Example application will demonstrate also how to pass parameters to the integrated Report in all  approaches.

What do you need to start:

We will discuss these steps in integrating Reporting

  • Create an Infragistics Report
  • Create a Silverlight application with a report viewer to visualize the reports
  • Server-side export reports using the report exporter.
  • Passing parameters for report generation

 

Demo application

For a basic application, to integrate Infragistics Reporting project will use ASP.Net, using WCF RIA Services.

Create in the Visual Studio 2010 new ASP.NET Web Application and give it a  name “IgReportingWebIntegration”.

IgReportWebIntegration_Pic01[1]

Add to the WEB project ADO.NET Entity Data Model and name it "NorthwindModel"

 IgReportWebIntegration_Pic02[1]

Include in the model tables Customers, Categories and Products (in this article we will use only Customers).

IgReportWebIntegration_Pic03[1]

Add in the project a  Domain Service Class and name it "DomainService1"

Modify the code in DomainService1.cs : add a new method GetCustomersByCountry  to be possible to filter customers by country.

   1: public IQueryable<Customer> GetCustomersByCountry(string country)
   2: {
   3:  
   4:     if (country == null || country.Trim().Equals(string.Empty))
   5:     {
   6:         return GetCustomers(); 
   7:  
   8:     }
   9:  
  10:     return GetCustomers().Where(c => c.Country == country);
  11:  
  12: }

 

Add a new Web Form, named “Customers” and create DomainDataSource and GridView instances  inside it. Below is a code in the .aspx file.

   1: <asp:Content runat="server" ID="Main" ContentPlaceHolderID="MainContent">
   2:     <cc1:DomainDataSource ID="DomainDataSource2" runat="server" 
   3:         DomainServiceTypeName="IgReportWebIntegration.DomainService1" 
   4:         QueryName="GetCustomersByCountry">
   5:         <QueryParameters>
   6:         <asp:ControlParameter Name="country" ControlID="tbCountry"
   7:              PropertyName="Text"  Type="String" />
   8:          </QueryParameters>
   9:     </cc1:DomainDataSource>
  10:     <p>
  11:         &nbsp;</p>
  12:  
  13:     <table>
  14:     <tr>
  15:     <td>
  16:         Country:
  17:     </td>
  18:     <td>
  19:        <asp:TextBox ID="tbCountry"  runat="server" Width="240px" Text=""></asp:TextBox>
  20:     </td>
  21:     <td>
  22:         <asp:Button ID="Button2" runat="server" Text="FiIlter" Width="80px"  />
  23:     </td>
  24:     </tr>
  25:         
  26:     <tr>
  27:     <td colspan=3>
  28:         <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
  29:     DataKeyNames="CustomerID" DataMember="DefaultView" 
  30:     DataSourceID="DomainDataSource2" EditIndex="0" SelectedIndex="0">
  31:         <Columns>
  32:             <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" 
  33:                 SortExpression="CompanyName" />
  34:             <asp:BoundField DataField="ContactName" HeaderText="ContactName" 
  35:                 SortExpression="ContactName" />
  36:             <asp:BoundField DataField="ContactTitle" HeaderText="ContactTitle" 
  37:                 SortExpression="ContactTitle" />
  38:             <asp:BoundField DataField="Address" HeaderText="Address" 
  39:                 SortExpression="Address" />
  40:             <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
  41:             <asp:BoundField DataField="Country" HeaderText="Country" 
  42:                 SortExpression="Country" />
  43:             <asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
  44:         </Columns>
  45:     </asp:GridView>
  46:     </td>
  47:     </tr>
  48:     </table>
  49:  
  50:     <asp:Button ID="Button1" runat="server" Text="Export" onclick="Button1Click"/>
  51: </asp:Content>

 

Run the demo application. Navigate to customers page and filter data to show only customers from Germany.

IgReportWebIntegration_Pic05[1]

IgReportWebIntegration_Pic06[1]

Create an Infragistics Report

Add two new Infragistics Report instances to the WEB project and name it NwReport ans NwReport2. NwReport will use data from WCF RIA Services and NwReport2 will use data directly from a database (SQL Server). The second report will use parameters in its query string.

IgReportWebIntegration_Pic08[1]

Format the report to display customers.

IgReportWebIntegration_Pic08a[1]

Add a parameter, named “Country” in NwReport2. Default value is “%” to be possible to select all customers.

IgReportWebIntegration_Pic11[1]

Modify the query string to use in the WHERE clause Country parameter.

IgReportWebIntegration_Pic12[1]

   1: SELECT * FROM dbo.Customers where Customers.Country LIKE @Country

 

Create a Silverlight application with a report viewer to visualize the reports

Add a Silverlight application to the WEB solution.

IgReportWebIntegration_Pic07[1]

In the WEB project are added two files IGReportingAppTestPage.aspx and IGReportingAppTestPage.html, that includes the Silverlight application. You can use either of these files

IgReportWebIntegration_Pic07a[1]

Add a XamReportViewer control in the Silverlight application.

IgReportWebIntegration_Pic09[1]

Set RenderSettings property for the report viewer. Use NwReport.igr as a report and NwReportService.svc as a WEB service (one web service could work with many reports).

 

 

 

   1: <ig:XamReportViewer   Margin="20" Name="xamReportViewer1">
   2:     <ig:XamReportViewer.RenderSettings>
   3:         <ig:ServerRenderSettings DefinitionUri="/IgReportWebIntegration;component/NwReport.igr" ServiceEndpointUri="http://localhost:12931/NwReportService.svc" />
   4:     </ig:XamReportViewer.RenderSettings>
   5: </ig:XamReportViewer>

 

In the master page add a menu item to navigate to IGReportingAppTestPage.aspx

   1: <asp:MenuItem NavigateUrl="~/IGReportingAppTestPage.aspx" Text="Report" />

 

Run the application and navigate to the Silverlight application using “Report” option from the menu.

IgReportWebIntegration_Pic10[1]

   1: <asp:MenuItem NavigateUrl="~/IGReportingAppTestPage.aspx" Text="Report" />

 

Server-side export reports using the report exporter

Add a new Web Form, named “CustomersReport” and add in the master page add a menu item to navigate to CustomersReport.aspx

 

   1: <asp:MenuItem NavigateUrl="~/CustomersReport.aspx" Text="Customers Report" />

 

Implement in CustomersReport.aspx.cs method Export()… where to use report exporter via ServerExporterFactory.CreateExporter(…) method. This method saves the generated report in PDF format.

Add method Export() in the Page_Load event handler.

   1: public partial class CustomersReport : System.Web.UI.Page
   2: {
   3:     #region Constructors
   4:     protected void Page_Load(object sender, EventArgs e)
   5:     {
   6:         Export();
   7:     }
   8:     #endregion //Constructors
   9:  
  10:     #region Methods
  11:  
  12:     #region Export
  13:     protected void Export()
  14:     {
  15:         var reportUri = new Uri("IgReportWebIntegration;component/NwReport.igr", UriKind.Relative);
  16:         using (var exporter = ServerExporterFactory.CreateExporter(reportUri))
  17:         {
  18:             var memoryStream = new MemoryStream();
  19:             exporter.Export(memoryStream, "PDF");
  20:             SendStreamToResponse(memoryStream, "Report1.pdf", "application/pdf");
  21:             memoryStream.Close();
  22:         }
  23:     }
  24:     #endregion //Export
  25:  
  26:     #region SendStreamToResponse
  27:     private void SendStreamToResponse(MemoryStream stream, string fileName, string contentType)
  28:     {
  29:         var reportBuffer = stream.ToArray();
  30:         Response.AddHeader("Content-Length", reportBuffer.Length.ToString());
  31:         Response.ContentType = contentType;
  32:         Response.AddHeader("Expires", "0");
  33:         Response.AddHeader("Cache-Control", "must-revalidate, post-check=0, pre-check=0");
  34:         Response.AddHeader("Pragma", "public");
  35:         Response.AddHeader("Content-Disposition", "attachment; filename=" + fileName);
  36:         Response.BinaryWrite(reportBuffer);
  37:         Response.Flush();
  38:         Response.End();
  39:     }
  40:     #endregion //SendStreamToResponse
  41:  
  42:     #endregion //Methods
  43: }

 

 

Run the application and select from its menu “Customers Report” option.

IgReportWebIntegration_Pic15[1]

Application will export report in PDF format. This approach requires only server side references. You could use it in any WEB application where could use .NET Framework on the server.

IgReportWebIntegration_Pic15b[1]

 

Passing parameters for report generation

It is a very common case is when you use parameters to create the reports to filter data in the reports. We will use the same value, used to filter data from WCF RIA Services

 

Implement in Customers.aspx.cs file a method Export() used to export a report using a parameters.

The most important here is to add a parameter list to the report exporter.

   1: var reportUri = new Uri("IgReportWebIntegration;component/NwReport2.igr", UriKind.Relative);
   2:             using (var exporter = ServerExporterFactory.CreateExporter(reportUri))
   3:             {
   4:                 var memoryStream = new MemoryStream();
   5:  
   6:  
   7:                 // Set parameters in exporter
   8:                 var myquote = new Infragistics.Reports.ParameterValue();
   9:  
  10:                 // Parameter Name used in the Report Design (.igr file)
  11:                 myquote.Name = "Country";
  12:  
  13:                 // Parameter Value
  14:                 myquote.Value = tbCountry.Text;
  15:  
  16:                 if (tbCountry.Text.Equals(String.Empty))
  17:                 {
  18:                     //Select all items if a parameter value is not set 
  19:                     myquote.Value = "%";
  20:                 }
  21:  
  22:                 IEnumerable<ParameterValue> parameterList = new List<ParameterValue>() { myquote };
  23:  
  24:                 exporter.Parameters = parameterList;
  25:  
  26:                 exporter.Export(memoryStream, "PDF");
  27:                 SendStreamToResponse(memoryStream, "Report2.pdf", "application/pdf");
  28:                 memoryStream.Close();

 

The whole code of Customers.aspx.cs  is shown below.

   1: #region Methods
   2:  
   3:  #region Export
   4:  protected void Export()
   5:  {
   6:      var reportUri = new Uri("IgReportWebIntegration;component/NwReport2.igr", UriKind.Relative);
   7:      using (var exporter = ServerExporterFactory.CreateExporter(reportUri))
   8:      {
   9:          var memoryStream = new MemoryStream();
  10:  
  11:  
  12:          // Set parameters in exporter
  13:          var myquote = new Infragistics.Reports.ParameterValue();
  14:  
  15:          // Parameter Name used in the Report Design (.igr file)
  16:          myquote.Name = "Country";
  17:  
  18:          // Parameter Value
  19:          myquote.Value = tbCountry.Text;
  20:  
  21:          if (tbCountry.Text.Equals(String.Empty))
  22:          {
  23:              //Select all items if a parameter value is not set 
  24:              myquote.Value = "%";
  25:          }
  26:  
  27:          IEnumerable<ParameterValue> parameterList = new List<ParameterValue>() { myquote };
  28:  
  29:          exporter.Parameters = parameterList;
  30:  
  31:          exporter.Export(memoryStream, "PDF");
  32:          SendStreamToResponse(memoryStream, "Report2.pdf", "application/pdf");
  33:          memoryStream.Close();
  34:      }
  35:  }
  36:  #endregion //Export
  37:  
  38:  #region SendStreamToResponse
  39:  private void SendStreamToResponse(MemoryStream stream, string fileName, string contentType)
  40:  {
  41:      var reportBuffer = stream.ToArray();
  42:      Response.AddHeader("Content-Length", reportBuffer.Length.ToString());
  43:      Response.ContentType = contentType;
  44:      Response.AddHeader("Expires", "0");
  45:      Response.AddHeader("Cache-Control", "must-revalidate, post-check=0, pre-check=0");
  46:      Response.AddHeader("Pragma", "public");
  47:      Response.AddHeader("Content-Disposition", "attachment; filename=" + fileName);
  48:      Response.BinaryWrite(reportBuffer);
  49:      Response.Flush();
  50:      Response.End();
  51:  }
  52:  #endregion //SendStreamToResponse
  53:  
  54:  #endregion //Methods
  55:  
  56:  #region EventHandlers
  57:  
  58:  #region Button1Click
  59:  protected void Button1Click(object sender, EventArgs e)
  60:  {
  61:      Export();
  62:  }
  63:  #endregion //Button1Click
  64:  
  65:  #endregion //EventHandlers

 

Run the application and filter customers by country for France. Look at the results.

  

IgReportWebIntegration_Pic16[1]

Export data. The generated PDF contains only customers from France.

IgReportWebIntegration_Pic17[1] 

 

Enjoy! Infragistics Reporting could be used almost anywhere. You could integrate it easy in different WEB applications.You could add Infragistics reports at a later stage to your web sites.

 

Source code you could find here: