We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: ASP.NET MVC (Classic) |
Control: ReportViewer |
Published Date: November 14, 2014 |
Last Revised Date: May 23, 2019 |
.NET Framework: 4
Tags: reportviewer

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.

Project Creation Wizard

Figure 1: Project Creation Wizard

  1. 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.

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.

 

Adding Reference

Figure 3: Adding Reference

  1. 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.

  1. Click OK.

Add Report

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

Add Report

Figure 4: Add Report

Note:

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      

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

 

 

Add New Item Wizard

Figure 5: Add New Item Wizard

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

 Adding Controller

Figure 6: Adding Controller

  1. Name the controller as ReportViewerController.cs and click ok.
  2. 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.

Add View Menu

Figure 7: Add View Menu

  1. Specify the View Name and click Add.

Specify View Name and Add

Figure 8: Add View Wizard

  1. 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>
    

 

Note:

x.x.x.x in the above code example refers to the current version of the Essential Studio running in your system.

  1. 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>
    
  1. 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>
    
  1. 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.

 

ReportViewer with Parameter Report

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/

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon