【实用技能】ASP.NET Core：在同一个 Razor 视图中利用文档编辑器和查察器

Essential Studio for ASP.NET Core UI控件库是构建应用步调所需的杰出套件，提供支持的 ASP.NET Core 工具包拥有凌驾 85 个组件，包罗构建业务线应用步调所需的统统，包罗数据网格、图表、甘特图、图表、电子表格、时间表、数据透视网格等盛行的小部件。
点击下载Essential Studio for ASP.NET Core最新版
通常，文档编辑器和文档查察用具有差别的利用环境，并在 Web 应用步调中的差别视图中利用。在大多数环境下，编辑器嵌入在应用步调中，用于在协作过程中创建模板、编辑文档或审视文档。在这些环境下，编辑器占据了大部门视图，以便用户可以专注于编辑文档。
但是，有多个应用步调在同一个视图中利用文档编辑器和文档查察器：

• 文档编辑：用户可以在编辑和查察模式之间切换。
  
• 文档审视：用户可以在审视文档的同时查察文档。
  
• 模板预览：用户可以在编辑模板时预览模板。
  

如果你按照文档中所述利用 Razor 中的 Html 助手（该助手在编辑器和查察器中均有实现），则会收到如下错误：
ControlsFactory 不包罗“DocumentViewer”的界说，而且找不到继承“ControlsFactory”范例第一个参数的可访问扩展方法“DocumentViewer”（您是否缺少利用指令或步调集引用？）
上述错误大概来自 TextControl 或 DocumentViewer，详细取决于向 using 指令添加了哪个定名空间。
创建实例
除了利用 Razor Html 资助器之外，您还可以在代码中创建一个实例来办理此标题。以下代码片断体现了怎样创建文档查察器和文档编辑器的实例：

1. @using TXTextControl.Web.MVC
2. @Html.TXTextControl().TextControl(settings =>
3. {
4.    settings.Dock = TXTextControl.Web.DockStyle.Fill;
5. }).LoadDataFromJson(File.ReadAllText("data.json")).Render()
6. @{
7.    var settings = new TXTextControl.Web.MVC.DocumentViewer.DocumentViewerSettings();
8.    settings.Dock = TXTextControl.Web.MVC.DocumentViewer.DocumentViewerSettings.DockStyle.Fill;
9.    settings.ShowThumbnailPane = false;
10.    var viewer = new TXTextControl.Web.MVC.DocumentViewer.DocumentViewer(settings);
12.    @viewer.Render()
14. }

复制代码

如您所见，文档编辑器像往常一样利用 Html 资助步调类添加。文档查察器在代码中实例化，并Render显式调用该方法以在视图中出现查察器。这答应您在同一视图中创建两个组件。
用例：实时预览
在同一视图中利用文档编辑器和文档查察器的一个用例是在用户键入时提供文档的实时预览。这对于须要在用户编辑文档时提供实时反馈的应用步调非常有效。
假想如许一个场景：用户创建了一个包罗归并字段、重复块和格式的邮件归并模板。当用户编辑或输入文本时，空闲计时器会运行并等候用户空闲。如果用户未更改任何内容，则文档会生存并与服务器端的实时数据归并，然后加载到文档查察器中举行预览。
这使得用户可以更好地相识归并的结果，而且无需在编辑器中预览文档即可筹划模板。

空闲时预览更新
空闲定时器
此办理方案的代码非常简单。实现为 JavaScript 空闲计时器，setTimeout将在变乱发生时中断changed。到达空闲状态时，将生存模板并将其发送到Merge端点。然后将返回的归并文档加载到文档查察器中。

1.         TXTextControl.addEventListener("textControlLoaded", e => {
2.     let idleTimeout;
4.     function onIdle() {
5.         mergeTemplate();
6.     }
8.     function resetIdleTimer() {
9.         clearTimeout(idleTimeout);
10.         idleTimeout = setTimeout(onIdle, 2000); // Set idle time to 2 seconds
11.     }
13.     // Attach event listener to TXTextControl's "changed" event
14.     TXTextControl.addEventListener("changed", e => {
15.         resetIdleTimer();
16.     });
18.     // Initialize the idle timer
19.     resetIdleTimer();
20. });
22. function mergeTemplate() {
23.     TXTextControl.saveDocument(TXTextControl.StreamType.InternalUnicodeFormat, document => {
24.         // call web api endpoint with ajax
25.         $.ajax({
26.             url: '/mailmerge/merge',
27.             type: 'POST',
28.             contentType: 'application/json',
29.             data: JSON.stringify(document.data),
30.             success: function (data) {
31.                 // load the document into the viewer
32.                 TXDocumentViewer.loadDocument(data);
33.             }
34.         });
35.     })
36. }

复制代码

归并端点
服务器端归并端点只是接纳模板并利用邮件归并 将 JSON 数据归并到此中以创建返回给客户端并加载到文档查察器的预览文档。

1. [HttpPost]
2. public string Merge([FromBody] string Template)
3. {
4.     byte[] template = System.Convert.FromBase64String(Template);
6.     using (TXTextControl.ServerTextControl tx = new TXTextControl.ServerTextControl())
7.     {
8.         tx.Create();
9.         tx.Load(template, TXTextControl.BinaryStreamType.InternalUnicodeFormat);
10.       
11.         MailMerge mailMerge = new MailMerge();
12.         mailMerge.TextComponent = tx;
14.         string jsonData = System.IO.File.ReadAllText("data.json");
16.         mailMerge.MergeJsonData(jsonData);
18.         byte[] results;
20.         tx.Save(out results, TXTextControl.BinaryStreamType.InternalUnicodeFormat);
22.         return System.Convert.ToBase64String(results);
23.     }
24. }

复制代码

结论
对于须要在用户编辑文档时实时反馈的应用步调而言，在同一视图中利用文档编辑器和文档查察器是一项非常强盛的功能。通过在代码中创建文档查察器的实例，您可以轻松地将此功能添加到您的应用步调中。