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

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

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

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

输入命令：

dotnet new?—?install 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 reports
using (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/Design?name=' + 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方法中指定的名称相同。

点击“了解更多”查看《FastReport Online Designer教程》的完整目录