How to display rdlc report in ReportViewer control into an MVC web application.

Introduction

In this post, I have explained how to display RDLC report in ReportViewer control into an MVC web application.
Most of the developer use Microsoft Report (RDLC) for generating a report in asp.net Webforms application. In one of my previous post, we have seen that how can we create .rdlc report and export to a different file format like Word, Excel, Pdf etc.

[N.B. - In this article, the pagination on the report will not work. If you have multi-page records, please disable the paging with set InteractiveHeight = 0.
Open the report definition (.rdlc file) and set it's InteractiveSize Height property]

Here I would like to explain how to display RDLC report in ReportViewer control into an MVC web application.

Steps :

Step - 1 : Create New Project.

Go to File > New > Project > Select asp.net MVC4 web application > Entry Application Name > Click OK > Select Internet Application > Select view engine Razor > OK

Step-2: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create table for show data in report viewer control.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.

In this example, I have used one table as below

Step-4: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Add a Dataset.

In this example, I have created a folder named "RPTDatasets" for store dataset here.
Right Click on the folder > Add > Add New Item... > Select Dataset under Data > Enter Dataset name > Add.

Step-6: Add Report file(.rdlc) and Design your report.

In this example I have added a folder for store .rdlc files Named "RPTReports"
Right Click on report folder > Add > New item > Select Report under Reporing > Enter report file name > Add.

Step-7: Add a View (aspx) into the Shared Folder

Go to the Folder Views > Shared and Right click on the Folder > Add > View... > Enter View Name > Select ASPX (C#) View Engine > Add.

Step-8: Add asp.net control ScriptManager and ReportViewer In the View (ASPX) for show Report Viewer

Write the following code into the View (ASPX)

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%@ Register assembly="Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" namespace="Microsoft.Reporting.WebForms" tagprefix="rsweb" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title>ReportViwer in MVC4 Application</title>    
    <script runat="server">
        void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                List<MVCReportViwer.Customer> customers = null;
                using (MVCReportViwer.MyDatabaseEntities dc = new MVCReportViwer.MyDatabaseEntities())
                {
                    customers = dc.Customers.OrderBy(a => a.CustomerID).ToList();
                    ReportViewer1.LocalReport.ReportPath = Server.MapPath("~/RPTReports/rptCustomer.rdlc");
                    ReportViewer1.LocalReport.DataSources.Clear();
                    ReportDataSource rdc = new ReportDataSource("MyDataset", customers);
                    ReportViewer1.LocalReport.DataSources.Add(rdc);
                    ReportViewer1.LocalReport.Refresh();
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <rsweb:ReportViewer ID="ReportViewer1" runat="server" AsyncRendering="false" SizeToReportContent="true">
        </rsweb:ReportViewer>        
    </div>
    </form>
</body>
</html>

Step-9: Add a new Controller.

In this example I have added "HomeController"
Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete "empty MVC Controller"> Add.

Step-10: Add new action into your controller for getting the View for show report.

Here I have added "Index" Action into "Home" Controller. Please write this following code

public ActionResult Index()
{
    return View();
}

Step-11: Add view for the Action & design.

Right Click on Action Method (here right click on form action) > Add View... > Enter View Name > Select View Engine (Razor) > Check "Create a strong-typed view" > Select your model class > Add.

@{
    ViewBag.Title = "Index";
}
<h2>Our Customer List</h2>
@Html.Partial("ReportViwerASPX")

Step-12: Run Application.

Download Live Demo