Telerik Reports 是 Progress Telerik 推出的專業報表工具，支持 .NET、ASP.NET Core、Blazor、Angular 等多種平臺，幫助開發者快速創建、設計和集成交互式報表。它提供豐富的設計器、靈活的數據源支持以及強大的導出功能（PDF、Excel、Word 等），適用于企業應用、數據分析和可視化展示場景，讓報表開發和管理更加高效便捷。

Telerik Report Viewer 允許您直接在承載頁面（ASP.NET Core 頁面）中管理報表，并讓頁面根據用戶與報表的互動作出響應。

獲取Telerik Reports最新版下載

Telerik_KendoUI技術交流群（QQ）：726377843

雖然 Progress Telerik Reporting 中的各種報表設計器能讓您實現炫酷操作，但最終，報表會以 TRDP 文件形式保存（實際上是一個聲明性 XML 文檔），并可能由組織的 Report Server 提供服務（本文即假設采用該方式）。

Telerik 報表本質上還是具有高度交互性的。例如，您可以通過任何 Report Designer 創建一個報表，讓用戶選擇他們希望查看的數據（通過 UI 中顯式選擇過濾條件，或在報表中選擇顯示項），而這類操作完全可以通過拖拽和設置報表選項來聲明式完成，無需編寫代碼。

然而，更進一步的交互是：讓報表與承載它的頁面互相響應。可表現為：

• 承載報表的頁面根據用戶與報表的交互進行響應；
• 報表根據用戶在承載頁面的交互做出響應。

實現這兩種交互形式雖需要編碼，但您可以聲明式地啟動該過程。

設置（Setting Up）

本文使用 HTML 與 JavaScript 構建如下結構：

• HTML div元素來保存報表
• HTML樣式元素，并使用CSS屬性來控制報表的外觀
• JavaScript對div元素ID的引用
• 一個名為 loadReport 的 JavaScript 函數，顯示Telerik Report Server附帶的一個示例報表的修改版本。

代碼示例如下：

HTML

<div id="dashboard">
loading...
</div>

<style>
#dashboard {
position: absolute;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
overflow: hidden;
font-family: Verdana, Arial;
}
</style>

JavaScript

<script>
const dashboardDiv = $("#dashboard");

const loadReport = () => {
dashboardDiv.telerik_ReportViewer({
reportServer: {
url: "http://...",
username: "…",
password: "…"
},
reportSource: {
report: "Samples/Dashboard"
}
});
};
</script>

如上 loadReport 函數所示，加載報表本質上是一個聲明式操作。要在選定的div元素中顯示報告，需要將一個JavaScript對象文字傳遞給與div元素綁定的telerik_ReportView函數，該對象文字聲明了Telerik Report Viewer需要的所有信息。

有了loadReport函數，就可以在頁面的jQuery ready事件中調用該函數來加載報表。加載報表后，捕獲對報表的全局引用：

JavaScript

let rv;

$(() => {
loadReport();
rv = dashboardDiv.data("telerik_ReportViewer");
}

這里示范使用 “Dashboard” 示例報表，因為它提供了一個交互性場景：在Dashboard報表中，用戶可以從報表右側的列表中選擇年份，并將該年份顯示在左側的報表主體中：

捕獲報表事件

為了讓應用程序的主機頁面在用戶與頁面顯示的報表交互時做出反應，需要將JavaScript函數連接到Report Viewer事件，Telerik Report Viewer提供了十多個事件。

本文使用使用updateUi事件，該事件在報表的UI發生變化時觸發（選擇新的年份確實會改變報表的UI）。要將函數綁定到事件，需要在定義報表的JavaScript對象文本中聲明該事件，然后將函數綁定到該事件。

將函數綁定到updateUi事件如下所示：

reportSource: {
report: "Samples/Dashboard"
},
updateUi: e => {

}

updateUi事件可能不是應用程序的最佳選擇。例如，如果您希望能夠取消更改（可能在驗證用戶的輸入之后），可能更喜歡使用interactiveActionExecuting事件，該事件支持取消用戶更改，而updateUi事件不支持。

如果您開始在報表聲明中連接多個事件（或者事件的函數變大），那么它可能會使對象文字難以閱讀。如果是這樣，可以在對象字面量之外定義函數，并將函數名稱與報表對象字面量中的事件綁定，如下所示：

JavaScript

const handleYearChange = e => {

}
};

const loadReport = () => {
dashboardDiv.telerik_ReportViewer(
{
reportServer: {
url: "http://...",
username: "…",
password: "…"
},
reportSource: {
report: "Samples/Dashboard"
},
updateUi: handleYearChange
}
);
};

如果您希望事件在某些時候可用，可以使用Report Viewer的bind和unbind方法根據事件的名稱動態地綁定事件，并傳遞事件的名稱（稍作修改）和您希望綁定到事件的函數。這段代碼綁定并立即解綁定handleYearChange函數，例如：

JavaScript

rv.bind(telerikReportViewer.Events.UPDATE_UI, handleYearChange);
rv.unbind(telerikReportViewer.Events.UPDATE_UI, handleYearChange);

編寫主機頁面代碼

既然已經將JavaScript函數綁定到報表的事件，就可以通過加載報表后創建全局引用訪問報表了。或者在函數內部，您可以使用傳遞給函數的e參數來訪問報表（它在e參數data.sender屬性中）：

JavaScript

const handleYearChange = e => {
let rv = e.data.sender;
}

有了這個引用，現在可以擴展handleYearChange函數來更新主機頁，并讓主機頁響應用戶對報表的更改。對于這個案例研究，將在主機頁面的一個文本框中顯示用戶在報表中選擇的年份。

 首先做簡單的部分，并添加該文本框，設置其id屬性為currentYear，然后創建一個JavaScript全局引用的文本框：

HTML

<input id="currentYear" />

JavaScript

const curInput = $("#currentYear");

除了事件之外，Report Viewer對象模型還有一組方法，這些方法返回可用于管理報表的對象。例如，Report Viewer ReportSource方法返回一個對象，該對象只有一個屬性，命名為parameters。反過來，該parameters屬性公開了一個對象，該對象對報表中定義的每個參數都具有命名屬性（必須通過在報表設計器中打開報表來獲取參數的名稱）。

在示例報表中，保存當前選擇的年份的參數稱為ReportYear，可以使用該參數檢索報表當前顯示的年份。

需要注意的是：在綁定到updateUi事件的函數中要小心一些，因為該事件會在加載頁面時反復引發—對于頁面的各個部分（頁眉、正文、頁腳等），每次都會觸發一次，代碼多次執行可能會導致微妙的bug。

以下是updateUi事件中的代碼，用于獲取ReportYear參數的值并將其填充到文本框中（但只在參數更改時執行一次）：

JavaScript

let currentYear;

updateUi: (e) => {
parms = rv.reportSource().parameters;
if (currentYear !== parms.ReportYear) {
currentYear = parms.ReportYear;
curInput.val(parms.ReportYear);
}
}

現在，每當用戶在報表中選擇年份時，報表主機頁面上的文本框將被更新。

與報表交互

正如一開始所說，交互性有兩種方式。當用戶與報表的宿主頁交互時，您可能希望報表響應該更改。在本文的案例研究中，可能西藥報表顯示用戶在主機頁面上的文本框中輸入一年的數據。

實現這一點需要從用戶輸入（CurrentYear文本框）中為報表（在本文的例子中是ReportYear）設置適當的參數，并刷新報表。為此擴展了文本框的聲明，以便在用戶更改文本框的內容并退出文本框時調用一個函數：

HTML

<input id="currentYear" onchange="updateReport()" />

在這個新的updateReport函數中，需要從文本框中檢索當前值，更新報告上的適當參數（在本文的例子中是ReportYear），并調用報告的refreshReport方法—仍然使用對加載報告后創建的報告的全局引用。代碼像這樣：

JavaScript

let UpdateReport = () => {
let parms = rv.reportSource().parameters;
parms.ReportYear = curInput.val();
rv.refreshReport();
};

現在，當用戶與主機頁面交互時，報表將做出響應。

更多產品資訊及授權，歡迎來電咨詢：023-68661681

關于慧都科技

慧都是?家?業數字化解決?案公司，專注于軟件、?油與?業領域，以深?的業務理解和?業經驗，幫助企業實現智能化轉型與持續競爭優勢。

慧都是Progress Telerik中國區的合作伙伴，Progress Telerik是一套為.NET開發者提供的豐富UI組件庫，通過提供一套功能強大、預置豐富的.NET UI組件庫（如數據網格、圖表、日程管理等），幫助企業開發者顯著簡化了Web和桌面應用程序的開發流程，快速構建出用戶體驗現代化且功能完備的企業級應用。