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 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

({
    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 '/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '/forms';
import { Router } from '/router';
import { Title } from '/platform-browser';
import { DataService } from '../../shared/service';
declare let ej: any;

({
    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

Add style for report viewer

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

In index.html file add below style

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 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 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 parameters = new List();
        parameters.Add(new ReportParameter()
        {
            Name = "Title",
            Labels = new List() { "BOOK REPORTS" },
            Values = new List() { "" }
        });
        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 books = new List();
        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 , 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
• https://shashangka.com/2018/10/22/library-system-using-asp-net-core-2-1-angular6/