This blog will walk you through how to create a web API service for the Bold Reports Report Viewer component using the ASP.NET Empty Web Application template in a JavaScript application.
The Report Viewer is a visualization control used to display SSRS RDL and RDLC reports within web applications. It allows you to view RDL and RDLC reports with or without using SSRS.
Create a ASP.NET Web API project
First, open** Visual Studio 2019*, click* Create a new project**, and choose C# from the dropdown.
Select ASP.NET Web Application (.NET Framework) and then click Next.
Change the application name to ReportViewerWebAPI and click Create.
Create a New Project
- Select** Empty, Web API*, and then click **OK*.
Create a Web API
- The web application project is created with the default ASP.NET web template.
Install the NuGet packages
Let’s see how to install the NuGet packages.
Right-click the project in the Solution Explorer tab and choose Manage NuGet Packages.
In the Browse tab, search for the BoldReports.Web package and install it.
Install the BoldReports.Web Package
- The BoldReports.Web package is used to build the server-side implementations.
The following table provides details about the dependency packages and their usage.
. Syncfusion.Pdf.AspNet- Used to export the report to PDF.
. yncfusion.DocIO.AspNet-Used to export the report to Word.
. Syncfusion.XlsIO.AspNet- Used to export the report to Excel.
. Syncfusion.Presentation.AspNet- Used to export the report to PowerPoint.
Newtonsoft.Json- Used to serialize and deserialize data for the Report Viewer. It is a mandatory package for Report Viewer. The package version should be higher than 10.0.1 for .NET Core 2.0, and others should be higher than 9.0.1.
The dependent packages will be installed automatically on installing the BoldReports.Web package.
Add a web API controller
- Right-click the Controller folder in your project and select Add > New Item from the context menu.
Add a Web API Controller
- Select Web API Controller Class from the listed templates, name it ReportViewerController.cs, and then click Add.
Select Web API Controller Class
- In the ReportViewerController, add the following using statement.
using BoldReports.Web.ReportViewer;
- Inherit the IReportController interface and implement the following methods (place the following code in the 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 initializing the report options before the start of processing the report
[NonAction]
public void OnInitReportOptions(ReportViewerOptions reportOption)
{
// You can update report options here
}
// Method that will be called when reported is loaded
[NonAction]
public void OnReportLoaded(ReportViewerOptions reportOption)
{
// You can update report options here
}
}
IReportController interface
We need to declare action methods that are defined in the web API controller for processing RDL, RDLC, and SSRS reports, and for handling resource requests from the Report Viewer control.
The IReportController has the following action method declarations.
GetResource- Used for getting resources for the report.
PostReportAction- Used for posting the request for the reporting process.
OnInitReportOptions- Report initialization method that is triggered when the report begins to be processed.
OnReportLoaded-Report loaded method that is triggered when report and subreport begin loading.
ReportHelper class
This contains helper methods that help process POST or GET requests from the Report Viewer control and returns the response to the Report Viewer control.
GetResource- Returns the report resource for the requested key.
ProcessReport- Processes the report request and returns the result.
Add routing information
To include an action name in the URI, expand the App_Start folder, open the WebApiConfig.cs file, and include the action parameter in the routeTemplate of the Register method.
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 }
);
}
}
The action parameter names the action method on the controller, which is used to map the method in the controller.
Enable cross-origin requests
Browser security prevents Report Viewer from making requests to your web API service when they run in different domains. To allow access to your web API service from a different domain, you must enable cross-origin requests.
Right-click the project in the Solution Explorer tab and choose Manage NuGet Packages.
Search for AspNet.WebApi.Cors NuGet packages and install them in your web API application.
Call EnableCors in WebApiConfig.cs to add cross-origin resource sharing (CORS) services to the Register method. Use the following code to allow any origin requests.
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Add EnableCors
config.EnableCors();
// 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 }
);
}
}
- To specify the CORS policy for the API controller, open the ReportViewerController.cs file and add the following using statement.
using System.Web.Http.Cors;
Then, add the [EnableCors] attribute to the controller class.
[EnableCors(origins: "*", headers: "*", methods: "*")]
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 initializing the report options before the start of processing the report
[NonAction]
public void OnInitReportOptions(ReportViewerOptions reportOption)
{
// You can update report options here
}
// Method that will be called when reported is loaded
[NonAction]
public void OnReportLoaded(ReportViewerOptions reportOption)
{
// You can update report options here
}
}
- Compile and build the application.
You can host this service application on your machine. For example, IIS, IIS Express, or Azure can be used for RDL report processing.
Everything required for report processing is ready.
Let us create a simple JavaScript application to test the service action. You can refer to this blog for information on creating a simple JavaScript application.
Add an already created report
Create a Resources folder in the application’s root path. This is where we will keep the RDL report.
In our example, the sales-order-detail.rdl file is added to the Resources folder. You can get the sales-order-detail.rdl file from GitHub here.
Set the ReportPath and service URL
For testing purposes, set the report service URL below, which is relative to the index.html file.
reportServiceUrl: "./api/ReportViewer",
reportPath: "~/Resources/sales-order-detail.rdl"
Register the valid license token
Open the Global.asax.cs file and enter the following code snippet to register the license token in the Application_Start method.
Bold.Licensing.BoldLicenseProvider.RegisterLicense("YOUR LICENSE TOKEN");
You can download license tokens from the Bold Reports site by using our documentation.
Select Embedded Reporting > Generate License Token and copy the token.
In the Global.asax.cs file, register the license token.
To preview the report, build and run the application. You can see that the sales order detail report is loaded in the Bold Report Viewer.
ASP.NET Web API Reporting Service in Report Viewer
Visit:https://www.boldreports.com/contact/Create an ASP.NET Web API Reporting Service in Bold Reports?
Conclusion
In this blog, we learned how to create a web API service for the Bold Reports Report Viewer component using the ASP.NET Empty Web Application template in a JavaScript application. To explore this capability further, check out our sample reports and Bold Reports documentation.
If you have any questions, please post them in the comments section below. You can also contact us through our contact page, or if you already have an account, you can log in to submit your support question.
Bold Reports now offers a 15-day free trial with no credit card information required. We welcome you to start a free trial and experience Bold Reports for yourself. Give it a try and let us know what you think!
Stay tuned to our official Twitter, Facebook, LinkedIn, Pinterest, and Instagram pages for announcements about upcoming releases.
Top comments (0)