Create ASP.NET Web API service

To create a Web API service for the Bold Reports^® Angular Report Viewer, create an ASP.NET Web Application with the Empty template and Web API, install the BoldReports.Web package, and add a controller that implements IReportController.

To get started quickly with the Web API service for Report Viewer, watch the following video:

1. Start Visual Studio 2022 and click Create new project.
2. Select ASP.NET Web Application (.NET Framework).
3. Change the application name, and then select the required .NET Framework in the drop-down.
4. Choose Empty, Web API and then click OK. Now, the Web application project is created with default ASP.NET Web template.

How do I install the Report Viewer Web API packages?

To install the Angular Report Viewer Web API packages, add the BoldReports.Web NuGet package and its dependency packages to your Web application.

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

   For details about installing and configuring the Report Viewer NuGet packages, see NuGet Packages.

2. Search for BoldReports.Web NuGet packages, and install them in your Web application.

   Package	Purpose
   BoldReports.Web	Builds the server-side implementations.

3. The following table provides details about the dependency packages and its usage.

   Package	Purpose
   Syncfusion.Pdf.AspNet	Exports the report to a PDF.
   Syncfusion.DocIO.AspNet	Exports the report to a Word.
   Syncfusion.XlsIO.AspNet	Exports the report to an Excel.
   Syncfusion.Presentation.AspNet	Exports the report to an PowerPoint.
   Newtonsoft.Json	Serializes and deserialize data for the Report Viewer. It is a mandatory package for Report Viewer, and the package version should be higher than 10.0.1 for NET Core 2.0 and others should be higher than 9.0.1.

How do I configure the Report Viewer Web API controller?

To configure the Web API, add a Web API controller that implements the IReportController interface. The IReportController interface declares the action methods that process RDL, RDLC, and SSRS reports and handle requests from the Angular Report Viewer:

ReportHelper

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

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.

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 BoldReports.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
       [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
       }
   }

Add routing information

1. 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 }
           );
       }
   }

2. Compile and run the Web API service application.

How do I enable cross-origin requests?

To let the Angular Report Viewer call your Web API service from a different domain, enable cross-origin requests with the Microsoft.AspNet.WebApi.Cors package. Browser security prevents Report Viewer from making requests to your Web API service when the two run in different domains.

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.

2. Search for Microsoft.AspNet.WebApi.Cors NuGet packages, and install them in your Web API application.

3. Call EnableCors in WebApiConfig to add CORS services to the Register method. Replace the following code to allow any origin requests.

   public static class WebApiConfig
   {
       public static void Register(HttpConfiguration config)
       {
           // Add Enable Cors
           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 }
           );
       }
   }

4. To specify the CORS policy for API controller, add the [EnableCors] attribute to the controller class. Specify the policy name.

   [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 initialize the report options before start 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
       }
   }