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.
<!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.
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using Syncfusion.JavaScript
@addTagHelper "*, Syncfusion.EJ"
Control Initialization
You can use the
@{
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.
<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.
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.