RDLC Integration In MVC Application - Report Display Using Iframe

This article demonstrates how to integrate RDLC report in ASP.NET MVC application.

To achieve this, we have the following simple and straightforward steps.

  • Create an MVC Application.
  • Create a Controller and add a View (we will place HTML iframe input tag in .NET MVC View to display report).
  • Setup/Design the RDLC report based on requirement.
  • Create a Database connection (here, we are using Entity Framework).
  • Create an ASPX page (we will place ReportViewer control here and will bind our local report to ReportViewer control).

Now, let’s quickly have a look at each one in detail.

Step 1

Create an MVC project and name it as ‘MVC_RDLC_Test’.

MVC

Step 2

Create a Controller and name it as ‘Report’ and add View to index action method. Add the following code in View file.

  1. <div class="row">  
  2.     <div class="col-md-4">  
  3.         <h3>Customers Report</h3>  
  4.     </div>     
  5. </div>  
  6.  <hr />  
  7. <div class="row">  
  8.     <div class="col-md-4">  
  9.       <input type="text" class="form-control" id="searchText" placeholder="Enter Company Name">  
  10.     </div>  
  11.     <div class="col-md-3">  
  12.         <button type="button" id="btnSearch" class="btn btn-raised btn-primary btn-block">Get Report</button>  
  13.     </div>  
  14. </div>  
  15.   
  16. <div class="row" id="divReport">  
  17.   
  18. </div>  
  19.   
  20. <script>  
  21.     $(function () {  
  22.         $('#btnSearch').click(function () {  
  23.   
  24.             var searchText = $("#searchText").val();  
  25.   
  26.             //ASPX page URL to load report  
  27.             var src = '../Reports/CustomerReport.aspx?';  
  28.             //We can add parameters here  
  29.             src = src + "searchText=" + searchText  
  30.   
  31.             //We can append more than one parameter like below  
  32.             //var companyId = 1  
  33.             //src = src + "compnayID=" + companyId  
  34.   
  35.             //Create a dynamic iframe here and append this to div tag  
  36.             var iframe = '<iframe id="reportFrame" width="100%" height="800px" scrolling="no" frameborder="0" src="' + src + '" allowfullscreen></iframe>';  
  37.             $("#divReport").html(iframe);  
  38.         });  
  39.     });  
  40.   
  41. </script>  

If you look at the above code, in search button, click event we are creating iframe tag dynamically and appending that to div tag, this is where we are calling actual report that we place in ASPX page, also we can pass parameters if any to ASPX page, of course, we can get those values using Request.QueryString["<parameter name>"].

Step 3

Create a folder called “Reports” in project root level directory. Create a sub folder called ‘RDLC’ under “Reports” folder.

Add Report Control: right click on RDLC folder , add -> New item -> Select ‘Reporting’ Tab and then select Reporttemplate, like below.

MVC

Start designing the report based on requirement. For instance, in this example, we will display the customers list based on company name search.

MVC

Insert a table to list the customers and attach the data source and dataset to it like below.

MVC

On RDLC design mode, right click and then click on Insert-> Table. It will open the Data Source Configuration Wizard. In that, click on ‘New Connection’ button.

MVC

Select the Data source and Server name. On successful connection with server, it lists the databases.

Select the database from the dropdown and click OK.

MVC

It will list all the objects (tables, procedures, etc.) in the selected database. Select the required table objects for the report.
Here, just simply select customer table only.

MVC

After selecting table objects, we need to configure Dataset like below.
Give dataset name as “CustomerDataSet”.
We have to give this same name while attaching report to reportviewer.

MVC

Step 4

Create a Database connection using Entity Framework, to connect with database and bind data to report.

MVC

MVC

MVC

MVC

Step 5

Create ASPX Page. Place RDLC report in Report Viewer: Create an .aspx page and name it as “CustomerReport.aspx” in Reports folder. 

Add ScriptManager & ReportViewer contols in “CustomerReport.aspx” lie below

  1. <form id="formCustomerReport" runat="server">  
  2.     <div>  
  3.         <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>  
  4. rsweb:ReportViewer ID="CustomerListReportViewer" runat="server" Width="100%"></rsweb:ReportViewer>  
  5.     </div>  
  6. </form>  

In code behind file, write the following code to bind the data.

  1. protected void Page_Load(object sender, EventArgs e)  
  2.         {  
  3.             if (!Page.IsPostBack)  
  4.             {  
  5.                 string searchText = string.Empty;  
  6.   
  7.                 if (Request.QueryString["searchText"] != null)  
  8.                 {  
  9.                     searchText = Request.QueryString["searchText"].ToString();  
  10.                 }  
  11.   
  12.                 List<Customer> customers = null;  
  13.                 using (var _context = new EmployeeManagementEntities())  
  14.                 {  
  15.                     customers = _context.Customers.Where(t => t.FirstName.Contains(searchText) || t.LastName.Contains(searchText)).OrderBy(a => a.CustomerID).ToList();  
  16.                     CustomerListReportViewer.LocalReport.ReportPath = Server.MapPath("~/Reports/RDLC/Report1.rdlc");  
  17.                     CustomerListReportViewer.LocalReport.DataSources.Clear();  
  18.                     ReportDataSource rdc = new ReportDataSource("CustomerDataSet", customers);  
  19.                     CustomerListReportViewer.LocalReport.DataSources.Add(rdc);  
  20.                     CustomerListReportViewer.LocalReport.Refresh();  
  21.                     CustomerListReportViewer.DataBind();  
  22.                 }  
  23.             }  
  24.         }  

Just make sure that we have configured .rdlc file path correctly to ReportViewer property LocalReport.ReportPath. And make sure that the dataset name is configured as “CustomerDataSet “ -> ReportDataSource rdc = new ReportDataSource("CustomerDataSet", customers);

Finally, make sure that the following is configured in web.config file.

  1. <system.web>  
  2.     <httpHandlers>  
  3.       <add path="Reserved.ReportViewerWebControl.axd" verb="*" type="Microsoft.Reporting.WebForms.HttpHandler, Microsoft.ReportViewer.WebForms, Version=12.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" validate="false" />  
  4.     </httpHandlers>  
  5.     <compilation debug="true" targetFramework="4.6">  
  6.       <assemblies>  
  7.         <add assembly="System.Web.Abstractions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />  
  8.         <add assembly="System.Web.Helpers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />  
  9.         <add assembly="System.Web.Routing, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />  
  10.         <add assembly="System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />  
  11.         <add assembly="System.Web.WebPages, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />  
  12.         <add assembly="Microsoft.ReportViewer.WebForms, Version=12.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" />  
  13.         <add assembly="Microsoft.ReportViewer.Common, Version=12.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" />  
  14.       </assemblies>  
  15.       <buildProviders>  
  16.         <add extension=".rdlc" type="Microsoft.Reporting.RdlBuildProvider, Microsoft.ReportViewer.WebForms, Version=12.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" />  
  17.       </buildProviders>  
  18.     </compilation>  
  19.     <httpRuntime targetFramework="4.5" />  
  20.   </system.web>  
  21.   <system.webServer>  
  22.     <validation validateIntegratedModeConfiguration="false" />  
  23.     <handlers>  
  24.       <add name="ReportViewerWebControlHandler" preCondition="integratedMode" verb="*" path="Reserved.ReportViewerWebControl.axd" type="Microsoft.Reporting.WebForms.HttpHandler, Microsoft.ReportViewer.WebForms, Version=12.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" />  
  25.     </handlers>  
  26.   </system.webServer>  

Build the solution and run it. Navigate to Report View. We will be able to see the following screen that the report displayed in View.

MVC