Typically, the document editor and document viewer have different use cases and are used in different views in a web application. In most cases, the editor is embedded in an application for creating templates, editing documents, or reviewing documents in a collaborative process. In these cases, the editor takes up most of the view so that the user can focus on editing the document.
However, there are several applications where the Document Editor and Document Viewer are used in the same view:
- Document editing: Users can switch between editing and viewing modes.
- Document review: Users can view the document while reviewing it.
- Template preview: Users can preview the template while editing it.
If you use the Html helper in Razor as described in the documentation, which is implemented in both the editor and the viewer, you will get an error like this:
ControlsFactory does not contain a definition for 'DocumentViewer' and no accessible extension method 'DocumentViewer' accepting a first argument of type 'ControlsFactory' could be found (are you missing a using directive or an assembly reference?)
The above error can come from TextControl or DocumentViewer, depending on which namespace was added to the using directive.
Creating the Instance
Instead of using the Razor Html helper, you can create an instance in your code to solve this problem. The following code snippet shows how to create an instance of the Document Viewer and Document Editor:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
| @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() | |
| } |
view raw test.cshtml hosted with ❤ by GitHub
As you can see, the Document Editor is added as usual using the Html helper class. The Document Viewer is instantiated in code and the Render method is explicitly called to render the viewer in the view. This allows you to create both components in the same view.
Use Case: Live Preview
One use case for using the Document Editor and Document Viewer in the same view is to provide a live preview of the document as the user types. This can be useful for applications that require real-time feedback on the document as the user edits it.
Consider a scenario where a user creates a mail merge template with merge fields, repeating blocks, and formatting. While the user is editing or typing text, an idle timer runs and waits until the user is idle. If the user does not change any content, the document is saved and merged with the live data server-side and loaded into the Document Viewer for preview.
This allows users to get a better feel for the results of a merge, and to design a template without previewing the document in the editor.
Idle Timer
The code for this solution is very simple. A JavaScript idle timer implemented as setTimeout will be aborted on the changed event. When the idle state is reached, the template is saved and sent to the Merge endpoint. The returned merged document is then loaded into the Document Viewer.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
| 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" event | |
| TXTextControl.addEventListener("changed", e => { | |
| resetIdleTimer(); | |
| }); | |
| // Initialize the idle timer | |
| resetIdleTimer(); | |
| }); | |
| 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 viewer | |
| TXDocumentViewer.loadDocument(data); | |
| } | |
| }); | |
| }) | |
| } |
Merge Endpoint
The server-side merge endpoint simply takes the template and uses Mail
╰ TX Text Control .NET Server for ASP.NET
╰ DocumentServer Namespace
╰ MailMerge Class
The MailMerge class is a .NET component that can be used to effortlessly merge template documents with database content in .NET projects, such as ASP.NET web applications, web services or Windows services. to merge the JSON data into it to create the preview document that is returned to the client and loaded into the Document Viewer.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
| [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); | |
| } | |
| } |
Conclusion
Using the Document Editor and Document Viewer in the same view can be a powerful feature for applications that require real-time feedback on the document as the user edits it. By creating an instance of the Document Viewer in code, you can easily add this feature to your application.
Download the sample project from GitHub and test it on your own. If you have any questions or need further assistance, please contact our support team.
Download and Fork This Sample on GitHub
We proudly host our sample code on github.com/TextControl.
Please fork and contribute.
Requirements for This Sample
- TX Text Control .NET Server for ASP.NET 32.0
- Visual Studio 2022
ASP.NET Core .NET 6 .NET 7 .NET 8 Angular Blazor React JavaScript
ASP.NET
Integrate document processing into your applications to create documents such as PDFs and MS Word documents, including client-side document editing, viewing, and electronic signatures.
- Download Trial
- Trial Access Token
Getting started with:
- ASP.NET Core
- Angular
- Blazor
- JavaScript
- React
Download Trial
Related Posts
ASP.NET
Preparing Documents for E-Signing for Multiple Signers in .NET C#
by Bjoern Meyer| November 13, 2024
Learn how to prepare documents for e-signing by multiple signers in .NET C#. This article shows how to create signature fields and how to assign them to signers.
ASP.NET Core Document Editor Document Viewer Signature Fields E-Sign
ASP.NET
Connecting the TXWebSocketMiddleware to a Separate, External TCP Synchronization Service
by Bjoern Meyer| October 1, 2024
This article shows how to connect the TXWebSocketMiddleware with a separate, external TCP synchronization service. This allows you to deploy the TCP Service on a separate server and connect multiple TX Text Control instances to the same service.
ASP.NET Core Document Editor TCP
ASP.NET
Optimizing Digital Signature Workflows: Starting with MS Word DOCX Files Instead of PDFs in C#
by Bjoern Meyer| September 27, 2024
Starting a digital signature workflow with MS Word DOCX files instead of PDFs provides greater flexibility, ease of editing, and collaboration during the document preparation phase. DOCX files are easier to edit and allow multiple stakeholders to contribute without the need for specialized software.
ASP.NET Core Document Viewer E-Sign
ASP.NET
Getting Started: Creating an ASP.NET Core Web App with the Document Editor in Visual Studio Code…
by Bjoern Meyer| September 27, 2024
This article shows how to create an ASP.NET Core Web App with the Document Editor in Visual Studio Code (VS Code). The Document Editor is a powerful word processing component that can be used to create, edit, view, and print documents in various formats.
ASP.NET Core Document Editor VS Code
