RDLC Integration In MVC Application - Report Display Using Iframe

This article demonstrates how to integrate the RDLC report in the 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 the HTML iframe input tag in .NET MVC View to display the 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 project

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

<div class="row">
    <div class="col-md-4">
        <h3>Customers Report</h3>
    </div>
</div>
<hr />
<div class="row">
    <div class="col-md-4">
        <input type="text" class="form-control" id="searchText" placeholder="Enter Company Name">
    </div>
    <div class="col-md-3">
        <button type="button" id="btnSearch" class="btn btn-raised btn-primary btn-block">Get Report</button>
    </div>
</div>
<div class="row" id="divReport">
</div>
<script>
$(function() {
    $('#btnSearch').click(function() {
        var searchText = $("#searchText").val();
        // ASPX page URL to load report
        var src = '../Reports/CustomerReport.aspx?';
        // We can add parameters here
        src = src + "searchText=" + searchText;
        // We can append more than one parameter like below
        // var companyId = 1
        // src = src + "compnayID=" + companyId
        // Create a dynamic iframe here and append this to div tag
        var iframe = '<iframe id="reportFrame" width="100%" height="800px" scrolling="no" frameborder="0" src="' + src + '" allowfullscreen></iframe>';
        $("#divReport").html(iframe);
    });
});
</script>

If you look at the above code, in the search button, click event we are creating an iframe tag dynamically and appending that to the div tag, this is where we are calling the actual report that we place in the 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 ‘Report’ template, like below.

RDLC folder

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.

Customer

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

Data source

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.

New Connection

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.

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.

Customer table

After selecting table objects, we need to configure Dataset as below.

Give the dataset name “CustomerDataSet”.

We have to give this same name while attaching a report to Reportviewer.

Reportviewer

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

Data to report

Model

MVC

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

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

<form id="formCustomerReport" runat="server">
  <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <rsweb:ReportViewer ID="CustomerListReportViewer" runat="server" Width="100%"></rsweb:ReportViewer>
  </div>
</form>

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

protected void Page_Load(object sender, EventArgs e)
{
  if (!Page.IsPostBack)
  {
    string searchText = string.Empty;

    if (Request.QueryString["searchText"] != null)
    {
      searchText = Request.QueryString["searchText"].ToString();
    }

    List<Customer> customers = null;
    using (var _context = new EmployeeManagementEntities())
    {
      customers = _context.Customers
          .Where(t => t.FirstName.Contains(searchText) || t.LastName.Contains(searchText))
          .OrderBy(a => a.CustomerID)
          .ToList();

      CustomerListReportViewer.LocalReport.ReportPath = Server.MapPath("~/Reports/RDLC/Report1.rdlc");
      CustomerListReportViewer.LocalReport.DataSources.Clear();
      ReportDataSource rdc = new ReportDataSource("CustomerDataSet", customers);
      CustomerListReportViewer.LocalReport.DataSources.Add(rdc);
      CustomerListReportViewer.LocalReport.Refresh();
      CustomerListReportViewer.DataBind();
    }
  }
}

Just make sure that we have configured the .rdlc file path correctly to the 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 on the web. config file.

<system.web>  
    <httpHandlers>  
      <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" />  
    </httpHandlers>  
    <compilation debug="true" targetFramework="4.6">  
      <assemblies>  
        <add assembly="System.Web.Abstractions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />  
        <add assembly="System.Web.Helpers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />  
        <add assembly="System.Web.Routing, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />  
        <add assembly="System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />  
        <add assembly="System.Web.WebPages, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />  
        <add assembly="Microsoft.ReportViewer.WebForms, Version=12.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" />  
        <add assembly="Microsoft.ReportViewer.Common, Version=12.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" />  
      </assemblies>  
      <buildProviders>  
        <add extension=".rdlc" type="Microsoft.Reporting.RdlBuildProvider, Microsoft.ReportViewer.WebForms, Version=12.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" />  
      </buildProviders>  
    </compilation>  
    <httpRuntime targetFramework="4.5" />  
  </system.web>  
  <system.webServer>  
    <validation validateIntegratedModeConfiguration="false" />  
    <handlers>  
      <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" />  
    </handlers>  
  </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.

Report View