How to use Report Viewer in partial view

This section explains the steps required to use the Report Viewer in partial view in ASP.NET MVC reporting application.

1. To create your first ASP.NET MVC reporting application, refer to this Getting-started section.

2. Add a partial view in your project.

   

3. Add the Report Viewer component in the partial view page and it was added using the following code sample.

   @(Html.Bold().ReportViewer("viewer")
       .ReportServiceUrl("/api/ReportViewer")
   )
   
   @Html.Bold().ScriptManager()

4. You need to add a controller action that returns the partial view.

    public ActionResult ReportViewer(string reportName)
    {
        ViewBag.Report = reportName;
        return PartialView("ReportViewerPartial");
    }

5. Set the ReportPath API value for the Report Viewer, based on the value sent from the main page.

   @(Html.Bold().ReportViewer("viewer")
        .ReportServiceUrl("/api/SSRSReports")
        .ReportPath("~/Resources/" + ViewBag.Report + ".rdl")
    )

6. You can now load the Bold Report Viewer in partial view with the ajax load functionality.

   function openReport() {
        $('#partialView').load('@Url.Action("ReportViewer", "Home", new {reportName = "sales-order-detail"})');
    }

   The @Url.Action() should be in the format @Url.Action("ActionName","ControllerName", new { value = "Value" } )

7. When you are closing the Report Viewer you need to destroy it to avoid creation of multiple instances of Report Viewer component. You can use the following code sample to destroy the Report Viewer in your application.

   function closeReport() {
        $('#viewer').data('boldReportViewer').destroy();
    }