在mvc視圖中實現rdlc報表展現在mvc視圖中實現rdlc報表展現(補充)

時間 2019-12-12

標籤 mvc 視圖實現 rdlc 報表展現補充简体版

原文原文鏈接

需求：在view視圖頁面中嵌入rdlc報表，rdlc的xml爲動態傳入的xml字符串。本項目是基於abp框架html

可能出現問題：web

一、rdlc報表是由asp.net的服務器控件ReportViewer來支持的，view視圖不能直接使用服務器控件json

二、ReportViewer須要經過aspx頁面來承載，並在服務端事件中完成對控件的xml綁定、datatable綁定服務器

三、因爲是基於abp框架的項目，不能在aspx.cs後臺頁面中直接實例化IxxAppService接口的實現類mvc

想達到的效果以下圖：框架

上部分爲報表的篩選區域，下部分爲rdlc報表展現內容。asp.net

本次實現的思路爲：ide

一、以view視圖爲主頁面，在視圖的上部分完成篩選信息的展現和綁定；post

二、視圖下部分嵌入一個iframe，iframe地址指向一個aspx頁面，該頁中實現ReportViewer控件的賦值和綁定ui

視圖頁面的代碼參考以下：

    <div class="tab-content" style="width:100%;height:100%">
        <!--篩選區域-->
        <div role="tabpanel" class="tab-pane active" id="navMenu" style="padding-top: 4px;padding-bottom: 1px;">

            <div class="collapse row" id="filterHts" style="margin-right: 2px;">
            </div>
            <div id="divTools" style="padding: 0 5px 5px;cursor: pointer;height: 33px;line-height:28px" title="點擊展開搜索條件區">
                <span id="searchTools" onclick="$('#filterHts').click();" style="display:none;float:left"></span>
                <span id="ExternalTools" style="float:left;"></span>
                <span id="spTools" style="float:left;"></span>
                <span id="spanSearch" style="float:right;line-height:12px;height:12px"><i class="fa fa-chevron-down" title="點擊展開搜索條件區" aria-hidden="true" style="cursor:pointer;margin:0px 0px 0px 5px;color:#76838f"></i><i class="fa fa-chevron-up" aria-hidden="true" title="點擊關閉搜索條件區" style="cursor:pointer;display:none;margin-left:5px;color:#76838f"></i></span>
            </div>

        </div>
        <div style="width:100%;height:500px">
            <iframe style="width:100%;height:500px" id="ifm" src="~/Rdlc/rdlc.aspx"></iframe>
        </div>  
    </div>

View Code

rdlc.aspx頁面代碼參考：

<%@ Page Language="C#" CodeBehind="rdlc.aspx.cs" Inherits="Easyman.Web.Rdlc.rdlc" %>

<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=12.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:HiddenField runat="server" ID="rpName" />
            <asp:HiddenField runat="server" ID="xmlStr" />
            <asp:HiddenField runat="server" ID="hidDataTable" />
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <rsweb:ReportViewer ID="reportViewer1" runat="server"  DocumentMapWidth="100%" Font-Names="Verdana" 
                Font-Size="8pt" WaitMessageFont-Names="Verdana"  AsyncRendering="False" SizeToReportContent="True" 
                WaitMessageFont-Size="14pt" Width="100%" Height="100%" ZoomMode="FullPage" >
            </rsweb:ReportViewer>
        </div>
        <div style="display:none">
            <asp:Button ID="SearchBtn" runat="server" OnClick="SearchBtn_Click" Text="查詢" />
        </div>
    </form>
</body>
</html>

View Code

當點擊了視圖頁查詢按鈕以後，在視圖頁中實現對 rdlc.aspx頁面中的隱藏控件賦值（aspx頁面中隱藏控件有：xml、datatable的json數據）

隱藏控件賦值以後觸發 rdlc.aspx頁面查詢按鈕事件SearchBtn_Click

視圖頁關鍵js以下：

        $("#ifm").contents().find("#rpName").val($("#Name").val());
        $("#ifm").contents().find("#xmlStr").val(Encrypt(rdlcReport.RdlcXml));
        $("#ifm").contents().find("#hidDataTable").val(data.responseText);

        //endregion

        $("#ifm").contents().find("#SearchBtn").click();//觸發RDLC子頁面的查詢按鈕
        $("#ifm").contents().find("#SearchBtn").hide();

View Code

rdlc.aspx.cs查詢後臺事件方法SearchBtn_Click的代碼以下：

        protected void SearchBtn_Click(object sender, EventArgs e)
        {
            string xmlStr = EncryptHelper.AesDecrpt(this.xmlStr.Value);
            string tbJson = this.hidDataTable.Value;
            string rpName = this.rpName.Value;
            DataTable dt = new DataTable();
            if(!string.IsNullOrEmpty( tbJson)&&tbJson!="[]")
            {
                dt = JSON.ToDataTable(tbJson);
            }
            reportViewer1.LocalReport.DataSources.Clear();
            reportViewer1.LocalReport.DisplayName = rpName;
            reportViewer1.LocalReport.LoadReportDefinition(GenerateRdlc(xmlStr));
            ReportDataSource reportDataSource = new ReportDataSource("DataSet1",dt);
            reportViewer1.LocalReport.DataSources.Add(reportDataSource);
            reportViewer1.LocalReport.Refresh();
            
        }

View Code

rdlc.aspx.cs後臺的完整代碼以下：

using Abp.Domain.Repositories;
using Easyman.Common;
using Easyman.Common.Helper;
using Easyman.Domain;
using Easyman.Service;
using Microsoft.Reporting.WebForms;
using System;
using System.Collections.Generic;
using System.Data;
using System.IO;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Easyman.Web.Rdlc
{
    public partial class rdlc : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
        /// <summary>
        /// 之內存流形式返回rdlc報表配置信息
        /// </summary>
        /// <param name="inStr"></param>
        /// <returns></returns>
        public MemoryStream GenerateRdlc(string inStr)
        {
            byte[] b = Encoding.UTF8.GetBytes(inStr);
            MemoryStream ms = new MemoryStream(b);
            return ms;
        }
        protected void SearchBtn_Click(object sender, EventArgs e)
        {
            string xmlStr = EncryptHelper.AesDecrpt(this.xmlStr.Value);
            string tbJson = this.hidDataTable.Value;
            string rpName = this.rpName.Value;
            DataTable dt = new DataTable();
            if(!string.IsNullOrEmpty( tbJson)&&tbJson!="[]")
            {
                dt = JSON.ToDataTable(tbJson);
            }
            reportViewer1.LocalReport.DataSources.Clear();
            reportViewer1.LocalReport.DisplayName = rpName;
            reportViewer1.LocalReport.LoadReportDefinition(GenerateRdlc(xmlStr));
            ReportDataSource reportDataSource = new ReportDataSource("DataSet1",dt);
            reportViewer1.LocalReport.DataSources.Add(reportDataSource);
            reportViewer1.LocalReport.Refresh();
            
        }
    }
}