Search results

Display ssrs rdl report in Syncfusion ASP.NET Web Forms Report Viewer

This section explains you the steps required to create your first ASP.NET Web Forms reporting application to display already created SSRS RDL report in Syncfusion ASP.NET Web Forms Report Viewer without using a Report Server.

Create ASP.NET Web Forms application

  1. Open Visual Studio 2017, click the File menu, go to New, and then select Project.

  2. Go to Installed > Visual C# > Web, and then select the required .NET Framework in the drop-down.

  3. Select ASP.NET Web Application (.NET Framework), change the application name, and then click OK. ASP.NET Web Forms application project template

  4. Choose Web Forms, Web API and then click OK. Select Web API and Web Forms options

Configure Report Viewer in an application

  1. Right-click the project or solution in the Solution Explorer tab, and choose Manage NuGet Packages. Alternatively, go to Tools > NuGet Package Manager > Manage NuGet Packages for Solution menu command.

    Refer to the NuGet Packages to learn more details about installing and configuring Report Viewer NuGet packages.

  2. Search for Syncfusion.Reporting.Web and Syncfusion.Reporting.WebForms NuGet packages, and install them in your Web Forms application. The following table provides details about the packages and their usage.

    Package Purpose
    Syncfusion.Reporting.Web Creates Web API service to process the reports.
    Syncfusion.Reporting.WebForms Contains tag helpers to create client-side Report Viewer control.
  3. Open the Web.config file, and add the Syncfusion.Reporting.WebForms assembly reference to the <system.web.pages.controls> element with SF tag prefix as in the following code.

    <configuration>
        ....
        ....
        <system.web>
            ....
            <pages>
            ....
            <controls>
                <add assembly="Syncfusion.Reporting.WebForms" namespace="Syncfusion.Reporting.WebForms" tagPrefix="SF" />
                ....
            </controls>
            </pages>
        </system.web>
        ....
        ....
    </configuration>

Refer scripts and CSS

The Syncfusion.Reporting.JavaScript contains reporting components scripts and style sheets. It is a dependent package for Syncfusion.Reporting.WebForms. When installing the Syncfusion.Reporting.WebForms, the Syncfusion.Reporting.JavaScript package is also installed. The scripts and styles required to Report Viewer are added into the Scripts and Content folders in your application.

  1. The following scripts and style sheets are mandatorily required to use the Report Viewer.

    • ej.reports.all.min.css
    • jquery-1.10.2.min.js
    • ej.reporting.common.min.js
    • ej.reporting.widgets.min.js
    • ej.chart.min.js - Renders the chart item. Add this script, only if your report contains the chart report item.
    • ej.lineargauge.min.js and ej.circulargauge.min.js - Render the gauge item. Add these scripts only if your report contains the gauge report item.
    • ej.map.min.js - Renders the map item. Add this script only if your report contains the map report item.
    • ej.report-viewer.min.js
  2. Open the Default.aspx page.

  3. Add the listed references in the same order given in the above list. You can replace the following code in the Default.aspx page.

    <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <link href="Content/reports/material/ej.reports.all.min.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="Scripts/reports/common/ej.reporting.common.min.js"></script>
        <script src="Scripts/reports/common/ej.reporting.widgets.min.js"></script>
    
        <!--Renders the chart item. Add this script, only if your report contains the chart report item.-->
        <script src="Scripts/reports/data-visualization/ej.chart.min.js"></script>
    
        <!--Render the gauge item. Add these scripts only if your report contains the gauge report item.-->
        <script src="Scripts/reports/data-visualization/ej.circulargauge.min.js"></script>
        <script src="Scripts/reports/data-visualization/ej.lineargauge.min.js"></script>
    
        <!--Renders the map item. Add this script only if your report contains the map report item.-->
        <script src="Scripts/reports/data-visualization/ej.map.min.js"></script>
    
        <!-- Report Viewer component script-->
        <script src="Scripts/reports/ej.report-viewer.min.js"></script>
    </asp:Content>

    To learn more about rendering a report with data visualization report items, refer to the how to render data visualization report items section.

Initialize Report Viewer

Initialize the Report Viewer as shown in the following code sample in the Default.aspx page.

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <div style="height: 650px;width: 950px;min-height:404px;">
        <SF:ReportViewer runat="server" ID="viewer">
        </SF:ReportViewer>
    </div>
</asp:Content>

Add already created reports

The Report Viewer is only for rendering the reports. You must use a report generation tool to create a report. To learn more about creating new reports, refer to the create RDL report section.

  1. Create a folder Resources in your application to store the RDL reports.

  2. Add already created reports to the newly created folder.

    In this tutorial, the sales-order-detail.rdl report is used, and it can be downloaded from here. You can add the reports from Syncfusion installation location. For more information, refer to samples and demos section.

Configure Web API

The interface IReportController has declaration of action methods that are defined in the Web API Controller for processing the RDL, RDLC, and SSRS reports and for handling request from the Report Viewer control. The IReportController has the following action methods declaration:

Methods Description
PostReportAction Action (HttpPost) method for posting the request in report process.
OnInitReportOptions Report initialization method that occurs when the report is about to be processed.
OnReportLoaded Report loaded method that occurs when the report and sub report start loading.
GetResource Action (HttpGet) method to get resource for the report.

ReportHelper

The class ReportHelper contains helper methods that help to process a Post or Get request from the Report Viewer control and return the response to the Report Viewer control. It has the following methods:

Methods Description
GetResource Returns the report resource to the requested key.
ProcessReport Processes the report request and returns the result.

Add Web API Controller

  1. Right-click Controller folder in your project and select Add > New Item from the context menu.

  2. Select Web API Controller Class from the listed templates and name it as ReportViewerController.cs Provide controller name

  3. Click Add.

    While adding Web API Controller class, name it with the suffix Controller that is mandatory.

  4. Open the ReportViewerController and add the following using statement.

    using Syncfusion.Reporting.Web.ReportViewer;
  5. Inherit the IReportController interface, and implement its methods (replace the following code in newly created Web API controller).

    public class ReportViewerController : ApiController, IReportController
    {
        // Post action for processing the RDL/RDLC report
        public object PostReportAction(Dictionary<string, object> jsonResult)
        {
            return ReportHelper.ProcessReport(jsonResult, this);
        }
    
        // Get action for getting resources from the report
        [System.Web.Http.ActionName("GetResource")]
        [AcceptVerbs("GET")]
        public object GetResource(string key, string resourcetype, bool isPrint)
        {
            return ReportHelper.GetResource(key, resourcetype, isPrint);
        }
    
        // Method that will be called when initialize the report options before start processing the report
        public void OnInitReportOptions(ReportViewerOptions reportOption)
        {
            // You can update report options here
        }
    
        // Method that will be called when reported is loaded
        public void OnReportLoaded(ReportViewerOptions reportOption)
        {
            // You can update report options here
        }
    }

Add routing information

To configure routing to include an action name in the URI, open the WebApiConfig.cs file and change the routeTemplate in the Register method as follows,

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services

        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
        name: "DefaultApi",
        routeTemplate: "api/{controller}/{action}/{id}",
        defaults: new { id = RouteParameter.Optional }
        );
    }
}

Set report path and service URL

To render the reports available in the application, set the ReportPath and ReportServiceUrl properties of the Report Viewer. You can replace the following code in your Report Viewer page.

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <link href="Content/reports/material/ej.reports.all.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="Scripts/reports/common/ej.reporting.common.min.js"></script>
    <script src="Scripts/reports/common/ej.reporting.widgets.min.js"></script>
    <script src="Scripts/reports/ej.report-viewer.min.js"></script>
    <div style="height: 650px;width: 950px;min-height:404px;">
        <SF:ReportViewer runat="server" ID="viewer" ReportPath="~/Resources/sales-order-detail.rdl"
            ReportServiceUrl="/api/ReportViewer">
        </SF:ReportViewer>
    </div>
</asp:Content>

The report path property is set to the RDL report that is added to the project Resources folder.

Preview the report

Build and run the application to view the report output in the Report Viewer as displayed in the following screenshot. Sales Order Detail Report

See Also

Render report with data visualization report items

Create RDLC report