# ASP.NET Core: Use the Document Editor and Viewer in the Same Razor View > The Document Editor and Viewer typically have separate roles in web apps, with the editor used for creating and editing documents, often occupying the full view. Some applications, however, integrate both in the same view to enable editing, reviewing, and template preview. - **Author:** Bjoern Meyer - **Published:** 2024-11-08 - **Modified:** 2026-07-17 - **Description:** The Document Editor and Viewer typically have separate roles in web apps, with the editor used for creating and editing documents, often occupying the full view. Some applications, however, integrate both in the same view to enable editing, reviewing, and template preview. - **5 min read** (801 words) - **Tags:** - ASP.NET - ASP.NET Core - Document Editor - Document Viewer - Razor - **Web URL:** https://www.textcontrol.com/blog/2024/11/08/asp-net-core-use-the-document-editor-and-viewer-in-the-same-razor-view/ - **LLMs URL:** https://www.textcontrol.com/blog/2024/11/08/asp-net-core-use-the-document-editor-and-viewer-in-the-same-razor-view/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2024/11/08/asp-net-core-use-the-document-editor-and-viewer-in-the-same-razor-view/llms-full.txt - **GitHub Repository:** https://github.com/TextControl/TXTextControl.Web.LivePreview --- 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: ``` @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() } ``` 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. ![Preview update on idle](https://s1-www.textcontrol.com/assets/dist/blog/2024/11/08/a/assets/preview2.gif "Preview update on idle") ### 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. ``` 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 MailMerge to merge the JSON data into it to create the preview document that is returned to the client and loaded into the Document Viewer. ``` [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. --- ## About Bjoern Meyer As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano. - [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/) - [X](https://x.com/txbjoern) - [GitHub](https://github.com/bjoerntx) --- ## Related Posts - [Building an ASP.NET Core Backend (Linux and Windows) for the Document Editor and Viewer](https://www.textcontrol.com/blog/2025/03/26/building-an-asp-net-core-backend-for-the-document-editor-and-viewer/llms.txt) - [TX Text Control Document Editor and Viewer for Blazor Released](https://www.textcontrol.com/blog/2025/03/25/tx-text-control-document-editor-and-viewer-for-blazor-released/llms.txt) - [Announcing Our Work on a Blazor Component for Document Editing and Viewing](https://www.textcontrol.com/blog/2025/01/24/announcing-our-work-on-a-blazor-component-for-document-editing-and-viewing/llms.txt) - [Preparing Documents for E-Signing for Multiple Signers in .NET C#](https://www.textcontrol.com/blog/2024/11/13/preparing-documents-for-e-signing-for-multiple-signers-in-net-c-sharp/llms.txt) - [Adding a Security Middleware to ASP.NET Core Web Applications to Protect TX Text Control Document Editor and Document Viewer Endpoints](https://www.textcontrol.com/blog/2024/03/18/adding-a-security-middleware-to-asp-net-core-web-applications-to-protect-tx-text-control-document-editor-and-document-viewer-endpoints/llms.txt) - [Building an ASP.NET Core Backend Application to Host the Document Editor and Document Viewer](https://www.textcontrol.com/blog/2024/03/14/building-an-asp-net-core-backend-application-to-host-the-document-editor-and-document-viewer/llms.txt) - [DS Server Use Cases: Adding Document Services to Any Application](https://www.textcontrol.com/blog/2026/06/18/ds-server-use-cases-adding-document-services-to-any-application/llms.txt) - [Beyond WebSockets: A Glimpse into the Future of Document Editing with WebAssembly](https://www.textcontrol.com/blog/2026/06/10/beyond-websockets-glimpse-future-document-editing-webassembly/llms.txt) - [5 Layout Patterns for Integrating the TX Text Control Document Editor in ASP.NET Core C#](https://www.textcontrol.com/blog/2026/04/09/5-layout-patterns-for-integrating-the-tx-text-control-document-editor-in-aspnet-core-csharp/llms.txt) - [Introducing Text Control Agent Skills](https://www.textcontrol.com/blog/2026/03/27/introducing-text-control-agent-skills/llms.txt) - [Deploying the TX Text Control Document Editor from the Private NuGet Feed to Azure App Services (Linux and Windows)](https://www.textcontrol.com/blog/2026/03/25/deploying-the-tx-text-control-document-editor-from-the-private-nuget-feed-to-azure-app-services-linux-and-windows/llms.txt) - [Build a Custom Backstage View in ASP.NET Core with TX Text Control](https://www.textcontrol.com/blog/2026/02/17/build-a-custom-backstage-view-in-aspnet-core-with-tx-text-control/llms.txt) - [ASP.NET Core Document Editor with Backend via the Text Control Private NuGet Feed](https://www.textcontrol.com/blog/2026/02/09/aspnet-core-document-editor-private-nuget-feed/llms.txt) - [Why Document Processing Libraries Require a Document Editor](https://www.textcontrol.com/blog/2025/12/04/why-document-processing-libraries-require-a-document-editor/llms.txt) - [High-Performance Text Replacement in Large DOCX Files using C# .NET](https://www.textcontrol.com/blog/2025/07/30/high-performance-text-replacement-in-large-docx-files-using-csharp-dotnet/llms.txt) - [Document Viewer 33.2.1 Released: New Event and Bug Fixes](https://www.textcontrol.com/blog/2025/07/30/document-viewer-33-2-1-released-new-event-and-bug-fixes/llms.txt) - [Getting Started Video Tutorial: Document Editor in ASP.NET Core C# on Linux](https://www.textcontrol.com/blog/2025/07/29/getting-started-video-tutorial-document-editor-aspnet-core-csharp-linux/llms.txt) - [Deploying the TX Text Control Document Editor in an ASP.NET Core Web App to Azure App Services](https://www.textcontrol.com/blog/2025/03/26/deploying-the-tx-text-control-document-editor-in-an-asp-net-core-web-app-to-azure-app-services/llms.txt) - [TX Text Control for Blazor: Mail Merge Integration Tutorial](https://www.textcontrol.com/blog/2025/03/25/tx-text-control-for-blazor-mail-merge-integration-tutorial/llms.txt) - [Getting Started: Document Editor for Blazor in ASP.NET Core](https://www.textcontrol.com/blog/2025/03/25/getting-started-document-editor-for-blazor-in-asp-net-core/llms.txt) - [Getting Started: Document Viewer for Blazor in ASP.NET Core](https://www.textcontrol.com/blog/2025/03/25/getting-started-document-viewer-for-blazor-in-asp-net-core/llms.txt) - [Introducing TXTextControl.Web.Server.Core: A Cross-Platform Backend for TX Text Control Document Editor](https://www.textcontrol.com/blog/2025/03/13/introducing-txtextcontrol-web-server-core-a-cross-platform-backend-for-tx-text-control-document-editor/llms.txt) - [Getting Started: Document Editor with ASP.NET Core and Docker Support with Linux Containers](https://www.textcontrol.com/blog/2025/03/12/getting-started-document-editor-with-asp-net-core-and-docker-support-with-linux-containers/llms.txt) - [Connecting the TXWebSocketMiddleware to a Separate, External TCP Synchronization Service](https://www.textcontrol.com/blog/2024/10/01/connecting-the-txwebsocketmiddleware-to-a-separate-external-tcp-synchronization-service/llms.txt) - [Optimizing Digital Signature Workflows: Starting with MS Word DOCX Files Instead of PDFs in C#](https://www.textcontrol.com/blog/2024/09/27/optimizing-digital-signature-workflows-starting-with-ms-word-docx-files-instead-of-pdfs-in-csharp/llms.txt)