Getting Started with Telerik Reporting and ASP.NET 5

Now that the Visual Studio 2015 Preview is released and available for everyone to test the new environment and the next version of ASP.NET 5, let’s see how we can build a new application and add reporting functionality there.

To make Telerik Reporting support the new framework, we released a preview of the REST Reporting service for ASP.NET 5 with the Q3 2014 SP1 release. There is a restriction though: only the full .NET CLR is supported, which means that the application can be hosted only on a Windows machine.

Getting Started with ASP.NET 5

In case you are not familiar with ASP.NET 5, check it out on the official page.

Creating a New Project

Open Visual Studio 2015 Preview and create a new ASP.NET 5 starter project. To do so from the File menu, select New > Project.

In the New Project dialog, click Templates > Visual C# > Web, and select the ASP.NET Web Application project template. Choose a name for the project and click OK.

Then choose ASP.NET 5 Starter Web template from the next wizard, as shown on the image below:

Getting Ready to Add Telerik Reporting

You will have to prepare the project for Telerik Reporting. First open the project.json file and delete "аspnetcore50" under the targeted frameworks. The frameworks property should look like this:

You have to do so since Telerik Reporting supports only the full .NET framework. Leaving aspnetcore50 will force Visual Studio to build your project as if it will run in both modes, and ultimately you will not be able to start it.

Now that you have set up the project, let’s move on to setting up the local NuGet feed.

Adding the NuGet Packages

ASP.NET 5 does not support references to assemblies, but instead works with references to NuGet packages. To make the Reporting REST service work, you will have to create a local feed, add the NuGet packages there and then reference them in your project.

To create a local NuGet feed open the Package Manager Settings in Visual Studio - Tools > NuGet Package Manager and select Package Sources.

In the upper right corner, press the plus sign, and enter the path to your desired folder and a name for the feed. For a more detailed explanation of how to host your own NuGet feeds, please check this help article from the NuGet docs.

If you still don’t have the Telerik Reporting NuGet packages on your machine, get them from Your Account > Products > Reporting > Download Installer and other resources > MVC6 NuGet Installation (under Other Setup Files).

Once you have set up your local feed paste the Telerik.Reporting.Services.Mvc6.x.x.x.x and Telerik.Reporting.x.x.x.x (where x.x.x.x is the release version, e.g. 8.2.14.1204) packages to the local NuGet folder.

Setting up the REST service

In your project, right-click References, choose Manage NuGet packages and from the drop down menu, select your local feed. Finally, install the Telerik.Reporting.Services.Mvc6 NuGet package, which is necessary for the Telerik Reporting REST Service. Note that both Telerik Reporting NuGet packages must be copied to your feed, but you only need to install Telerik.Reporting.Services.Mvc6.

Once the package is referenced, a reports controller has to be implemented. Right-click on the Controllers folder and add a new controller. Like in the previous versions of the service you will have to inherit the ReportsControllerBase class and override two methods. This is how a basic implementation of the controller should look:

By overriding the CreateReportResolver and CreateStorage methods, you are essentially setting up the reports location and the type of the storage media used by the reporting engine.

Once the controller is set up, you will have to make one additional modification to the project. Open the Startup.cs file and find services.AddMvc(); call. Currently you will have to customize the output formatter so the Telerik Reporting REST service can work properly. To do so, you will have to remove the default JsonOutputFormatter and add the Telerik Reporting JsonOutputFormatter. Simply copy the following code in place of the services.AddMvc(); snippet:

For more information regarding the formatters in ASP.NET 5, you can check this help article.

You are almost done. Finally, you will have to add the HTML5 Report Viewer that will be the client for the service and that will allow you to actually view reports.

Adding the HTML5 Report Viewer

Now, you have to prepare the project for the HTML5 Report Viewer. First add the script and style files for the viewer. To do so, navigate to {Telerik Reporting installation path}/Html5 and copy the ReportViewer folder. Then paste that folder into wwwroot folder of the project:

To set up a folder for the reports, right-click on wwwroot and select Add > New Folder. Name the folder Reports and add to it some sample .trdx reports. You can find sample reports in {Telerik Reporting installation path}/Report Designer/Examples.

Now you will have to add a view that contains the report viewer. Open the Views folder, right-click on the Home folder and choose Add > New Item, then add a new MVC View page named Reports.

Here you have to add the HTML5 Report Viewer. It’s actually the same as adding it in previous versions. Add references to jQuery, Kendo UI and the HTLM5 Report Viewer. For a detailed explanation, you can check the Manual Setup help article in the online documentation. The only difference is setting the paths; whenever you need to set a path you will have to use Url.Content helper, like this:

instead of simply pasting the path.

The complete Reports view (Reports.cshtml) should look like this:

Once you are done with the view, open _Layout.cshtml, located in Views/Shared. Add an ActionLink to the newly created Reports view like this (the link will be added to the navigation bar):

Don't forget to add the respective action in the HomeController, as well:

Finally run the project and navigate to the Reports page:

Final Thoughts

Now that you have a working ASP.NET 5 application with the Telerik Reporting HTML5 Report Viewer, you are free to use it wherever you want: host it in IIS, deploy it to Microsoft Azure or self-host it.

Ivan Stefanov
Software Engineer, Telerik Reporting Team