文檔首頁>>FastReport-web報表開發(fā)系列教程（持續(xù)更新中）>>如何創(chuàng)建交互式網(wǎng)頁報表（詳細(xì)信息頁面）

如何創(chuàng)建交互式網(wǎng)頁報表（詳細(xì)信息頁面）

在之前的文章中，我們考慮了如何創(chuàng)建一個包含詳細(xì)報表的交互式報表。本質(zhì)上，我們其實是創(chuàng)建了兩個報表，其中一個指向另一個。

但是，這一切還可以變得更簡單，你可以不必為詳細(xì)信息創(chuàng)建單獨的報表。你可以在主報表的一個單獨頁面上做詳細(xì)的報表。我們來看看如何做到這一點。

創(chuàng)建一個報表。至于數(shù)據(jù)源，我使用的是FastReport.Net的xml數(shù)據(jù)庫，類別和產(chǎn)品。

如何創(chuàng)建交互式網(wǎng)頁報表

創(chuàng)建表格之間的關(guān)聯(lián)：

如何創(chuàng)建交互式網(wǎng)頁報表

在數(shù)據(jù)窗口中，你可以看到一個新的關(guān)聯(lián)：

如何創(chuàng)建交互式網(wǎng)頁報表

現(xiàn)在將這些字段放在數(shù)據(jù)帶上：

如何創(chuàng)建交互式網(wǎng)頁報表

如你所見，我們放置了兩個字段：CategoryName和Picture。在數(shù)據(jù)帶區(qū)中將Columns-> Count屬性設(shè)置為2。

如何創(chuàng)建交互式網(wǎng)頁報表

添加一個新的報表頁面。其中，我們將在其中創(chuàng)建一個詳細(xì)信息報表 - 產(chǎn)品清單。報表模板非常簡單：

如何創(chuàng)建交互式網(wǎng)頁報表

現(xiàn)在你需要處理產(chǎn)品清單的過濾。我們將按類別名稱進(jìn)行過濾，把類別名稱從第一頁轉(zhuǎn)移到第二頁。為此，請在第二頁中創(chuàng)建一個報表參數(shù)：

如何創(chuàng)建交互式網(wǎng)頁報表

現(xiàn)在，雙擊打開數(shù)據(jù)帶區(qū)編輯器。打開過濾選項卡：

如何創(chuàng)建交互式網(wǎng)頁報表

在過濾器表達(dá)式中，我們使用了關(guān)聯(lián)的類別表中的CategoryName字段。

轉(zhuǎn)到報表的第一頁。我們點擊數(shù)據(jù)帶區(qū)的Categories.CategoryName字段。在屬性查看器中，我們找到超鏈接。然后打開超鏈接編輯器：

如何創(chuàng)建交互式網(wǎng)頁報表

選擇“詳細(xì)報表頁面”標(biāo)簽。這里我們選擇：報表第二頁，參數(shù)“類別”。對于參數(shù)的值，請設(shè)置表達(dá)式：[Categories.CategoryName]

在窗體底部啟用“修改對象的外觀，使其看起來像一個可點擊的鏈接”選項。

報表已經(jīng)就緒。我們保存它，然后進(jìn)入第二階段。

在第二階段，我確定創(chuàng)建一個Web應(yīng)用程序演示?，F(xiàn)在創(chuàng)建一個MVC項目，添加鏈接到庫FastReport.dll和FastReport.Web.dll。

報表將被放置在網(wǎng)站主頁上。因此，的邏輯放置在控制器HomeController中。

添加庫：

using FastReport.Web;
using System.Web.UI.WebControls;

和以下代碼：

public ActionResult Index()
 {
 WebReport webReport = new WebReport(); //create the inctance of WebReport object.
 string report_path = "J:\\Program Files (x86)\\FastReports\\FastReport.Net\\Demos\\Reports\\"; //Reports location
 System.Data.DataSet dataSet = new System.Data.DataSet(); //Create DataSet
 dataSet.ReadXml(report_path + "nwind.xml"); //Load xml db into dataset
 webReport.Report.RegisterData(dataSet, "NorthWind"); //register the dataset in report
 webReport.Report.Load(report_path + "Simple Interactive.frx"); //load a report into WebReport
 ViewBag.WebReport = webReport; //pass the report to View
 return View();
 }

現(xiàn)在我們需要在Index.cshtml視圖（文件夾Views - > Home）中顯示我們的報表。

網(wǎng)頁的代碼如下所示：

@{
 ViewBag.Title = "Home Page";
}
@ViewBag.WebReport.GetHtml()

在最后一行中，控制器將報表傳遞給視圖進(jìn)行顯示。

在文件_Layout.cshtml中，你需要連接腳本：

<head>
@WebReportGlobals.Scripts()
@WebReportGlobals.Styles() 
</head>

在位于Views文件夾中的web.config文件中添加命名空間。

<namespaces>
 <add namespace="FastReport" />
 <add namespace="FastReport.Web" />
 </namespaces>

將處理句柄添加到位于項目根目錄下的Web.config文件中：

<system.webServer> 
 <handlers>
 <add name="FastReportHandler" path="FastReport.Export.axd" verb="*" type="FastReport.Web.Handlers.WebExport"/>
 </handlers>
 </system.webServer>

加載程序并查看報表：

如何創(chuàng)建交互式網(wǎng)頁報表

試試點擊類別“Confections”。

如何創(chuàng)建交互式網(wǎng)頁報表

就這樣我們創(chuàng)建了一個交互式報表，并且不必為了詳細(xì)信息而創(chuàng)建一個單獨的文件。

產(chǎn)品介紹 | 下載試用 | 優(yōu)惠活動 | 在線客服 | 聯(lián)系Elyn

如何創(chuàng)建交互式網(wǎng)頁報表（詳細(xì)信息頁面）

推薦閱讀

用科技創(chuàng)就卓越

Create excellence with technology