Getting Started with ASP.NET MVC Application

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

Project Creation

Create a new ASP.NET MVC project by selecting the WEB category from the listed project template in Microsoft Visual Studio IDE.

Project creation wizard of an ASP.NET MVC web application

The following screenshot displays how to select Internet application template with razor view engine.

Shows dialog to select template with razor view engine

Adding References, Scripts, Styles and Control in CSHTML 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.EJ
- Syncfusion.EJ.MVC
- 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 the NuGet package installed location %localappdata%\Syncfusion\ReportsSDK\Samples\Common\nuget.

Add Scripts and Styles

Add the script files and CSS files in the <title> tag of the Index.cshtml page.

html

<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

Registering Syncfusion Assemblies within the Application’s Root Web.config

In your application’s root web.config file, add the below assembly information within the <assemblies> tag.

html

<system.web>
    <compilation debug="true" targetFramework="4.5">
        <assemblies>
            <add assembly="Syncfusion.EJ, Version=13.4450.0.54, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/>
            <add assembly="Syncfusion.EJ.Mvc, Version=13.4500.0.54, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/>
            <add assembly="Syncfusion.Linq.Base, Version=13.4450.0.54, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/>
            <add assembly="Syncfusion.EJ.ReportViewer, Version=13.4450.0.54, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/>
        </assemblies>
    </compilation>      
</system.web>

Registering namespaces within Web.config

Now you need to register the below mentioned two namespaces in the web.config file present within the Views folder as well as the Root directory of your application.

Syncfusion.MVC.EJ
Syncfusion.JavaScript
Syncfusion.EJ.ReportViewer

html

<namespaces>
    <add namespace="System.Web.Mvc"/>
    <add namespace="System.Web.Mvc.Ajax"/>
    <add namespace="System.Web.Mvc.Html"/>    
    <add namespace="System.Web.Routing"/>
    <add namespace="System.Web.WebPages"/>
    <add namespace="Syncfusion.MVC.EJ"/>
    <add namespace="Syncfusion.JavaScript"/>   
    <add namespace="Syncfusion.JavaScript.DataVisualization"/>
    <add namespace="Syncfusion.EJ.ReportViewer"/>
</namespaces>

Control Initialization

Initialize ReportViewer by using the following code example in the <body> tag of the Index.cshtml page that is already created.

cshtml

@using Syncfusion.MVC.EJ;
@using Syncfusion.JavaScript;

<body style="overflow: hidden; position: static; margin: 0px; padding: 0px; width: 100%; height: 100%">
    <div style="width:100%; height:100%; position:absolute;">
        @(Html.EJ().ReportViewer("reportsample"))
    </div>
        @(Html.EJ().ScriptManager())
</body>

<style type="text/css">
    html, body {
        overflow: hidden;
        padding: 0;
        margin: 0;
        height: 100%;
        position: static;
    }

    #reportsample {
        width: 100%;
        height: 99.9%;
        position: absolute;
    }
</style>

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 ServiceAuthorizationToken, ReportServiceUrl and ReportPath in the ReportViewer properties.

cshtml

<body style="overflow: hidden; position: static; margin: 0px; padding: 0px; width: 100%; height: 100%">
    @{
        var controller = ViewContext.Controller as RDLReportSample.Controllers.ReportViewerController;
        var apiToken = controller.GenerateToken("http://reportserver.syncfusion.com/", "guest", "demo");
    }
        <div style="width:100%; height:100%; position:absolute;">
            @(Html.EJ().ReportViewer("reportsample")
                        .ServiceAuthorizationToken(@apiToken)
                        .ReportServiceUrl(@"http://reportserver.syncfusion.com/ReportService/api/Viewer")
                        .ReportPath("/Sample Reports/Company Sales")
            )
        </div>
    @(Html.EJ().ScriptManager())
</body>

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”’.

Controller

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Web;
using System.Web.Mvc;

namespace RDLReportSample.Controllers
{
    public class ReportViewerController : Controller
    {
       public ActionResult Viewer()
        {
            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

Load RDL Report

ReportViewer supports to load local RDL files. The following steps help you to load reports from local path.

Set the ReportPath, ProcessingMode and ReportServiceUrl to ReportViewer.

cshtml

<body style="overflow: hidden; position: static; margin: 0px; padding: 0px; width: 100%; height: 100%">
    <div style="width:100%; height:100%; position:absolute;">
        @(Html.EJ().ReportViewer("reportsample").ProcessingMode(Syncfusion.JavaScript.ReportViewerEnums.ProcessingMode.Remote).ReportServiceUrl(VirtualPathUtility.ToAbsolute("~/api/ReportApi")).ReportPath("~/App_Data/Sales Dashboard.rdl"))
    </div>
        @(Html.EJ().ScriptManager())
</body>

Add WebAPI controller for ReportViewer

The ASP.NET MVC ReportViewer uses WebApi services to process the report file and get the request from control.

Shows dialog to adding a new WebApi controller for ReportViewer

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.

Shows dialog to adding a Global.asax file for WebAPI routing

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.

Sales dashboard RDL report rendered in ReportViewer