Microsoft hubs(8920128728): How to display rdlc report in ReportViewer control into an MVC web application

Saturday, August 10, 2019

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

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.

Microsoft hubs(8920128728)