Display Data in Report Viewer with MVC 4

Here you will find the steps:

Step 1

Below, you will find the table used in the application.



After creating the table, you can fill it using, for example, the data rows as shown below:



Step 2


Open Visual Studio, and Add New Project.





Step 3

Add Report file (.rdlc).

Now, you need to add a report file (.rdlc). Right click on project name and then Add> Add New Item > Reporting > Report > Add.



In this part, we need to configure our Report View with the fields which you want to add in the report. In this case, I chose to add all fields of my table.



Step 4

Configuring Dataset.

Here, we need to repeat the following steps for getting the same result.











After finishing the steps shown below, we will pass to the next step.

Step 5

Add Entity Data Model.

Right click on project name from solution explorer, then Add > New Item > Select ADO.Net Entity Data Model > Add.









Step 6

Add a View with .Aspx extension into the shared Folder.

Right Click on shared folder > Add > New Item >View Page (ASPX).

Step 7

You will add Report Viewer and Script Manager Controls from ToolBoxpanel as shown below.



Now, write the code between the head tag as follow.

  1. <headrunat="server">  
  2. <metaname="viewport"content="width=device-width"/>  
  3. <title> Data Report With MVC 4</title>  
  4.   
  5.    <scriptrunat="server">  
  6.   
  7.       void Page_Load(object sender, EventArgs e)  
  8.       {  
  9.   
  10.          if (!IsPostBack)  
  11.          {  
  12.   
  13.             List<ReportViewerMVC.Customers> customers = null;  
  14.   
  15.             using (ReportViewerMVC.EntityFrameworkTestEntities _entities = new ReportViewerMVC.EntityFrameworkTestEntities())  
  16.             {  
  17.   
  18.                customers = _entities.Customers.ToList();  
  19.   
  20.                ReportViewer1.LocalReport.ReportPath = Server.MapPath("~/Report/MyReport.rdlc");  
  21.   
  22.   
  23.                ReportDataSource RDS = newReportDataSource("DataSet1", customers);  
  24.   
  25.                ReportViewer1.LocalReport.DataSources.Add(RDS);  
  26.   
  27.                ReportViewer1.LocalReport.Refresh();  
  28.   
  29.             }  
  30.   
  31.          }  
  32.       }  
  33.   
  34.   
  35.    </script>  
  36.   
  37. </head>  
Step 8

Add New Controller.

Right click on the Controllers folder > Add > Controller > Enter Controller name (“Customers”) > Add. By default we have index action as follows.
  1. publicclassCustomersController: Controller  
  2. {  
  3.     //  
  4.     // GET: /Customers/  
  5.     publicActionResult Index()  
  6.     {  
  7.         return View();  
  8.     }  
  9. }  
Step 9

Add view related to Index Action.

At this level, we need to click on form action > Add View > Enter View name (Index)> Add.

Index.cshtml
  1. @{  
  2.    ViewBag.Title = "Display Data in the Report Viewer";  
  3. }  
  4.   
  5. <h2>Display Data in the Report Viewer</h2>  
  6.   
  7. @* Here we call the page that I have been created into shared folder *@  
  8.   
  9. @Html.Partial("DataReport")  
Step 10

Run Application.

 

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now