Setting up ReportViewer in Remote Processing Mode with AsyncRendering

Question

I'm trying to setup ReportViewer in an MVC3 Enviroment configured as follows,

<form id="Form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <rsweb:ReportViewer ID="ReportViewer" runat="server" Width="652px" AsyncRendering="true" PageCountMode="Actual" ProcessingMode="Remote" SizeToReportContent="true">
        <ServerReport ReportServerUrl="http://NMBSC-INTERN02/reportserver" ReportPath="/ReportProject/TestReport3" />
    </rsweb:ReportViewer>
</form>

The problem is that I get an error on the page, (from chrome debugging tools)

Uncaught Sys.WebForms.PageRequestManagerParserErrorException: Sys.WebForms.PageRequestManagerParserErrorException: The message received from the server could not be parsed. ScriptResource.axd:237
Error$create ScriptResource.axd:237
Sys$WebForms$PageRequestManager$_createPageRequestManagerParserError ScriptResource.axd:649
Sys$WebForms$PageRequestManager$_parseDelta ScriptResource.axd:1410
Sys$WebForms$PageRequestManager$_onFormSubmitCompleted ScriptResource.axd:1289
(anonymous function) ScriptResource.axd:47
(anonymous function) ScriptResource.axd:3484
Sys$Net$WebRequest$completed ScriptResource.axd:6364
Sys$Net$XMLHttpExecutor._onReadyStateChange ScriptResource.axd:5984

I've looked around quite a bit in regards to the Error but it always refers to remove the UpdatePanel but I don't have one. I do have that entire partial view (above) in an iFrame but I get the Error whether it's in the IFrame or not. Other solutions talk about Server.Transfer and Response.Write calls but being that this isn't my code (it's generated by the ReportViewer Control) I'm guessing I'm just doing something wrong in the configuration.

Is there something I'm missing to get Remote Processing Mode to work? I can do this in Local but if I can get Remote Processing Mode to work it seems like it'd be best for the project I'm currently working on.

Note

I guess it's worth noting that if I turn off asynchronous mode, the report will load correctly. The problem is that the Navigation buttons on the toolbar (next, first, last, previous) don't work and throw, awkwardly enough, the same error as when AsyncRendering is turned on.

Answer 1

The ReportViewer doesn't work with MVC by default because it's a server side control, so I had to adapt the process.

It contains 2 views, a parent view that contains inputs so that the user can change report parameters and a partial view that is rendered inside the parent, which is the actual report. Whenever a user submits their current parameters, we use an ajax call to retrieve the partial from a controller and place the resulting view on the page, refreshing the report.

First, the action for the parent:

public ActionResult MyReport()
{
    return View();
}

Next, the view for the parent:

<div>
    <div>

      <!-- input elements go here -->
      <input type="button" value='Update'/>
    </div>
    <div id="ReportPartial"></div>
</div>

<script type="text\javascript">
    $(document).ready(function(){
        $("input[type=button]").click(function(e){
            $.get("/Report/MyReportPartial", "put data from the input elements here", function(serverData){
                $("#ReportPartial").html(serverData);
            });
        });
    });

</script>

Now, we setup a controller action that returns a partial view. The controller action has the same parameters as the report:

public ActionResult MyReportPartial(report parameters go here)
{

    //set ViewBag properties here to the report parameters.
    //Normally, I do not advise using the ViewBag, but I used it in this instance to
    //get it working in the aspx page.

    return PartialView("ReportViewPartial", null);
}

Finally, the partial is an aspx page:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%@ Register TagPrefix="rsweb" Namespace="Microsoft.Reporting.WebForms" Assembly="Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" %>

<form Id="Form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<rsweb:ReportViewer ID="ReportViewer1" runat="server" 
ProcessingMode="Remote" SizeToReportContent="True" ShowBackButton="False" 
ShowFindControls="False" ShowPageNavigationControls="False" 
ShowZoomControl="False" AsyncRendering="False" ShowRefreshButton="False" ShowExportControls="False" Height="500" Width="500">
</rsweb:ReportViewer>
</form>

<script runat="server">
void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack) return;
    ReportViewer1.ProcessingMode = ProcessingMode.Remote;
    ReportViewer1.ServerReport.ReportServerUrl = new Uri(ConfigurationManager.AppSettings["ReportServerUrl"]);
    ReportViewer1.ServerReport.ReportPath = ConfigurationManager.AppSettings["ReportPath"];
    var rptParameters = new List<ReportParameter>
                            {
                                //Add report parameters here from the ViewBag
                            };

    ReportViewer1.ServerReport.SetParameters(rptParameters);
    ReportViewer1.ServerReport.Refresh();
}
</script>
<script type="text/javascript">
    //the report is hidden when loaded. Using the following jQuery to show it.
    $(document).ready(function () {
        var div = $("#ReportPartial").find("div[id*='_ReportControl']");
        div.show();
        div.find("div:first").show();
    });
</script>

Now it's setup so that whenever a user submits, we ajax load an aspx page with the report, essentially refreshing it. You lose some features of the report control, but it worked for what the client needed.