【实用技能】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,一经查实,立即删除!

相关文章

嵌入式ARM平台Linux网络实时性能优化

文章目录 0. 概要1. 时钟周期与网络性能的权衡时钟周期(ClockPeriod)**优化策略:****副作用:** 2. 网络中断优化**问题:****优化策略:****副作用:** 3. 网络协议栈优化**优化策略:**…

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; …

使用YOLOv9进行图像与视频检测

大家好,YOLOv9 与其前身v8一样,专注于识别和精确定位图像和视频中的对象。本文将介绍如何使用YOLOv9进行图像与视频检测,自动驾驶汽车、安全系统和高级图像搜索等应用在很大程度上依赖于此功能,YOLOv9 引入了比 YOLOv8 更令人印象…

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

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

YOLOv8改进 | 利用YOLOv8进行视频划定区域目标统计计数

简介 本项目旨在利用YOLOv8算法来实现视频中划定区域目标的统计计数。YOLOv8是一种目标检测算法,能够实现实时目标检测和定位。视频划定区域目标统计计数是指在一个视频中,对于指定的区域,统计出该区域内出现的目标物体数量。 该项目的工作流程如下:首先,利用YOLOv8算法…

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

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

Django 的 ModelViewSet 中的 get_queryset 方法自定义查询集

场景:每次调用接口,自动更新某个字段 基于Django REST framework class ApiDataTrackingView(ModelViewSet):queryset ApiDataTracking.objects.all()serializer_class ApiDataTrackingSerializersfilterset_class ApiDataTrackingFilterordering_f…

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

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

uniapp中使用全局样式文件引入的三种方式

如果你想在 uni-app 中全局引入 SCSS 文件(例如 global.scss),可以通过以下步骤进行配置: 方法一:在 main.js 中引入 在 main.js 中引入全局样式: 你可以在 src/main.js 文件中直接引入 SCSS 文件&#xff…

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

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

Vue — 组件化开发

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

【学习】【HTML】HTML、XML、XHTML

HTML 什么是 HTML&#xff1f; HTML (HyperText Markup Language) 是一种用于创建和展示网页的标准标记语言。它由一系列的元素组成&#xff0c;这些元素通过标签的形式来告诉浏览器如何显示内容。 HTML 的基本结构是什么&#xff1f; <!DOCTYPE html> <html> …

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

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

Android ANR分析总结

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

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

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

编译ffmpeg动态库时设置RPATH为$ORIGIN

原本&#xff0c;我这样编译: ./configure \--enable-xxx \--disable-yyy \...为了设置 RPATH, 尝试了在 configure 后面设置&#xff0c;如下几种都无效: --extra-ldsoflags"-Wl,-rpath,$ORIGIN" 没有 RPATH--extra-ldsoflags"-Wl,-rpath,$ORIGIN" 没有…

什么是 DAPP?它能解决什么问题?

在区块链技术日益火热的今天&#xff0c;DAPP 这个概念也逐渐走入人们的视野。但是很多人都听到了DAPP这个词&#xff0c;但是大部分人却还是不清楚什么是 DAPP&#xff1f;它又能解决什么问题呢&#xff1f;接下来这篇文章就带大家了解一下DAPP。 一、什么是 DAPP&#xff1f…

C++ 中的 JSON 序列化和反序列化:结构体与枚举类型的处理

在 C 编程中&#xff0c;处理 JSON 数据是一项常见任务&#xff0c;特别是在需要与其他系统或前端进行数据交换时。nlohmann::json 库是一个功能强大且易于使用的 JSON 库&#xff0c;它允许我们轻松地在 C 中进行 JSON 数据的序列化和反序列化。本文将详细介绍如何使用 nlohma…

ESLint 使用教程(三):12个ESLint 配置项功能与使用方式详解

前言 在现代前端开发中&#xff0c;代码质量与一致性是至关重要的&#xff0c;ESLint 正是为此而生的一款强大工具&#xff0c;本文将带您详细了解 ESLint 的配置文件&#xff0c;并通过通俗易懂的方式讲解其主要配置项及其配置方法。此外&#xff0c;我们还将探讨一些高级配置…