在本文中，我們將介紹在ASP.Net Core MVC上快速創(chuàng)建演示應(yīng)用程序的方法，其中客戶端部分采用knockout.js庫中編寫的單頁應(yīng)用程序的形式。

如何安裝knockout模板并創(chuàng)建應(yīng)用程序

.Net Core SDK可能不包含用于生成knockout應(yīng)用程序的模板。但它很容易修復。在應(yīng)用程序所在的文件夾中打開PowerShell命令行。

輸入命令：

dotnet new?—?install Microsoft.AspNetCore.SpaTemplates::*

之后，您可以按照模板創(chuàng)建應(yīng)用程序。輸入命令：

dotnet new knockout –o KnockOnlineDesigner

轉(zhuǎn)到包含已創(chuàng)建應(yīng)用程序的文件夾：

cd KnockOnlineDesigner

并執(zhí)行命令以安裝必要的JavaScript庫：

npm install

Preparation

現(xiàn)在您可以運行創(chuàng)建的項目。不過它還沒有sln文件，首次保存項目時將會添加。由于我們將使用開放的FastReport庫，因此我們安裝了NuGet套包FastReport.OpenSource、FastReport.OpenSource.Web。

報告模板應(yīng)放在wwwroot文件夾中。創(chuàng)建一個App_Data目錄，并為它們添加多個報告模板和數(shù)據(jù)文件。

此外，在wwwroot中，您需要添加一個包含在線設(shè)計器的文件夾。

您可以從客戶端部分的開發(fā)人員站點下載在線設(shè)計器。當然，您需要有已購買的授權(quán)。在下載在線設(shè)計器之前，您需要構(gòu)建它。在在線設(shè)計器中，您可以在報表設(shè)計器中選擇所需的組件和控件。請注意，在配置“Configuration”部分中，要選擇API以使用.Net Core。

在構(gòu)建完成后，將構(gòu)建設(shè)計器庫，并且有一個下載zip文件的鏈接。只需解壓目錄wwwroot中存檔的內(nèi)容即可。

在Startup.cs文件中，我們包含F(xiàn)astReport庫：

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

要顯示報表設(shè)計器，您需要創(chuàng)建Web報表對象并啟用設(shè)計器模式。我們使用SampleDataController控制器。添加兩個方法：顯示設(shè)計器以及在服務(wù)器上保存修改后的報告。

編輯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();
 }
 }
}

請注意，在使用該方法之前，必須根據(jù)請求類型設(shè)置Get或Post屬性的屬性。

對于創(chuàng)建的方法，我們添加兩個視圖：

• Design.chtml:

@await ViewBag.WebReport.Render()

• SaveDesignedReport.chtml:

@ViewBag.Message

knockout.js上的客戶端應(yīng)用程序位于ClientApp文件夾中。

在此文件夾中有一個組件目錄，其中包含頁面和菜單。讓我們編輯主頁模板的文件home-page.html：

  Edit Report

此模板顯示報告的下拉列表、按鈕和div元素，其中將插入從后端接收的html代碼——the report designer。按下按鈕將執(zhí)行單擊的功能。此模板的javascript位于單獨的home-page.ts文件中。讓我們用代碼替換它的內(nèi)容：

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——將根據(jù)報表設(shè)計器的請求存儲從服務(wù)器收到的html代碼；

• selectedReport——存儲在下拉列表中選擇的報告的名稱；

• reports——報告名稱列表。

此外，還有一個單擊的函數(shù)，它向服務(wù)器執(zhí)行g(shù)et請求，并接收加載了html報告的在線設(shè)計器。

就是這樣，您可以運行我們的演示應(yīng)用程序了：

首先，我們會看到一個空白頁面，其中包含報告下拉列表和編輯報告“Edit Report”按鈕。從列表中選擇一個報告，然后單擊按鈕。稍后我們將看到在線設(shè)計器：

現(xiàn)在，您可以編輯報告模板并進行保存。在報表“Report”選項卡上，單擊保存“Save”按鈕。

綠色框中的已保存消息將通知您成功保存報告。這告訴我們SaveDesignedReport方法按預(yù)期工作并將報告保存在App_Data文件夾中。讓我們來看看，停止應(yīng)用程序并查看App_Data文件夾：

如您所見，已添加了另一個報表模板，其名稱與我們在SaveDesignedReport方法中指定的名稱相同。

產(chǎn)品介紹 | 下載試用 | 優(yōu)惠活動 |  |