RDLC Reporting on Webpage

In this post we are going to implement Microsoft RDLC reporting using Syncfusion Reporting Tool in web application developed with “ASP.Net Core” & “Angular”.

Download sample angular application from @github to start with the reporting service.

The implementation has multiple part

  • Initialize the report viewer
  • API Service for processing RDLC file.
  • Report Designer

Let’s get started with the front-end package installation in angular6.

Report Viewer:

Open “package.json” file to add below dependencies

"angular2-in-memory-web-api": "0.0.20",
"jsrender": "^0.9.75",
"syncfusion-javascript": "^15.1.33",
"ej-angular2": "^15.1.33"

Open “gulpfile.js” to add below task

gulp.src('./node_modules/angular2-in-memory-web-api/**/*.js')
    .pipe(gulp.dest(root_path.package_lib + 'angular2-in-memory-web-api'));

gulp.src('./node_modules/jsrender/**/*.js')
    .pipe(gulp.dest(root_path.package_lib + 'jsrender'));

gulp.src('./node_modules/syncfusion-javascript/**/*.js')
    .pipe(gulp.dest(root_path.package_lib + 'syncfusion-javascript'));

gulp.src('./node_modules/ej-angular2/**/*.js')
    .pipe(gulp.dest(root_path.package_lib + 'ej-angular2'));

gulp.src('./node_modules/jquery/**/*.js')
    .pipe(gulp.dest(root_path.package_lib + 'jquery'));

gulp.src('./node_modules/jquery-validation/**/*.js')
    .pipe(gulp.dest(root_path.package_lib + 'jquery-validation'));

Go to wwwroot>Config folder to open “systemjs.config” to add library location

//syncfusion bundles
'jquery': 'npm:jquery/dist/jquery.min.js',
'jsrender': 'npm:jsrender/jsrender.min.js',
'jquery-validation': 'npm:jquery-validation/dist/jquery.validate.min.js',
'syncfusion-javascript': 'npm:syncfusion-javascript',
'ej-angular2': 'npm:ej-angular2',

Now add report viewer component

Then add Import component

import { EJAngular2Module } from 'ej-angular2';
import { ReportViewerComponent } from './reportviewer/component';

In route section

const routes: Routes = [
    {
        path: '',
        component: BackofficeComponent,
        children: [
            { path: '', redirectTo: 'dashboard' },
            { path: 'dashboard', component: DashboardComponent },
            { path: 'book/books', component: BooksComponent },
            { path: 'book/authors', component: AuthorsComponent },
            { path: 'book/categories', component: CategoriesComponent },
            { path: 'circulation/issue', component: IssueComponent },
            { path: 'circulation/return', component: ReturnComponent },
            { path: 'system/users', component: UsersComponent, canActivate: [AccessPermission] },
            { path: 'reports/book', component: ReportViewerComponent }
        ]
    }
];

In module section

@NgModule({
    imports: [CommonModule, HttpModule, FormsModule, ReactiveFormsModule, EJAngular2Module.forRoot(), RouterModule.forChild(routes), ChartModule],
    declarations: [
        BackofficeComponent,
        DashboardComponent,
        BooksComponent,
        AuthorsComponent,
        IssueComponent,
        ReturnComponent,
        CategoriesComponent,
        UsersComponent,
        BookReportsComponent,
        ReportViewerComponent
    ],
    providers: [AccessPermission],
    bootstrap: [BackofficeComponent]
})

Go to report viewer component folder open component.ts file to add below code.

import { Component, OnInit, ElementRef } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { Title } from '@angular/platform-browser';
import { DataService } from '../../shared/service';
declare let ej: any;

@Component({
    selector: 'ng-reportviewer',
    templateUrl: './app/backoffice/reportviewer/component.html',
    styleUrls: ['./app/backoffice/reportviewer/component.css'],
    providers: [DataService]
})

export class ReportViewerComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public parameters: any;
    public toolbarSettings: any;
    public exportSettings: any;

    constructor() {
        this.serverUrl = 'http://localhost:50466/api/reportviewer';
        this.serviceUrl = 'http://localhost:50466/api/reportviewer';
        this.reportPath = 'reportfile\rptBooks.rdlc';
        this.toolbarSettings = { items: ej.ReportViewer.ToolbarItems.All & ~ej.ReportViewer.ToolbarItems.Parameters & ~ej.ReportViewer.ToolbarItems.Export };
    }
}

In component.html add report viewer directive

<ej-reportviewer id="reportViewer_Control"
                    [reportServiceUrl]="serviceUrl"
                    [processingMode]="Local"
                    [reportServerUrl]="serverUrl"
                    [reportPath]="reportPath"
                    [dataSources]="reportData"
                    [parameters]="parameters"
                    [toolbarSettings]="toolbarSettings"
                    (reportError)="reportError($event)">
</ej-reportviewer>

Add style for report viewer

ej-reportviewer {
    display: block; height: 480px;
}

In index.html file add below style

<link href="https://cdn.syncfusion.com/14.3.0.52/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />

API Service:

Let’s create the API service for processing the report. First we need to add below packages

Go to “serverapp” folder to add new API controller. As you can see below these are the main function to process RDLC report file.

[HttpPost("[action]")]
public object PostReportAction([FromBody] Dictionary<string, object> jsonResult)
{
    return ReportHelper.ProcessReport(jsonResult, this, this._cache);
}

[ActionName("GetResource")]
[AcceptVerbs("GET")]
public object GetResource(ReportResource resource)
{
    return ReportHelper.GetResource(resource, this, _cache);
}

[HttpPost("[action]")]
public object PostFormReportAction()
{
    return ReportHelper.ProcessReport(null, this, this._cache);
}

public void OnInitReportOptions(ReportViewerOptions reportOption)
{
}

public async void OnReportLoaded(ReportViewerOptions reportOption)
{
}

Full functionality:

[Route("api/[controller]"), EnableCors("AppPolicy")]
[ApiController]
public class reportviewerController : Controller, IReportController
{
    private Report _objreport = null;
    private IMemoryCache _cache;
    private IHostingEnvironment _hostingEnvironment;

    public reportviewerController(IMemoryCache memoryCache, IHostingEnvironment hostingEnvironment)
    {
        _cache = memoryCache;
        _hostingEnvironment = hostingEnvironment;
    }

    [HttpPost("[action]")]
    public object PostReportAction([FromBody] Dictionary<string, object> jsonResult)
    {
        return ReportHelper.ProcessReport(jsonResult, this, this._cache);
    }

    [ActionName("GetResource")]
    [AcceptVerbs("GET")]
    public object GetResource(ReportResource resource)
    {
        return ReportHelper.GetResource(resource, this, _cache);
    }

    [HttpPost("[action]")]
    public object PostFormReportAction()
    {
        return ReportHelper.ProcessReport(null, this, this._cache);
    }

    public void OnInitReportOptions(ReportViewerOptions reportOption)
    {
        string basePath = _hostingEnvironment.WebRootPath;
        List<ReportParameter> parameters = new List<ReportParameter>();
        parameters.Add(new ReportParameter()
        {
            Name = "Title",
            Labels = new List<string>() { "BOOK REPORTS" },
            Values = new List<string>() { "" }
        });
        reportOption.ReportModel.Parameters = parameters;

        FileStream inputStream = new FileStream(basePath + @"\reportfile\rptBooks.rdlc", FileMode.Open, FileAccess.Read);
        reportOption.ReportModel.Stream = inputStream;
        reportOption.ReportModel.ProcessingMode = ProcessingMode.Local;
    }

    public async void OnReportLoaded(ReportViewerOptions reportOption)
    {
        _objreport = new Report();
        List<vmBook> books = new List<vmBook>();
        books = await _objreport.getbookreport();
        reportOption.ReportModel.DataSources.Add(new ReportDataSource { Name = "DataSetBooks", Value = books.ToList() });
    }
}

Report Design:

Add a class library (.Net 4.5) to create RDLC file with dataset like below image.

Then design the RDLC file like below image.

Copy the created RDLC file to wwwroot folder.

Output:

Finally build and run the application, go to report menu to load the report.

Download/clone full source code from @github, Thanks.

References:

  • https://help.syncfusion.com/angular/reportviewer/getting-started
  • https://help.syncfusion.com/angular/reportviewer/report-service-for-dotnet-core
  • https://help.syncfusion.com/angular/reportviewer/toolbar-customization
  • http://shashangka.com/2018/10/22/library-system-using-asp-net-core-2-1-angular6/

Author:

Since March 2011, have 4 years of extensive hands on experience of software development.

4 thoughts on “RDLC Reporting on Webpage”

Leave a Reply

Your email address will not be published. Required fields are marked *