.NET的報(bào)表控件ActiveReports教程：如何使用ASP .NET MVC創(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)表的開(kāi)發(fā)需要。同時(shí)，通過(guò)豐富的 API 可以靈活的實(shí)現(xiàn)報(bào)表創(chuàng)建、加載和運(yùn)行時(shí)的個(gè)性化自定義需求。點(diǎn)擊這里獲取更多產(chǎn)品詳情>>
11、在出現(xiàn)的“預(yù)覽更改”對(duì)話框中，單擊“確定”。
12、在出現(xiàn)的“許可證接受”對(duì)話框中，單擊“我接受”。
13、在解決方案資源管理器中，右鍵單擊您的項(xiàng)目，然后轉(zhuǎn)到添加>新建項(xiàng)...。
在出現(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、在示例項(xiàng)目根目錄中創(chuàng)建“ resources”文件夾； 您可以放置現(xiàn)有的報(bào)告，主題，
15、在命令行中使用以下命令從NPM下載并安裝與WebDesigner相關(guān)的文件和文件夾：
npm install @grapecity/ar-designer
設(shè)計(jì)器文件/文件夾將下載到您當(dāng)前的目錄中：
..\node_modules\@grapecity\ar-designer\dist
16、在示例項(xiàng)目根目錄中創(chuàng)建“ wwwroot”文件夾。 復(fù)制以下與WebDesigner相關(guān)的基本文件，并將其粘貼到示例項(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。
17、在“解決方案資源管理器”頂部欄中，選中“顯示所有文件”。
右鍵單擊wwwroot，然后選擇“包含在項(xiàng)目中”。
18、右鍵單擊wwwroot，然后選擇添加>新建項(xiàng)...：
在出現(xiàn)的窗口中，轉(zhuǎn)到Web> HTML頁(yè)面，輸入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)建您的解決方案并運(yùn)行它。 在瀏覽器中打開(kāi)帶有空白R(shí)DL報(bào)告的WebDesigner。
現(xiàn)在ActiveReports最高優(yōu)惠19039，團(tuán)隊(duì)授權(quán)更是低至34748元！點(diǎn)擊這里獲取更多優(yōu)惠>>
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線