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

.NET的報表控件ActiveReports教程：如何使用ASP .NET MVC創(chuàng)建Web 設(shè)計器（二）

ActiveReports 是一款專注于 .NET 和 .NET Core 平臺的報表控件。通過拖拽式報表設(shè)計器，可以快速地設(shè)計 Excel表格、Word文檔、圖表、數(shù)據(jù)過濾、數(shù)據(jù)鉆取、精準套打等類型報表，全面滿足 WinForm、ASP.NET、ASP.NET MVC、WPF 平臺中各種報表的開發(fā)需要。同時，通過豐富的 API 可以靈活的實現(xiàn)報表創(chuàng)建、加載和運行時的個性化自定義需求。點擊這里獲取更多產(chǎn)品詳情>>

點擊下載ActiveReports最新試用版

點擊這里查看上篇文章

11、在出現(xiàn)的“預(yù)覽更改”對話框中，單擊“確定”。
12、在出現(xiàn)的“許可證接受”對話框中，單擊“我接受”。
13、在解決方案資源管理器中，右鍵單擊您的項目，然后轉(zhuǎn)到添加>新建項...。

在出現(xiàn)的窗口中，轉(zhuǎn)到“代碼”>“類”，輸入Startup.cs，然后單擊“添加”。

修改新添加的Startup.cs的內(nèi)容，如下所示：

using System;
using System.IO;
using System.Linq;
using System.Web;
using GrapeCity.ActiveReports.Aspnet.Designer;
using Owin;
using Microsoft.Owin;
using Microsoft.Owin.StaticFiles;
using Microsoft.Owin.FileSystems;
using System.Web.Mvc;
using System.Web.Routing;
[assembly: OwinStartup(typeof(AspNetDesignerSample.Startup))]
namespace AspNetDesignerSample
{
public class Startup
{
// resources (reports, themes, images) location
private static readonly DirectoryInfo ResourcesRootDirectory =
new DirectoryInfo(String.Format("{0}.\\resources\\", HttpRuntime.AppDomainAppPath));
public void Configuration(IAppBuilder app)
{
// web designer middleware
app.UseDesigner(config => config.UseFileStore(ResourcesRootDirectory));
// static files middlewares
var fileSystem = new PhysicalFileSystem(String.Format("{0}.\\wwwroot\\", HttpRuntime.AppDomainAppPath));
app.UseDefaultFiles(new DefaultFilesOptions { DefaultFileNames = new[] { "index.html" }, FileSystem = fileSystem });
app.UseStaticFiles(new StaticFileOptions { FileSystem = fileSystem });
}
}
}

14、在示例項目根目錄中創(chuàng)建“ resources”文件夾；您可以放置現(xiàn)有的報告，主題，

15、在命令行中使用以下命令從NPM下載并安裝與WebDesigner相關(guān)的文件和文件夾：

npm install @grapecity/ar-designer

設(shè)計器文件/文件夾將下載到您當前的目錄中：

..\node_modules\@grapecity\ar-designer\dist

16、在示例項目根目錄中創(chuàng)建“ wwwroot”文件夾。復(fù)制以下與WebDesigner相關(guān)的基本文件，并將其粘貼到示例項目wwwroot子文件夾中：

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

如果您想使用我們的示例對話框組件來保存報告，也可以選擇復(fù)制file-dialog.css和file-dialog.js。

17、在“解決方案資源管理器”頂部欄中，選中“顯示所有文件”。

右鍵單擊wwwroot，然后選擇“包含在項目中”。

18、右鍵單擊wwwroot，然后選擇添加>新建項...：

在出現(xiàn)的窗口中，轉(zhuǎn)到Web> HTML頁面，輸入index.html，然后單擊添加。

在解決方案資源管理器中，找到新添加的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>

構(gòu)建您的解決方案并運行它。在瀏覽器中打開帶有空白RDL報告的WebDesigner。

現(xiàn)在ActiveReports最高優(yōu)惠19039，團隊授權(quán)更是低至34748元！點擊這里獲取更多優(yōu)惠>>

如果你對我們的產(chǎn)品感興趣或者有任何疑問，歡迎咨詢慧都在線客服>>

.NET的報表控件ActiveReports教程：如何使用ASP .NET MVC創(chuàng)建Web 設(shè)計器（二）

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

Create excellence with technology