報表控件ActiveReports：如何使用ASP .NET MVC Core創(chuàng)建Web 設(shè)計器（二）
ActiveReports 是一款專注于 .NET 和 .NET Core 平臺的報表控件。通過拖拽式報表設(shè)計器，可以快速地設(shè)計 Excel表格、Word文檔、圖表、數(shù)據(jù)過濾、數(shù)據(jù)鉆取、精準(zhǔn)套打等類型報表，全面滿足 WinForm、ASP.NET、ASP.NET MVC、WPF 平臺中各種報表的開發(fā)需要。同時，通過豐富的 API 可以靈活的實現(xiàn)報表創(chuàng)建、加載和運行時的個性化自定義需求。
選擇帶有默認(rèn).NET Core和ASP .NET Core 3.1選項的Empty項目模板。主題描述了使用ASP .NET MVC Core和ASP .NET MVC創(chuàng)建Web Designer示例。
ASP .NET MVC核心
使用ASP .NET MVC Core應(yīng)用程序創(chuàng)建Web設(shè)計器示例的步驟如下（接上文點擊此處查閱）：
11、復(fù)制以下設(shè)計器文件/文件夾，并將其粘貼到示例項目wwwroot子文件夾中：
- baseServerApi.js
- web-designer.css
- web-designer.js
- vendor folder
如果您想使用我們的示例對話框來保存報告，也可以選擇復(fù)制file-dialog.css和file-dialog.js。
12、在解決方案資源管理器中，右鍵單擊wwwroot，然后選擇添加>新建項。
13、選擇“ HTML頁面”項目類型，輸入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)建解決方案）并運行它。 在瀏覽器中打開帶有空白RDL報告的WebDesigner。
16、如果您不想打開空白報告，而是要打開資源子文件夾中的現(xiàn)有報告之一（在上面的步驟12中添加），則需要在createDesignerOptions（）函數(shù)調(diào)用之后在index.html中添加帶有報告名稱的以下行：
index.html designerOptions.reportInfo.id = "MyReport.rdlx";
17、如果在步驟14中將file-dialog.css和file-dialog.js復(fù)制到示例項目wwwroot子文件夾，則可以插入示例對話框以保存報告。
需要在index.html中執(zhí)行以下步驟才能插入對話框組件：
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è)計器根div和對話框根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è)計器應(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>
您會獲得一個帶有插入的示例另存為對話框的設(shè)計器。 這種簡約的設(shè)計器可用于編輯現(xiàn)有報告，而無需添加新數(shù)據(jù)集。但是，如果您需要創(chuàng)建全新的報告，添加數(shù)據(jù)集和預(yù)覽設(shè)計器中的報告，請參閱Web Designer API主題。
這就是如何使用ASP .NET MVC Core創(chuàng)建Web 設(shè)計器的完整內(nèi)容了如果你對我們的產(chǎn)品感興趣或者有任何疑問，歡迎咨詢
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號
客服熱線