Display Rdlc report in the web page in Asp.Net Mvc4

Question

I'm very new to the Asp.Net MVC4. I have a rdlc report and I need to add that report in my index page. But I googled a lot, they have suggested like PDF file or Image File. I need to display the report on the page itself. How can I do that?

Answer 1

You can create a aspx page with the report and then embed the report in a <iframe /> on your MVC view, or you can try with this method that returns the steam directly on the response:

private void RenderReport() {

    LocalReport localReport = new LocalReport();

    localReport.ReportPath = Server.MapPath("~/YourReportName.rdlc");

    // Add your data source
    ReportDataSource reportDataSource = new ReportDataSource("YourCollection", yourCollection);

    localReport.DataSources.Add(reportDataSource);

    string reportType = "PDF";
    string mimeType;
    string encoding;
    string fileNameExtension;

    //The DeviceInfo settings should be changed based on the reportType
    string deviceInfo =
        "<DeviceInfo>" +
        "  <OutputFormat>PDF</OutputFormat>" +
        "  <PageWidth>8.5in</PageWidth>" +
        "  <PageHeight>11in</PageHeight>" +
        "  <MarginTop>0.5in</MarginTop>" +
        "  <MarginLeft>1in</MarginLeft>" +
        "  <MarginRight>1in</MarginRight>" +
        "  <MarginBottom>0.5in</MarginBottom>" +
        "</DeviceInfo>";

    Warning[] warnings;
    string[] streams;
    byte[] renderedBytes;

    //Render
    renderedBytes = localReport.Render(
        reportType, 
        deviceInfo, 
        out mimeType, 
        out encoding, 
        out fileNameExtension, 
        out streams, 
        out warnings);

    //Write to the outputstream
    //Set content-disposition to "attachment" so that user is prompted to take an action
    //on the file (open or save)

    Response.Clear();
    Response.ContentType = mimeType;
    Response.AddHeader("content-disposition", "attachment; filename=foo." + fileNameExtension);
    Response.BinaryWrite(renderedBytes);
    Response.End();
}

You maybe need to change the reportType to wath you need, and remember to change the deviceInfo accordingly to it. You can find the information here.

Answer 2

This is 1 year old post but many people might still hitting this page for solution, so i thought to reply on this question.

--> did you consider to use the ReportViewer to display the rdlc report on your webPage?

1) Create Aspx page. Add "ScriptManager" to this page from "AjaxExtension"Tools option. 2) Add "ReportViewer" to this page from the "Report" Tools Option. 3) And consider following code to assign datasource in the codebehind of this aspx page.

string ID = Request.QueryString["ID"];                
List<Obj1> List1 = new List<Obj1>();
List<Obj2> List2 = new List<Obj2>();
List<Obj3> List3 = new List<Obj3>();

    using (var db = new 'use ur edmx connectionstring name')
    {                                  
        List1 = db.'urTableName1'.Where(x => x.ID == ID).ToList();
        List2 = db.'urTableName2'.Where(y => y.ID == ID).ToList();
        List3 = db.'urTableName3'.Where(z => z.ID == ID).ToList();                    
    }

    rptVWSmartBOM.LocalReport.DataSources.Clear();

   ReportDataSource rd1 = new ReportDataSource("Your DataTable name used in DataSet", List1);
   ReportDataSource rd2 = new ReportDataSource("Your DataTable name used in DataSet", List1);
   ReportDataSource rd3 = new ReportDataSource("Your DataTable name used in DataSet", List1);
   ReportViewer1.LocalReport.DataSources.Add(rd1);
   ReportViewer1.LocalReport.DataSources.Add(rd2);
   ReportViewer1.LocalReport.DataSources.Add(rd3);                                
   ReportViewer1.LocalReport.ReportPath = "xyz.rdlc";

   ReportViewer1.LocalReport.Refresh();