文檔首頁(yè)>>ActiveReports使用教程2020>>報(bào)表控件ActiveReports：如何使用ASP .NET MVC Core創(chuàng)建Web 設(shè)計(jì)器（二）

報(bào)表控件ActiveReports：如何使用ASP .NET MVC Core創(chuàng)建Web 設(shè)計(jì)器（二）

ActiveReports 是一款專注于 .NET 和 .NET Core 平臺(tái)的報(bào)表控件。通過(guò)拖拽式報(bào)表設(shè)計(jì)器，可以快速地設(shè)計(jì) Excel表格、Word文檔、圖表、數(shù)據(jù)過(guò)濾、數(shù)據(jù)鉆取、精準(zhǔn)套打等類型報(bào)表，全面滿足 WinForm、ASP.NET、ASP.NET MVC、WPF 平臺(tái)中各種報(bào)表的開發(fā)需要。同時(shí)，通過(guò)豐富的 API 可以靈活的實(shí)現(xiàn)報(bào)表創(chuàng)建、加載和運(yùn)行時(shí)的個(gè)性化自定義需求。

點(diǎn)擊下載ActiveReports最新試用版

選擇帶有默認(rèn).NET Core和ASP .NET Core 3.1選項(xiàng)的Empty項(xiàng)目模板。主題描述了使用ASP .NET MVC Core和ASP .NET MVC創(chuàng)建Web Designer示例。

ASP .NET MVC核心

使用ASP .NET MVC Core應(yīng)用程序創(chuàng)建Web設(shè)計(jì)器示例的步驟如下（接上文點(diǎn)擊此處查閱）：

11、復(fù)制以下設(shè)計(jì)器文件/文件夾，并將其粘貼到示例項(xiàng)目wwwroot子文件夾中：

baseServerApi.js
web-designer.css
web-designer.js
vendor folder

如果您想使用我們的示例對(duì)話框來(lái)保存報(bào)告，也可以選擇復(fù)制file-dialog.css和file-dialog.js。

12、在解決方案資源管理器中，右鍵單擊wwwroot，然后選擇添加>新建項(xiàng)。

13、選擇“ HTML頁(yè)面”項(xiàng)目類型，輸入index.html，然后單擊“添加”。

14、在解決方案資源管理器中，找到新添加的index.html并按如下所示修改其內(nèi)容：

<!DOCTYPE html>
<html>
<head>
<title>Web Designer Sample</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- designer-related css -->
<link rel="stylesheet" href="vendor/css/materialdesignicons.min.css" media="all" type="text/css" />
<link rel="stylesheet" href="vendor/css/bootstrap.min.css" />
<link rel="stylesheet" href="vendor/css/font-awesome.min.css">
<link rel="stylesheet" href="vendor/css/ionicons.min.css">
<link rel="stylesheet" href="vendor/css/fonts-googleapis.css" type="text/css">
<link rel="stylesheet" href="web-designer.css" />
</head>
<body class="theme-blue">
<!-- designer-related js -->
<script src="vendor/js/jquery.min.js"></script>
<script src="vendor/js/bootstrap.min.js"></script>
<script src="baseServerApi.js"></script>
<script src="web-designer.js"></script>
<!-- designer root div -->
<div id="designer-id" style="width: 100%; height: 100%;"></div>
<script>
// create designer options
var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions(baseServerApi);
// render designer application
GrapeCity.ActiveReports.WebDesigner.renderApplication('designer-id', designerOptions);
</script>
</body>
</html>

15、構(gòu)建您的解決方案（構(gòu)建>構(gòu)建解決方案）并運(yùn)行它。在瀏覽器中打開帶有空白R(shí)DL報(bào)告的WebDesigner。

16、如果您不想打開空白報(bào)告，而是要打開資源子文件夾中的現(xiàn)有報(bào)告之一（在上面的步驟12中添加），則需要在createDesignerOptions（）函數(shù)調(diào)用之后在index.html中添加帶有報(bào)告名稱的以下行：

index.html
designerOptions.reportInfo.id = "MyReport.rdlx";

17、如果在步驟14中將file-dialog.css和file-dialog.js復(fù)制到示例項(xiàng)目wwwroot子文件夾，則可以插入示例對(duì)話框以保存報(bào)告。
需要在index.html中執(zhí)行以下步驟才能插入對(duì)話框組件：
i. 在標(biāo)記中，在web-designer.css附近添加file-dialog.css：

<link rel="stylesheet" href="file-dialog.css" />
<link rel="stylesheet" href="web-designer.css" />

ii. 在標(biāo)記中，在web-designer.js附近添加file-dialog.js：

<script src="file-dialog.js"></script>
<script src="web-designer.js"></script>

iii. 在設(shè)計(jì)器根div和對(duì)話框根div附近：

<!-- designer root div -->
< div id="designer-id" style="width: 100%; height: 100%;"></div>
<!-- save as dialog root div -->
< div id="save-as-dialog-id" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 9999;"></div>

iv. 修改呈現(xiàn)設(shè)計(jì)器應(yīng)用程序的<script>標(biāo)記內(nèi)容：

<script>
var showElement = function (id) {
if (!id) return;
($('#' + id)).css('display', 'block');
};
var hideElement = function (id) {
if (!id) return;
($('#' + id)).css('display', 'none');
};
var designerId = 'designer-id';
var saveAsDialogId = 'save-as-dialog-id';
function onSaveAs(options) {
showElement(saveAsDialogId);
// render save-as dialog
fileDialog.createSaveReportAsDialog(saveAsDialogId, {
locale: options.locale,
api: {
getReportsList: function () {
return baseServerApi.getReportsList()
.then(function (reportsList) {
return reportsList.map(function (reportInfo) {
return { path: reportInfo.Name };
});
});
},
saveReport: function (saveOptions) {
return baseServerApi.saveNewReport({
name: saveOptions.path,
content: options.reportInfo.content,
}).then(function (saveResult) {
return { id: saveResult.Id };
});
},
},
reportInfo: {
path: options.reportInfo.name,
},
onSuccess: function (saveResult) {
hideElement(saveAsDialogId);
options.onSuccess({ id: saveResult.id, name: saveResult.path });
},
onClose: function () {
hideElement(saveAsDialogId);
},
});
};
// create designer options
var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions(baseServerApi);
// enable showing save-as button
designerOptions.saveAsButton.visible = true;
// specify behavior on save-as
designerOptions.onSaveAs = onSaveAs;
// render designer application
GrapeCity.ActiveReports.WebDesigner.renderApplication(designerId, designerOptions);
</script>

您會(huì)獲得一個(gè)帶有插入的示例另存為對(duì)話框的設(shè)計(jì)器。這種簡(jiǎn)約的設(shè)計(jì)器可用于編輯現(xiàn)有報(bào)告，而無(wú)需添加新數(shù)據(jù)集。但是，如果您需要?jiǎng)?chuàng)建全新的報(bào)告，添加數(shù)據(jù)集和預(yù)覽設(shè)計(jì)器中的報(bào)告，請(qǐng)參閱Web Designer API主題。

這就是如何使用ASP .NET MVC Core創(chuàng)建Web 設(shè)計(jì)器的完整內(nèi)容了如果你對(duì)我們的產(chǎn)品感興趣或者有任何疑問，歡迎咨詢
慧都在線客服>>

報(bào)表控件ActiveReports：如何使用ASP .NET MVC Core創(chuàng)建Web 設(shè)計(jì)器（二）

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

Create excellence with technology