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’.



Step 2

Create a Controller and name it as ‘Report’ and add View to index action method. Add the following code in 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 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 ‘Report’ template, like below.



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



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



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.



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.



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.



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.



Step 4

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









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

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

In code behind 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 .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.

<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.