【实用技能】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 帮助器之外,您还可以在代码中创建一个实例来解决此问题。以下代码片段显示了如何创建文档查看器和文档编辑器的实例:

@using TXTextControl.Web.MVC
@Html.TXTextControl().TextControl(settings =>
{settings.Dock = TXTextControl.Web.DockStyle.Fill;
}).LoadDataFromJson(File.ReadAllText("data.json")).Render()
@{var settings = new TXTextControl.Web.MVC.DocumentViewer.DocumentViewerSettings();settings.Dock = TXTextControl.Web.MVC.DocumentViewer.DocumentViewerSettings.DockStyle.Fill;settings.ShowThumbnailPane = false;var viewer = new TXTextControl.Web.MVC.DocumentViewer.DocumentViewer(settings);@viewer.Render()}

如您所见,文档编辑器像往常一样使用 Html 帮助程序类添加。文档查看器在代码中实例化,并Render显式调用该方法以在视图中呈现查看器。这允许您在同一视图中创建两个组件。

用例:实时预览

在同一视图中使用文档编辑器和文档查看器的一个用例是在用户键入时提供文档的实时预览。这对于需要在用户编辑文档时提供实时反馈的应用程序非常有用。

设想这样一个场景:用户创建了一个包含合并字段、重复块和格式的邮件合并模板。当用户编辑或输入文本时,空闲计时器会运行并等待用户空闲。如果用户未更改任何内容,则文档会保存并与服务器端的实时数据合并,然后加载到文档查看器中进行预览。

这使得用户可以更好地了解合并的结果,并且无需在编辑器中预览文档即可设计模板。

空闲时预览更新

空闲定时器

此解决方案的代码非常简单。实现为 JavaScript 空闲计时器,setTimeout将在事件发生时中止changed。达到空闲状态时,将保存模板并将其发送到Merge端点。然后将返回的合并文档加载到文档查看器中。

	TXTextControl.addEventListener("textControlLoaded", e => {let idleTimeout;function onIdle() {mergeTemplate();}function resetIdleTimer() {clearTimeout(idleTimeout);idleTimeout = setTimeout(onIdle, 2000); // Set idle time to 2 seconds}// Attach event listener to TXTextControl's "changed" eventTXTextControl.addEventListener("changed", e => {resetIdleTimer();});// Initialize the idle timerresetIdleTimer();
});function mergeTemplate() {TXTextControl.saveDocument(TXTextControl.StreamType.InternalUnicodeFormat, document => {// call web api endpoint with ajax$.ajax({url: '/mailmerge/merge',type: 'POST',contentType: 'application/json',data: JSON.stringify(document.data),success: function (data) {// load the document into the viewerTXDocumentViewer.loadDocument(data);}});})
}

合并端点

服务器端合并端点只是采用模板并使用邮件合并 将 JSON 数据合并到其中以创建返回给客户端并加载到文档查看器的预览文档。

[HttpPost]
public string Merge([FromBody] string Template)
{byte[] template = System.Convert.FromBase64String(Template);using (TXTextControl.ServerTextControl tx = new TXTextControl.ServerTextControl()){tx.Create();tx.Load(template, TXTextControl.BinaryStreamType.InternalUnicodeFormat);MailMerge mailMerge = new MailMerge();mailMerge.TextComponent = tx;string jsonData = System.IO.File.ReadAllText("data.json");mailMerge.MergeJsonData(jsonData);byte[] results;tx.Save(out results, TXTextControl.BinaryStreamType.InternalUnicodeFormat);return System.Convert.ToBase64String(results);}
}

结论

对于需要在用户编辑文档时实时反馈的应用程序而言,在同一视图中使用文档编辑器和文档查看器是一项非常强大的功能。通过在代码中创建文档查看器的实例,您可以轻松地将此功能添加到您的应用程序中。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/60433.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mapwindow5代码BUG记录1

Mapwindow5代码BUG记录 一、查询功能多次点击后窗体错误1、正常情况2、BUG界面位置3、BUG表现4、BUG代码位置5、BUG代码修改6、BUG影响版本 一、查询功能多次点击后窗体错误 1、正常情况 2、BUG界面位置 表编辑器——》工具——》查找 Table editor——》Tools——》Find …

WPF中如何使用区域导航

1.创建一个Prism框架的项目并设计好数据源 User如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace WPF练习17区域导航.Models {public class User{public int UserId { get; …

基于Cocos Creator开发的打砖块游戏

一、简介 Cocos简而言之就是一个开发工具,详见官方网站TypeScript简而言之就是开发语言,是JavaScript的一个超集详解官网 今天我们就来学习如何写一个打砖块的游戏,很简单的一个入门级小游戏。 二、实现过程 2.1 布局部分 首先来一个整体…

【数据结构】线性表——栈与队列

写在前面 栈和队列的关系与链表和顺序表的关系差不多,不存在谁替代谁,只有双剑合璧才能破敌万千~~😎😎 文章目录 写在前面一、栈1.1栈的概念及结构1.2、栈的实现1.2.1、栈的结构体定义1.2.2、栈的初始化栈1.2.3、入栈1.2.4、出栈…

Rust编程与项目实战-特质(Trait)

【图书介绍】《Rust编程与项目实战》-CSDN博客 《Rust编程与项目实战》(朱文伟,李建英)【摘要 书评 试读】- 京东图书 (jd.com) Rust编程与项目实战_夏天又到了的博客-CSDN博客 特质(Trait)是Rust中的概念,类似于其他语言中的接…

运维之systemd 服务(Systemd Service of Operations and Maintenance)

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 本人主要分享计算机核心技…

Vue — 组件化开发

组件化开发:一个页面可以拆分成一个个组件;每个组件都有自己独立的结构、样式、行为 组件分类:普通组件、根组件 其中根组件包裹着所有普通小组件 普通组件的注册使用;有两种注册方式 局部注册全局注册 局部注册 目标&#xff…

【软考】系统架构设计师-计算机系统基础(2):操作系统

1、操作系统基础 OS的5个核心功能:进程管理、存储管理、设备管理、文件管理、作业管理 OS的3个作用:管理运行的程序和分配各种软硬件资源;提供友善的人机界面;为程序应用的开发和运行提供高效的平台 OS的4个特征:并…

Android ANR分析总结

1、ANR介绍 ANR(Application Not Responding)指的是应用程序无响应,当Android应用程序在主线程上执行长时间运行的操作或阻塞I/O操作时发生。这可能导致应用程序界面冻结或无法响应用户输入。 1、Service ANR:前台20s&#xff0…

WebRTC视频 01 - 视频采集整体架构

一、前言: 我们从1对1通信说起,假如有一天,你和你情敌使用X信进行1v1通信,想象一下画面是不是一个大画面中有一个小画面?这在布局中就叫做PIP(picture in picture);这个随手一点&am…

Jenkins应用详解(Detailed Explanation of Jenkins Application)

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:Linux运维老纪的首页…

【Python】计算机视觉应用:OpenCV库图像处理入门

计算机视觉应用:OpenCV库图像处理入门 在当今的数字化时代,计算机视觉(Computer Vision)已经渗透到各行各业,比如自动驾驶、智能监控、医疗影像分析等。而 Python 的 OpenCV 库(Open Source Computer Visi…

ctfshow-web入门-反序列化(web260-web264)

目录 1、web260 2、web261 3、web262 4、web263 5、web264 1、web260 要求传入的内容序列化后包含指定内容即可,在 PHP 序列化中,如果键名或值包含 ctfshow_i_love_36D,那么整个序列化结果也会包含这个字符串。 payload: ?…

Python 爬虫运行状态监控:进度、错误与完成情况

Python 爬虫运行状态监控:进度、错误与完成情况 在进行大规模数据爬取时,监控爬虫的运行状态至关重要。通过实时监控,可以了解爬虫的工作进度、出现的错误以及任务完成情况。这样可以及时发现并解决问题,确保数据抓取任务顺利进行…

Flutter错误: uses-sdk:minSdkVersion 16 cannot be smaller than version 21 declared

前言 今天要做蓝牙通信的功能,我使用了flutter_reactive_ble这个库,但是在运行的时候发现一下错误 Launching lib/main.dart on AQM AL10 in debug mode... /Users/macbook/Desktop/test/flutter/my_app/android/app/src/debug/AndroidManifest.xml Err…

除了易我数据恢复,这10个数据恢复软件也能点亮数据找回的希望之光。

易我数据恢复工具具有广泛的系统兼容性,并且里面功能丰富,操作简单,能够完成多种数据恢复操作,是一款比较专业的数据恢复软件。如果大家在为数据丢失而烦恼的话,我可以推荐几款好用的数据恢复软件给大家。 1、福昕数据…

Vue Cli 脚手架目录文件介绍

小试牛刀 //vetur高亮; vuetab 快速生成 <template><div class"box">我是个盒子<button click"fn">按钮</button></div> </template><script> export default {methods:{fn(){alert("Hello Vue")}} …

在公司中,如何表现出自己的高情商,学会这三句话就可以了

在职场中&#xff0c;高情商的重要性不言而喻。它能帮助你更好地处理人际关系&#xff0c;提升团队协作效率&#xff0c;还能让你在职场上获得更多的机会。 在职场中&#xff0c;适时地给予同事、上级和下属赞美、感谢和鼓励&#xff0c;能够拉近彼此的距离&#xff0c;增强团…

cache(五)Write-through,Write-back,Write-allocate,No-write-allocate

这张图总结了缓存系统中写操作策略的不同方法&#xff0c;主要讨论了在**写命中&#xff08;write-hit&#xff09;和写未命中&#xff08;write-miss&#xff09;**情况下应该采取的操作策略。 1. 多个数据副本的存在 缓存系统通常有多个级别&#xff0c;例如 L1 缓存、L2 缓…

商品规格递归拼接

创建实体类 Data public class Shopping {private String name;private List<String> children; } 测试 public static void main(String[] args) {ArrayList<Shopping> shoppings new ArrayList<>();Shopping shopping new Shopping();shopping.setName…