Thursday, September 17, 2015

Telerik Reporting for MVC Web Application

1: In the MVC web Application, install the Microsoft.AspNet.WebApi.WebHost NuGet package

2: Make sure that the following assemblies are referenced
    * Newtonsoft.Json
    * System.Web.Http
    * System.Web.Http.WebHost
    * System.Net.Http
    * System.Net.Http.Formatting
    * Telerik.Reporting (Copy to Local = true)
    * Telerik.Reporting.Service.WebApi (Copy to Local = true)
    * Telerik.ReportViewer.MVC  (Copy to Local = true)
 using System.Web;
using Telerik.Reporting.Services.WebApi;

public class ReportsController : ReportsControllerBase
{
    static Telerik.Reporting.Services.ReportServiceConfiguration configurationInstance =
        new Telerik.Reporting.Services.ReportServiceConfiguration
        {
            HostAppId = "Application1",
            ReportResolver = new ReportFileResolver(HttpContext.Current.Server.MapPath("~/Reports"))
                .AddFallbackResolver(new ReportTypeResolver()),
            Storage = new Telerik.Reporting.Cache.File.FileStorage(),
        };

    public ReportsController()
    {
        this.ReportServiceConfiguration = configurationInstance;
    }
}

4: Invoke RegisterRouters(httpConfiguration) in the Global.Application_Start (Global.asax) method:
protected void Application_Start()
{
    ReportsControllerConfiguration.RegisterRoutes(GlobalConfiguration.Configuration);
 }

5: Update the web.config file in the Views folder to include telerik namespaces:
 <system.web.webPages.razor>
    ...
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
          <namespaces>
            ...
            <add namespace="Telerik.Reporting" />
            <add namespace="Telerik.ReportViewer.Mvc" />        
          </namespaces>
    </pages>
  </system.web.webPages.razor>

6: Copy and add the ReportViewer folder from [TelerikReporting_InstallDir]\Html5 to the application’s project.

7: Add reference to the HTML5 Report Viewer's javascript and stylesheet files in the view
 <link href="ReportViewer/styles/telerikReportViewer-x.x.x.x.css" rel="stylesheet" />
<script src="ReportViewer/js/telerikReportViewer-x.x.x.x.js"></script>

8: Add the HTML5 ASP.NET MVC Report Viewer to the same view:
@(Html.TelerikReporting().ReportViewer()
       .Id("reportViewer1")
       .ServiceUrl("/api/reports/")
       .TemplateUrl("/ReportViewer/templates/telerikReportViewerTemplate.htmll")
       .ReportSource("ReportLibrary1.Report1, ReportLibrary1")
       .ViewMode(ViewMode.Interactive)
       .ScaleMode(ScaleMode.Specific)
       .Scale(1.0)
       .PersistSession(false)
       .Deferred()
       )

9: Render the deferred initialization statement for the Report Viewer scripts 
@(Html.TelerikReporting().DeferredScripts())

10: Make the viewer fill the entire browser window. 
<style>
   #reportViewer1 {
        position: absolute;
        left: 5px;
        right: 5px;
        top: 5px;
        bottom: 5px;
        overflow: hidden;
    }
</style>

11: If the telerik reports are create in other class library, need to add the same database connection string to the Web.Config of the web application 

12: Run the application or use the following URL to verify the service 
      http://localhost:[portnumber]/api/reports/formats

reference:
http://www.telerik.com/help/reporting/telerik-reporting-rest-host-http-service-using-web-hosting.html
http://www.telerik.com/help/reporting/telerik-reporting-rest-implementing-http-service.html
http://www.telerik.com/help/reporting/html5-mvc-report-viewer-embedding.html


No comments: