WebForms ReportViewer control can be used to render reports deployed to SQL Server Reporting Servcies (SSRS) Report Server or reports which exists in local machine inside a web application. In this post, let’s see how we can use the WebForms ReportViewer control inside a AngularJS Single Page Application to render reports deployed in SSRS Report Server.
I have a SPA running with Visual Studio created using one of my previous posts “Creating an Empty ASP.NET Project Powered by AngularJS using Visual Studio”. And I have set of reports deployed to SSRS Report Server already (Here I am not going to explain how you can deploy reports to SSRS Report Server). Let’s extend the the same application to include the ReportViewer inside Home page. My plan is to add a ReportViewer control inside ASP.NET Web Form and embed that particular page inside home page using an iframe.
So for that let’s start by adding a WebForm to the project. In my example, I am creating a folder inside App folder named pages and adding the WebForm there and naming it as Viewer.aspx.
Now on the designer of Viewer.aspx, I am adding a ReportViewer control, from the Visual Studio Toolbox.
I have done some styling here, you can also apply whatever the styles you need. Also I have added a script manager, because the ReportViewer web control requires a script manager on the web form. Now inside the Viewer.aspx code behind, we need to add the code for processing the report.
Here the page will receive a URL parameter through a query string which specifies the report id to render. Basically the report id would be the report name which is deployed to SSRS Report Server. And I am retrieving following values from the web.config file.
You can find your ReportServerUrl from the SQL Server Reporting Services Configuration Manager.
|SQL Server Reporting Services Configuration Manager|
For ReportServerCredentials, I have the following the class ReportCredentials which is an implementation of IReportServerCredentials.
Here since I am not using any impersonation, ImpersonationUser is null and since I am not using forms authentication GetFormsCredentials method is returning false.
Next step is to show the list of reports and embed the Viewer.aspx web form inside the html page.
Here I have set of reports where I am ng-repeating and when clicking on an item, I am invoking the openReport method. Basically it will assign the report id to the model variable which I am passing as a query parameter to Viewer.aspx. On click on report items, it will make the iframe source different, which will load the particular report.
Even you can get the available reports by calling the SSRS Report Server Web Service.
I have the following directive as well, to make Strict Contextual Escaping for the web forms absolute url.
So that’s it. Now let’s run the application.