如何通过AJAX创建/刷新并显示Report Viewer？静态方法致报表空白

我尝试刷新页面上预先放置的Report Viewer，但因为AJAX要求调用静态方法，所以将方法设为静态，Report Viewer也随之改为静态。方法执行无报错，但浏览器中的Report Viewer完全空白。

另有一个页面的Report Viewer可正常工作，区别在于该页面的方法和Report Viewer实体均为非静态。

前端AJAX代码 #

var paramReport = {
        fupId : idFup,
        version : idVersion
    };
    $.ajax({
        type: "POST",
        url: "FormHojaDeVidaProyecto.aspx/loadReporteFup",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(paramReport),
        complete: function() {
            toastr.success("Report Viewer llamado correctamente", "Informacion", {
                "timeOut": "0",
                "extendedTImeout": "0"
            });
        }
    })

后端C# WebMethod代码 #

[WebMethod]
public static void loadReporteFup(string fupId, string version)
{
    Boolean haypar = false;
    ReporteFUPv = new Microsoft.Reporting.WebForms.ReportViewer();
    ReporteFUPv.Width = 500;
    ReporteFUPv.Height = 500;
    ReporteFUPv.Reset();
    //ReporteFUPv.KeepSessionAlive = true;
    //ReporteFUPv.AsyncRendering = true;
    ReporteFUPv.ProcessingMode = ProcessingMode.Remote;
    IReportServerCredentials irsc = new CustomReportCredentials("pass", "pass", "user");
    ReporteFUPv.ServerReport.ReportServerCredentials = irsc;

    ReporteFUPv.ServerReport.ReportServerUrl = new Uri(".../ReportServer");

    List<ReportParameter> parametro = new List<ReportParameter>();

    parametro.Add(new ReportParameter("pFupID", fupId, true));
    haypar = true;
    parametro.Add(new ReportParameter("pVersion", version.Trim(' '), true));
    haypar = true;

    ReporteFUPv.PromptAreaCollapsed = true;
    ReporteFUPv.ServerReport.ReportPath = "/...";

    if (haypar)
    {
        ReporteFUPv.ServerReport.SetParameters(parametro);
        ReporteFUPv.LocalReport.Refresh();
    }
}

问题分析与解决方案 #

核心原因 #

静态WebMethod属于类级别，没有页面实例上下文，你在静态方法中新建的ReporteFUPv是独立对象，和页面上已存在的Report Viewer控件毫无关联，自然无法更新页面上的控件显示。另外代码中存在错误：设置了ProcessingMode.Remote却调用LocalReport.Refresh()，应该调用ServerReport.Refresh()。

解决步骤 #

1. 用UpdatePanel实现局部刷新
   将页面上的Report Viewer放入UpdatePanel，通过AJAX传递参数后触发UpdatePanel回发，在页面实例方法中更新控件。

2. 修改后端WebMethod
   启用Session存储参数，供页面回发时读取：

   [WebMethod(EnableSession = true)]
   public static void loadReporteFup(string fupId, string version)
   {
       HttpContext.Current.Session["ReportFupId"] = fupId;
       HttpContext.Current.Session["ReportVersion"] = version.Trim(' ');
   }
   

3. 修改前端AJAX回调
   触发UpdatePanel回发：

   complete: function() {
       toastr.success("参数已提交，正在刷新报表", "信息", {
           "timeOut": "2000",
           "extendedTImeout": "1000"
       });
       __doPostBack('<%= UpdatePanel1.ClientID %>', '');
   }
   

4. 页面后台处理回发逻辑
   在页面实例方法中读取Session参数，更新Report Viewer：

   protected void Page_Load(object sender, EventArgs e)
   {
       if (IsPostBack && Session["ReportFupId"] != null && Session["ReportVersion"] != null)
       {
           string fupId = Session["ReportFupId"].ToString();
           string version = Session["ReportVersion"].ToString();
           UpdateReportViewer(fupId, version);
           Session.Remove("ReportFupId");
           Session.Remove("ReportVersion");
       }
   }
   
   private void UpdateReportViewer(string fupId, string version)
   {
       Boolean haypar = false;
       ReporteFUPv.Reset();
       ReporteFUPv.ProcessingMode = ProcessingMode.Remote;
       IReportServerCredentials irsc = new CustomReportCredentials("pass", "pass", "user");
       ReporteFUPv.ServerReport.ReportServerCredentials = irsc;
   
       ReporteFUPv.ServerReport.ReportServerUrl = new Uri(".../ReportServer");
   
       List<ReportParameter> parametro = new List<ReportParameter>();
   
       parametro.Add(new ReportParameter("pFupID", fupId, true));
       haypar = true;
       parametro.Add(new ReportParameter("pVersion", version, true));
       haypar = true;
   
       ReporteFUPv.PromptAreaCollapsed = true;
       ReporteFUPv.ServerReport.ReportPath = "/...";
   
       if (haypar)
       {
           ReporteFUPv.ServerReport.SetParameters(parametro);
           ReporteFUPv.ServerReport.Refresh();
       }
   }
   

5. 页面ASPX添加UpdatePanel

   <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
       <ContentTemplate>
           <rsweb:ReportViewer ID="ReporteFUPv" runat="server" Width="500px" Height="500px"></rsweb:ReportViewer>
       </ContentTemplate>
   </asp:UpdatePanel>
   

内容的提问来源于stack exchange，提问作者Giovanni Mosquera