如何在knockout.js上的Web应用程序中使用FastReport Online Designer

在本文中，我们将介绍在ASP.Net Core MVC上快速创建演示应用程序的方法，其中客户端部分采用knockout.js库中编写的单页应用程序的形式。

在本文中，我们将介绍在ASP.Net Core MVC上快速创建演示应用程序的方法，其中客户端部分采用knockout.js库中编写的单页应用程序的形式。

如何安装knockout模板并创建应用程序

.Net Core SDK可能不包含用于生成knockout应用程序的模板。但它很容易修复。在应用程序所在的文件夹中打开PowerShell命令行。

输入命令：

dotnet newnstall Microsoft.AspNetCore.SpaTemplates::*

之后，您可以按照模板创建应用程序。输入命令：

dotnet new knockout –o KnockOnlineDesigner

转到包含已创建应用程序的文件夹：

cd KnockOnlineDesigner

并执行命令以安装必要的JavaScript库：

npm install

Preparation

现在您可以运行创建的项目。不过它还没有sln文件，首次保存项目时将会添加。由于我们将使用开放的FastReport库，因此我们安装了NuGet套包FastReport.OpenSource、FastReport.OpenSource.Web。

报告模板应放在wwwroot文件夹中。创建一个App_Data目录，并为它们添加多个报告模板和数据文件。

此外，在wwwroot中，您需要添加一个包含在线设计器的文件夹。

您可以从客户端部分的开发人员站点下载在线设计器。当然，您需要有已购买的授权。在下载在线设计器之前，您需要构建它。在在线设计器中，您可以在报表设计器中选择所需的组件和控件。请注意，在配置“Configuration”部分中，要选择API以使用.Net Core。

在构建完成后，将构建设计器库，并且有一个下载zip文件的链接。只需解压目录wwwroot中存档的内容即可。

在Startup.cs文件中，我们包含FastReport库：

public void Configure(IApplicationBuilder app, IHostingEnvironment env){…App.UseFastReport();…}

要显示报表设计器，您需要创建Web报表对象并启用设计器模式。我们使用SampleDataController控制器。添加两个方法：显示设计器以及在服务器上保存修改后的报告。

编辑SampleDataController控制器

using System;using Microsoft.AspNetCore.Mvc;using FastReport.Web;using Microsoft.AspNetCore.Hosting;using System.IO; namespace KnockOnlineDesigner.Controllers{ [Route("api/[controller]")] public class SampleDataController : Controller { private IHostingEnvironment _env;  public SampleDataController(IHostingEnvironment env) { _env = env; }  [HttpGet("[action]")] public IActionResult Design(string name) { var webRoot = _env.WebRootPath; //wwwroot path WebReport WebReport = new WebReport(); //create web report object WebReport.Width = "1000"; //set the web report width WebReport.Height = "1000"; //set the web report height WebReport.Report.Load(System.IO.Path.Combine(webRoot, (String.Format("App_Data/{0}.frx", name)))); //load report into the WebReport System.Data.DataSet dataSet = new System.Data.DataSet(); //create data source dataSet.ReadXml(System.IO.Path.Combine(webRoot, "App_Data/nwind.xml")); //open xml database WebReport.Report.RegisterData(dataSet, "NorthWind"); //edit data source WebReport.Mode = WebReportMode.Designer; //set the web report mode – designer WebReport.DesignerLocale = "en"; //set report designer localization WebReport.DesignerPath = @"WebReportDesigner/index.html"; //set online designer url WebReport.DesignerSaveCallBack = @"api/SampleData/SaveDesignedReport"; //set callback url WebReport.Debug = true; //enable debug mode. ViewBag.WebReport = WebReport; //pass report to view return View(); }  [HttpPost("[action]")] public IActionResult SaveDesignedReport(string reportID, string reportUUID) { var webRoot = _env.WebRootPath; //set the wwwroot path ViewBag.Message = String.Format("Confirmed {0} {1}", reportID, reportUUID); //set message for view Stream reportForSave = Request.Body; //write the post result into the stream string pathToSave = System.IO.Path.Combine(webRoot, @"App_Data/TestReport.frx"); //get the path to save reportsusing (FileStream file = new FileStream(pathToSave, FileMode.Create)) //create file stream { reportForSave.CopyTo(file); //save the result into the file } return View(); } }}

请注意，在使用该方法之前，必须根据请求类型设置Get或Post属性的属性。

对于创建的方法，我们添加两个视图：

• Design.chtml:

@await ViewBag.WebReport.Render()

• SaveDesignedReport.chtml:

@ViewBag.Message

knockout.js上的客户端应用程序位于ClientApp文件夹中。

在此文件夹中有一个组件目录，其中包含页面和菜单。让我们编辑主页模板的文件home-page.html：

  Edit Report

此模板显示报告的下拉列表、按钮和div元素，其中将插入从后端接收的html代码——the report designer。按下按钮将执行单击的功能。此模板的javascript位于单独的home-page.ts文件中。让我们用代码替换它的内容：

import * as ko from 'knockout'; class HomePageViewModel { public designer = ko.observable(''); public selectedReport = "Image"; public reports = ko.observableArray(["Image", "Hierarchic List", "Matrix"]);  clicked() { if (this.selectedReport != '') { fetch('api/SampleData/Designame=' + this.selectedReport) .then(response => response.text()) .then(data => { this.designer(data); }); } }} export default { viewModel: HomePageViewModel, template: require('./home-page.html') };

在这里，我们添加了一些变量：

• Designer——将根据报表设计器的请求存储从服务器收到的html代码；

• selectedReport——存储在下拉列表中选择的报告的名称；

• reports——报告名称列表。

此外，还有一个单击的函数，它向服务器执行get请求，并接收加载了html报告的在线设计器。

就是这样，您可以运行我们的演示应用程序了：

首先，我们会看到一个空白页面，其中包含报告下拉列表和编辑报告“Edit Report”按钮。从列表中选择一个报告，然后单击按钮。稍后我们将看到在线设计器：

现在，您可以编辑报告模板并进行保存。在报表“Report”选项卡上，单击保存“Save”按钮。

绿色框中的已保存消息将通知您成功保存报告。这告诉我们SaveDesignedReport方法按预期工作并将报告保存在App_Data文件夹中。让我们来看看，停止应用程序并查看App_Data文件夹：

如您所见，已添加了另一个报表模板，其名称与我们在SaveDesignedReport方法中指定的名称相同。

产品介绍 | 下载试用 | 优惠活动 | 在线客服 | 联系Elyn

标签：

来源：慧都