Getting Started with ASP.NET Core Application

This section describes how to embed the Report Server report with ASP.NET core application using ReportViewer.

Environment setup

Refer the installation page to know more about the basic steps to configure the Syncfusion components to use with ASP.NET Core application.

NOTE

NuGet package reference will be mostly preferred with ASP.NET Core development to setup the environment without installation, if you missed to explore then refer to the nuget-package-manager-settings to configure the Syncfusion NuGet source.

NOTE

Currently, we have not published the online NuGet feed for ReportPlatform ASP.NET Core instead we can use the Essential JS-1 ASP.NET Core online NuGet package feed.

Adding References, Scripts, Styles and Control in cshtml Page

Add the References, scripts, styles that are required for the ReportViewer.

Add Scripts and Styles

Create a new folder say, report under wwwroot folder.

NOTE

Default project template consists of the wwwroot folder.

Copy the required scripts, themes and fonts into wwwroot\report folder in your new ASP.NET Core Web application for rendering the ReportViewer.

These can be availed from the Report Platform SDK build installed location mentioned below:
{Installed location}\Syncfusion\Report Platform SDK\Javascript\assets

Now, refer to the necessary scripts and CSS files in your _Layout.cshtml page.

  • cshtml
    • <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AspNetCore - ReportViewer</title>
	   <link href="https://cdn.syncfusion.com/reportplatform/3.2.0.40/js/themes/flat-azure/ej.reportviewer.all.min.css" rel="stylesheet"/>
       <script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
       <script src="https://cdn.syncfusion.com/reportplatform/3.2.0.40/js/scripts/web/ej.reportviewer.all.min.js" type="text/javascript"></script>
</head>
<body style="height:100%;width:100%;padding:0;">
    <div class="container body-content" style="height:100%;width:100%;">
        @RenderBody()
    </div>
    @RenderSection("scripts", required: false)
</body>
</html>

    NOTE

    ej-script-manager must be defined at the bottom of the _Layout.cshtml page.

    Add References

    You should add the following packages for the report viewer:

    Package Purpose
    Syncfusion.EJ Builds the report viewer controls with the tag helper.
    Syncfusion.EJ.ASPNET.Core Builds the report viewer controls with the tag helper.

    NOTE

    You can get the above NuGet package from the installed location {Installed location}\Syncfusion\Report Platform SDK\Nuget Packages.

    Tag helper

    It is necessary to define the following namespace within the _viewImports.cshtml page to initialize the report viewer component with the tag helper support.

  • cshtml
    • @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
    @using Syncfusion.JavaScript
    @addTagHelper "*, Syncfusion.EJ"

    Control Initialization

    You can use the tag to add the report viewer control. For an example, the Index.cshtml page can be replaced with the following code by removing the existing codes to add the report viewer.

  • cshtml
    • @{
    ViewData["Title"] = "Home Page";
}

<div style="height: 525px;width: 100%;">
    <ej-report-viewer id="reportviewer1" />
</div>

    Load Report Server Report

    We have to use built-in Report Server service to load the Report Server reports along with server capabilities in ReportViewer. You have to use report-path, report-service-url and service-authorization-token properties with ReportViewer as like following to show the Report Server report within application.

  • html
    • <ej-report-viewer id="reportviewer" report-service-url="http://reportserver.syncfusion.com/ReportService/api/viewer" report-path="/Sample Reports/Company Sales" service-authorization-token="@ViewBag.ServiceAuthorizationToken"  ></ej-report-viewer>
<ej-script-manager></ej-script-manager>

    NOTE

    In case, if we have to load the reportPath using guid instead of report location then we have a support to set guid of the report in report-path as like as ‘report-path=”91f24bf1-e537-4488-b19f-b37f77481d00”’.

    Service Authorization

    In order to use the Report Server built-in report service, which need to be authenticated using Report Server authorization token. So, we have to set service-authorization-token by getting the authorization token from server like below.

  • c#
    • using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using System.Net.Http;

namespace ReportViewerViewerAspNetCoreDemo_2017.Controllers
{
    public partial class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.ServiceAuthorizationToken = this.GenerateToken("http://reportserver.syncfusion.com/", "guest", "demo");
            return View();
        }

        public IActionResult Error()
        {
            return View();
        }

        public string GenerateToken(string serverUrl, string userName, string password)
        {
            using (var client = new HttpClient())
            {
                client.BaseAddress = new Uri(serverUrl);
                client.DefaultRequestHeaders.Accept.Clear();

                var content = new FormUrlEncodedContent(new[]
                {
                new KeyValuePair<string, string>("grant_type", "password"),
                new KeyValuePair<string, string>("username", userName),
                new KeyValuePair<string, string>("password", password)
                  });

                var result = client.PostAsync("/api/Token", content).Result;
                string resultContent = result.Content.ReadAsStringAsync().Result;
                var token = JsonConvert.DeserializeObject<Token>(resultContent);

                return token.token_type + " " + token.access_token;
            }
        }
    }

    public class Token
    {
        public string access_token { get; set; }

        public string token_type { get; set; }

        public string expires_in { get; set; }

        public string userName { get; set; }

        public string serverUrl { get; set; }

        public string password { get; set; }
    }
}

    Following screenshot displays reports from Report Server with help of configured external Reporting Server.

    Report Viewer showcases the report from Report Server with the help of external Reporting Server