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.
- Open Visual Studio and create a new project by clicking New Project.
- 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
- 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.
- In the Solution Explorer, right-click the References folder and then click Add Reference.
Figure 3: Adding Reference
- 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.
- Click OK.
Add Report
You can add report files to your application’s App_Data folder.
Figure 4: Add Report
You can obtain sample rdl/rdlc files from Syncfusion installed location (%userprofile%\AppData\Local\Syncfusion\EssentialStudio\X.X.X.X\Common\Data\ReportTemplate). “X.X.X.X” is the Essential Studio Release Version.
Add Controller
- Right-click on the project and select Add. The following screen shot shows the Add New Item Wizard.
Figure 5: Add New Item Wizard
- Click New Item and select MVC4 Controller Class from the listed templates.
Figure 6: Adding Controller
- Name the controller as ReportViewerController.cs and click ok.
- 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
- In the Controller, right-click on Index action method name and then click Add View.
Figure 7: Add View Menu
- Specify the View Name and click Add.
Figure 8: Add View Wizard
- 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
- 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>
x.x.x.x in the above code example refers to the current version of the Essential Studio running in your system.
- 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>
- 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>
- 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.