Rendering an RDLC report in HTML in ASP.NET MVC

Question

I would like to render an RDLC report in HTML within an ASP.NET MVC project.

I successfully made a prototype that renders an RDLC report in PDF, Excel, and TIFF image, with the help of this article. But I was surprised that HTML is not one of the default available formats in LocalReport.Render().

I came across this article, which describes a trick to enable the rendering format of HTML4.0, but I think that is only for a ReportViewer control (I could be wrong though).

The question is, in MVC how to render an RDLC report in HTML just like a ReportView does (see the screenshot below)?

Answer 1

This is a simple task. You can follow the following steps.

1. Create a folder in your solution and give a name Reports.
2. Add a ASP.Net web form and named it ReportView.aspx

3. Create a Class ReportData and add it to the Reports folder. Add the following code to the Class.

   public class ReportData
   {
     public ReportData()
     {
         this.ReportParameters = new List<Parameter>();
         this.DataParameters = new List<Parameter>();
     }
   
     public bool IsLocal { get; set; }
     public string ReportName { get; set; }
     public List<Parameter> ReportParameters { get; set; }
     public List<Parameter> DataParameters { get; set; }
   }
   
   public class Parameter
   {
     public string ParameterName { get; set; }
     public string Value { get; set; }
   }
   

4. Add another Class and named it ReportBasePage.cs. Add the following code in this Class.

   public class ReportBasePage : System.Web.UI.Page
   {
       protected ReportData ReportDataObj { get; set; }
   
       protected override void OnInit(EventArgs e)
       {
           base.OnInit(e);
           if (HttpContext.Current != null)
               if (HttpContext.Current.Session["ReportData"] != null)
               {
                   ReportDataObj = HttpContext.Current.Session["ReportData"] as ReportData;
                   return;
               }
           ReportDataObj = new ReportData();
           CaptureRouteData(Page.Request);
       }
   
   
       private void CaptureRouteData(HttpRequest request)
       {
           var mode = (request.QueryString["rptmode"] + "").Trim();
           ReportDataObj.IsLocal = mode == "local" ? true : false;
           ReportDataObj.ReportName = request.QueryString["reportname"] + "";
           string dquerystr = request.QueryString["parameters"] + "";
           if (!String.IsNullOrEmpty(dquerystr.Trim()))
           {
               var param1 = dquerystr.Split(',');
               foreach (string pm in param1)
               {
                   var rp = new Parameter();
                   var kd = pm.Split('=');
                   if (kd[0].Substring(0, 2) == "rp")
                   {
                       rp.ParameterName = kd[0].Replace("rp", "");
                       if (kd.Length > 1) rp.Value = kd[1];
                       ReportDataObj.ReportParameters.Add(rp);
                   }
                   else if (kd[0].Substring(0, 2) == "dp")
                   {
                       rp.ParameterName = kd[0].Replace("dp", "");
                       if (kd.Length > 1) rp.Value = kd[1];
                       ReportDataObj.DataParameters.Add(rp);
                   }
               }
           }
       }
   }
   

5. Add ScriptManager to the ReportView.aspx page. Now Take a Report Viewer to the page. In report viewer set the property AsyncRendering="false". The code is given below.

   <rsweb:ReportViewer ID="ReportViewerRSFReports" runat="server" AsyncRendering="false"
       Width="1271px" Height="1000px" >
   </rsweb:ReportViewer>
   

6. Add two NameSpace in ReportView.aspx.cs

   using Microsoft.Reporting.WebForms;
   using System.IO;
   

7. Change the System.Web.UI.Page to ReportBasePage. Just replace your code using the following.

   public partial class ReportView : ReportBasePage
   {
       protected void Page_Load(object sender, EventArgs e)
       {
           if (!IsPostBack)
           {
               RenderReportModels(this.ReportDataObj);
           }
       }
   
       private void RenderReportModels(ReportData reportData)
       {
           RASolarERPData dal = new RASolarERPData();
           List<ClosingInventoryValuation> objClosingInventory = new List<ClosingInventoryValuation>();
   
           // Reset report properties.
           ReportViewerRSFReports.Height = Unit.Parse("100%");
           ReportViewerRSFReports.Width = Unit.Parse("100%");
           ReportViewerRSFReports.CssClass = "table";
   
           // Clear out any previous datasources.
           this.ReportViewerRSFReports.LocalReport.DataSources.Clear();
   
           // Set report mode for local processing.
           ReportViewerRSFReports.ProcessingMode = ProcessingMode.Local;
   
           // Validate report source.
           var rptPath = Server.MapPath(@"./Report/" + reportData.ReportName +".rdlc");
   
           //@"E:\RSFERP_SourceCode\RASolarERP\RASolarERP\Reports\Report\" + reportData.ReportName + ".rdlc";
           //Server.MapPath(@"./Report/ClosingInventory.rdlc");
   
           if (!File.Exists(rptPath))
               return;
   
           // Set report path.
           this.ReportViewerRSFReports.LocalReport.ReportPath = rptPath;
   
           // Set report parameters.
           var rpPms = ReportViewerRSFReports.LocalReport.GetParameters();
           foreach (var rpm in rpPms)
           {
               var p = reportData.ReportParameters.SingleOrDefault(o => o.ParameterName.ToLower() == rpm.Name.ToLower());
               if (p != null)
               {
                   ReportParameter rp = new ReportParameter(rpm.Name, p.Value);
                   ReportViewerRSFReports.LocalReport.SetParameters(rp);
               }
           }
   
           //Set data paramater for report SP execution
           objClosingInventory = dal.ClosingInventoryReport(this.ReportDataObj.DataParameters[0].Value);
   
           // Load the dataSource.
           var dsmems = ReportViewerRSFReports.LocalReport.GetDataSourceNames();
           ReportViewerRSFReports.LocalReport.DataSources.Add(new ReportDataSource(dsmems[0], objClosingInventory));
   
           // Refresh the ReportViewer.
           ReportViewerRSFReports.LocalReport.Refresh();
       }
   }
   

8. Add a Folder to the Reports Folder and named it Report. Now add a RDLC report to the Reports/Report folder and named it ClosingInventory.rdlc.

9. Now add a Controller and Named it ReportController. In to the controller add the following action method.

   public ActionResult ReportViewer()
   {                
       ViewData["reportUrl"] = "../Reports/View/local/ClosingInventory/";
   
       return View();
   }
   

10. Add a view page click on the ReportViewer Controller. Named the view page ReportViewer.cshtml. Add the following code to the view page.

    @using (Html.BeginForm("Login"))
     { 
           @Html.DropDownList("ddlYearMonthFormat", new SelectList(ViewBag.YearMonthFormat, "YearMonthValue", "YearMonthName"), new { @class = "DropDown" })
    
      Stock In Transit: @Html.TextBox("txtStockInTransit", "", new { @class = "LogInTextBox" })
    
      <input type="submit" onclick="return ReportValidationCheck();" name="ShowReport"
                 value="Show Report" />
    
      }
    

11. Add an Iframe. Set the property of the Iframe as follows

    frameborder="0"  width="1000"; height="1000"; style="overflow:hidden;" scrolling="no"
    

12. Add Following JavaScript to the viewer.

    function ReportValidationCheck() {
    
    var url = $('#hdUrl').val();
    var yearmonth = $('#ddlYearMonthFormat').val();      
    var stockInTransit = $('#txtStockInTransit').val()
    
    if (stockInTransit == "") {
        stockInTransit = 0;
    }
    
    if (yearmonth == "0") {
        alert("Please Select Month Correctly.");
    }
    else {
    
        //url = url + "dpSpYearMonth=" + yearmonth + ",rpYearMonth=" + yearmonth + ",rpStockInTransit=" + stockInTransit;
    
        url = "../Reports/ReportView.aspx?rptmode=local&reportname=ClosingInventory&parameters=dpSpYearMonth=" + yearmonth + ",rpYearMonth=" + yearmonth + ",rpStockInTransit=" + stockInTransit;
    
        var myframe = document.getElementById("ifrmReportViewer");
        if (myframe !== null) {
            if (myframe.src) {
                myframe.src = url;
            }
            else if (myframe.contentWindow !== null && myframe.contentWindow.location !== null) {
                myframe.contentWindow.location = url;
            }
            else { myframe.setAttribute('src', url); }
        }
    }
    
    return false;
    }
    

13. In Web.config file add the following key to the appSettings section add

    key="UnobtrusiveJavaScriptEnabled" value="true"
    

14. In system.web handlers Section add the following key

    add verb="*" path="Reserved.ReportViewerWebControl.axd" type = "Microsoft.Reporting.WebForms.HttpHandler, Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"

15. Change your data source as your own. This solution is very simple and I think every one enjoy it.