How to create your first ASP.NET MVC Classic version of ReportViewer in MVC Application ?

This section explains you how to create an ASP.NET MVC Classic version of ReportViewer component in MVC application. In the following example, you can learn how to load rdl/rdlc specification reports in ReportViewer component.

1. Open Visual Studio and create a new project by clicking New Project.
2. Select the Web category, select the ASP.NET MVC4 Web Application, and then click OK. The following screenshot displays the Project Creation Wizard.

Figure 1: Project Creation Wizard

3. Select the Empty project template by Select a Template list and select the Razor option in View Engine category and then click OK. The following screenshot displays the Project Template Wizard.

Figure 2: Project Template Wizard

Add References

You can add the following Syncfusion assembly references for ReportViewer.

1. In the Solution Explorer, right-click the References folder and then click Add Reference.

Figure 3: Adding Reference

2. Add the following assemblies.

• Syncfusion.Core
• Syncfusion.Linq.Base
• Syncfusion.ReportViewer.MVC
• Syncfusion.Shared.Mvc
• Syncfusion.ReportControls.Wpf
• Syncfusion.ReportWriter.Base
• Syncfusion.Pdf.Base
• Syncfusion.XlsIO.Base
• Syncfusion.DocIO.Base
• Synfusion.Shared.Wpf
• Syncfusion.Chart.Wpf
• Syncfusion.Gauge.Wpf
• Syncfusion.SfMaps.Wpf
  Note:

  As MVC4 version sample for this tutorial is created, you have to add Syncfusion MVC4 version dlls. Syncfusion has a standard for assembly version number of MVC. For example Syncfusion assembly version is 12.3400.36, the number “4” in the second part. “3400” represents MVC version number. You can obtain Syncfusion MVC assemblies from its installed location C:\Program Files (x86)\Syncfusion\Essential Studio\12.3.0.36\Assemblies.

3. Click OK.

Add Report

You can add report files to your application’s App_Data folder.

Figure 4: Add Report

Add Controller      

1. Right-click on the project and select Add. The following screen shot shows the Add New Item Wizard.

Figure 5: Add New Item Wizard

2. Click New Item and select MVC4 Controller Class from the listed templates.

Figure 6: Adding Controller

3. Name the controller as ReportViewerController.cs and click ok.
4. Add the following code to ReportViewerController.

   [C#]
   using System;
   using System.Linq;
   using System.Web;
   using System.Web.Mvc;
   using System.Collections.Generic;
   using Syncfusion.ReportViewer.Mvc;
   namespace ReportViewerSample
   {
       public class ReportViewerController : Controller
       {
           public ActionResult Index()
           {
               //Assign the ReportViewerModel to ViewData for ReportViewer Control 
               ViewData["ReportModel"] = this.GetInvoiceModel();
               return View();
           }
           [AcceptVerbs(HttpVerbs.Post)]
           public ActionResult Index(ReportViewerParams param)
           {
               //Process the report request from client and send the action result
               return new ReportViewerHtmlActionResult(this.GetInvoiceModel(), param);
           }
           private ReportViewerModel GetInvoiceModel()
           {
               //Model data class for report viewer
               ReportViewerModel reportModel = new ReportViewerModel();
               // Set the ReportPath of the Report
               reportModel.ReportPath = HttpContext.Server.MapPath("~/App_Data/InvoiceTemplate.rdl");
               return reportModel;
           }
       }
   }
   

Add View

1. In the Controller, right-click on Index action method name and then click Add View.

Figure 7: Add View Menu

2. Specify the View Name and click Add.

Figure 8: Add View Wizard

3. Add the following code to Index.cshtml Razor Page.

   [CSHTML]
   <div style="width:100%;height:800px;">       
       @{Html.Syncfusion().ReportViewer("invoice", (ReportViewerModel)ViewData["ReportModel"]).Render();}
       @{Html.Syncfusion().ScriptManager().EnableGlobalization().Render();}
    </div>
   

Configure Web.config

1. Register the assemblies by adding the following code example inside the <system.web> tag in web.config file at the root folder.

   [Web.config]
         <assemblies>
           <add assembly="System.Data.Entity, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" />
           <add assembly="System.Web.Abstractions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
           <add assembly="System.Web.Helpers, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
           <add assembly="System.Web.Routing, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
           <add assembly="System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
           <add assembly="System.Web.WebPages, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
           <add assembly="Syncfusion.Core, Version=12.3400.0.36, Culture=neutral, PublicKeyToken=632609B4D040F6B4" />
           <add assembly="Syncfusion.Shared.Mvc, Version=12.3400.0.36, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
           <add assembly="Syncfusion.Linq.Base, Version=12.3400.0.36, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
           <add assembly="Syncfusion.ReportViewer.Mvc, Version=12.3400.0.36, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
         </assemblies>
   

2. Add the following namespaces to the web.config files in root folder and View folder.

   [Web.config]
   <namespaces>
      <add namespace="System.Web.Helpers"/>
      <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.Shared" />
      <add namespace="Syncfusion.ReportViewer.Mvc" /> 
   </namespaces>
   

3. Add the following httpHandler’s code for resource handling inside to the <system.web> tag in web.config file.

   [Web.config]
       <httpHandlers>
         <add verb="GET,HEAD" path="MvcResourceHandler.axd" type="Syncfusion.Mvc.Shared.MvcResourceHandler, Syncfusion.Shared.Mvc, Version=12.3400.0.36, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" validate="false"/>
         <add verb="*" path="syncfusion_generatereports.axd" validate="false" type="Syncfusion.ReportViewer.Mvc.ReportViewerHandler, Syncfusion.ReportViewer.Mvc, Version=12.3400.0.36, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/>
       </httpHandlers>
   

4. Add the following handler’s code inside the <system.webServer> tag of web.config for resource handling in IIS Web Server.

   [Web.config]
       <handlers>
         <remove name="MvcResourceHandler" />
         <add verb="GET,HEAD" name="MvcResourceHandler" path="MvcResourceHandler.axd" type="Syncfusion.Mvc.Shared.MvcResourceHandler, Syncfusion.Shared.Mvc, Version=12.3400.0.36, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
         <add verb="GET,HEAD" path="StartDevServer.axd" name="StartDevServer" type="Syncfusion.DemoUtility.MVC.StartDevServerHandler, Syncfusion.DemoUtility.Mvc, Version=12.3400.0.36, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/>
         <add verb="*" path="syncfusion_generatereports.axd" name="syncfusion_generatereports" type="Syncfusion.ReportViewer.Mvc.ReportViewerHandler, Syncfusion.ReportViewer.Mvc, Version=12.3400.0.36, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
       </handlers>
   

Run the Application

Run the sample application and you can see the ReportViewer on the page as displayed in the following screenshot.

Figure 9: ReportViewer with Parameter Report

Demo Sample

You can download the demo sample from the following link.

http://www.syncfusion.com/downloads/support/directtrac/general/ReportViewerSample-2061069698.zip

Further References

You can find documentation and online demo samples for ASP.NET MVC Classic ReportViewer control from the following links.

http://help.syncfusion.com/asp.net%20mvc

http://mvc.syncfusion.com/demos/reporting/reportviewer

Newer ASP.NET MVC version of ReportViewer

You can try newer version of MVC ReportViewer that is powered by JavaScript/HTML5. You can find the documentation and online demo samples for newer ASP.NET MVC ReportViewer control from the following links.

http://help.syncfusion.com/web

http://mvc.syncfusion.com/demos/web/ReportViewer/