Getting Started with JavaScript Application
This section describes how to embed the Report Server report with JavaScript application using ReportViewer.
Project Creation
Create a new ASP.NET Empty Web application project by selecting the WEB category from the listed project template in Microsoft Visual Studio IDE.
Create HTML Page
To create a new Web Forms in the application follow the below steps.
-
Right-Click on the project and select Add.
-
Click New Item and select HTML page from the listed templates.
-
Name the page as Default.html and click OK.
Adding References, Scripts, Styles and Control in HTML Page
Add the References, scripts, styles that are required for the ReportViewer.
Add References
-
In the Solution Explorer, right-click the References folder and then click Add Reference.
-
Add the following assemblies and click OK.
- System.Web.Routing
- System.Web.Http
- System.Web.WebHost
- System.Net.Http
- System.Net.Http.WebRequest
- System.Net.Http.Formatting
- Syncfusion.Compression.Base
- Syncfusion.Linq.Base
- Syncfusion.EJ.ReportViewer
- Syncfusion.Pdf.Base
- Syncfusion.XlsIO.Base
- Syncfusion.DocIO.Base
- Syncfusion.Shared.Wpf
- Syncfusion.Chart.Wpf
- Syncfusion.Gauge.Wpf
- Syncfusion.SfMaps.Wpf
NOTE
You can get the above assemblies from the installed location %localappdata%\Syncfusion\ReportsSDK\Samples\Common\Assemblies
Refer System.Web.Http, System.Web.Http.WebHost, System.Net.Http.WebRequest and System.Net.Http.Formatting assemblies from ASP.NET WebApi NuGet package.
Add Scripts and Styles
Add the script files and CSS files in the <title> tag of the default.html page.
<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>
NOTE
Use the above code example while adding scripts and styles
Refer the themes and scripts from the installed location %localappdata%\Syncfusion\ReportsSDK\Samples\Common\Html
Control Initialization
Initialize ReportViewer by using the following code example in the <body> tag of the Default.html page.
<div id="container" style="position: absolute; height: 100%; width: 100%;"></div>
<script type="text/javascript">
$(function () {
$("#container").ejReportViewer(
{
});
});
</script>
Load Report Server Report
ReportViewer supports to load RDL files from Report Server. The following steps help you to load reports from Report Server.
Set the Report Server reportServiceUrl
, serviceAuthorizationToken
and reportPath
in the ReportViewer properties.
<div id="container" style="position: absolute; height: 100%; width: 100%;"></div>
<script type="text/javascript">
$(function () {
var dataValue = "";
var apiRequest = new Object();
apiRequest.password = "demo";
apiRequest.userid = "guest";
$.ajax({
type: "POST",
url: "http://reportserver.syncfusion.com/api/get-user-key",
data: apiRequest,
success: function (data) {
dataValue = data.Token;
var token = JSON.parse(dataValue);
$("#container").ejReportViewer(
{
reportServiceUrl: "http://reportserver.syncfusion.com/ReportService/api/Viewer",
serviceAuthorizationToken: token["token_type"] + " " + token["access_token"],
reportPath: '/Sample Reports/Company Sales'
});
}
});
});
</script>
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
reportPath
as like as “reportPath: ‘91f24bf1-e537-4488-b19f-b37f77481d00’”.
Following screenshot displays reports from Report Server with help of configured external Reporting Server.
Load RDL Report
ReportViewer supports to load local RDL files. The following steps help you to load reports from local path.
Set the reportServiceUrl
,processingMode
and reportPath
to ReportViewer.
<div id="container" style="position: absolute; height: 100%; width: 100%;"></div>
<script type="text/javascript">
$(function () {
$("#container").ejReportViewer(
{
reportServiceUrl: '/api/ReportApi',
processingMode: ej.ReportViewer.ProcessingMode.Remote,
reportPath: '~/App_Data/Sales Dashboard.rdl'
});
});
</script>
Add WebAPI controller for ReportViewer
The JavaScript ReportViewer uses WebApi services to process the report file and get the request from control.
IReportController
The ApiController inherits the IReportController
and you can add the following code example to its methods definition in order to process the report file. The interface IReportController contains the required actions and helper methods declaration to process the report. The ReportHelper class contains helper methods that helps to process Post/Get request from control and return the response to control.
using Syncfusion.EJ.ReportViewer;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
namespace ReportViewerDemo
{
public class ReportApiController : 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 will be called when initialize the report options before start processing the report
public void OnInitReportOptions(ReportViewerOptions reportOption)
{
//You can update report options here
}
//Method will be called when reported is loaded
public void OnReportLoaded(ReportViewerOptions reportOption)
{
//You can update report options here
}
}
}
WebAPI Routing
1 Right-click the project and select Add and select Global.asax file from the listed templates.
2 You can route the WebAPI in Application_Start event into Global.asax file as follows.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.SessionState;
using System.Web.Http;
namespace ReportViewerDemo
{
public class Global: System.Web.HttpApplication
{
protected void Application_Start(object sender, EventArgs e)
{
System.Web.Http.GlobalConfiguration.Configuration.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional });
}
}
}
3 Run the sample application and you can see the ReportViewer on the page as displayed in the following screenshot.