RDLC Integration In MVC Application - Report Display Using Iframe

This article demonstrates how to integrate the 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 the 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 ‘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. <div class="row" id="divReport">  
  16. </div>  
  17. <script>  
  18. $(function() {  
  19.      $('#btnSearch').click(function() {  
  20.   
  21.           var searchText = $("#searchText").val();  
  22.   
  23.           //ASPX page URL to load report    
  24.           var src = '../Reports/CustomerReport.aspx?';  
  25.           //We can add parameters here    
  26.           srcsrc = src + "searchText=" + searchText  
  27.   
  28.           //We can append more than one parameter like below    
  29.           //var companyId = 1    
  30.           //srcsrc = src + "compnayID=" + companyId    
  31.   
  32.           //Create a dynamic iframe here and append this to div tag    
  33.           var iframe = '<iframe id="reportFrame" width="100%" height="800px" scrolling="no" frameborder="0" src="' + src + '" allowfullscreen></iframe>';  
  34.           $("#divReport").html(iframe);  
  35.      });  
  36. });  
  37. </script> 
    If you look at the above code, in the search button, click event we are creating iframe tag dynamically and appending that to the 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 the project root level directory. Create a subfolder called ‘RDLC’ under the “Reports” folder.
     
    Add Report Control: right-click on the RDLC folder, add -> New item -> Select the ‘Reporting’ tab and then select the ‘Reporttemplate, like below.
     
    MVC
     
    Start designing the report based on the requirement. For instance, in this example, we will display the customer's 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 the ‘New Connection’ button.
     
    MVC
     
    Select the Data source and Server name. On a successful connection with the 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 the customer table only.
     
    MVC
     
    After selecting table objects, we need to configure Dataset as below.
     
    Give dataset name as “CustomerDataSet”.
     
    We have to give this same name while attaching a report to reportviewer.
     
    MVC
     
    Step 4
     
    Create a Database connection using Entity Framework, to connect with the database and bind data to report.
     
    MVC
     
    MVC
     
    MVC
     
    MVC
     
    Step 5
     
    Create an 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.     if (!Page.IsPostBack) {  
    3.         string searchText = string.Empty;  
    4.   
    5.         if (Request.QueryString["searchText"] != null) {  
    6.             searchText = Request.QueryString["searchText"].ToString();  
    7.         }  
    8.   
    9.         List < Customer > customers = null;  
    10.         using(var _context = new EmployeeManagementEntities()) {  
    11.             customers = _context.Customers.Where(t => t.FirstName.Contains(searchText) || t.LastName.Contains(searchText)).OrderBy(a => a.CustomerID).ToList();  
    12.             CustomerListReportViewer.LocalReport.ReportPath = Server.MapPath("~/Reports/RDLC/Report1.rdlc");  
    13.             CustomerListReportViewer.LocalReport.DataSources.Clear();  
    14.             ReportDataSource rdc = new ReportDataSource("CustomerDataSet", customers);  
    15.             CustomerListReportViewer.LocalReport.DataSources.Add(rdc);  
    16.             CustomerListReportViewer.LocalReport.Refresh();  
    17.             CustomerListReportViewer.DataBind();  
    18.         }  
    19.     }  

      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