# Using the Document Viewer in a Blazor Server App with .NET 8 > This article shows how to use the Document Viewer in a Blazor Server application with .NET 8. The Document Viewer is a powerful, web-based document viewer that can be easily integrated into any Blazor application. > **Note:** This article is outdated and may no longer be accurate. - **Author:** Bjoern Meyer - **Published:** 2024-01-29 - **Modified:** 2026-07-17 - **Description:** This article shows how to use the Document Viewer in a Blazor Server application with .NET 8. The Document Viewer is a powerful, web-based document viewer that can be easily integrated into any Blazor application. - **6 min read** (1156 words) - **Tags:** - ASP.NET - Blazor - .NET 8 - Document Viewer - **Web URL:** https://www.textcontrol.com/blog/2024/01/29/using-the-document-viewer-in-a-blazor-server-app-with-net-8/ - **LLMs URL:** https://www.textcontrol.com/blog/2024/01/29/using-the-document-viewer-in-a-blazor-server-app-with-net-8/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2024/01/29/using-the-document-viewer-in-a-blazor-server-app-with-net-8/llms-full.txt - **GitHub Repository:** https://github.com/TextControl/TXTextControl.Server.Blazor.Viewer.DotNet8 --- Creating a Razor component using Interop JavaScript integrates and initializes the TX Text Control Document Viewer in Blazor. This sample uses the [JSRuntime](https://learn.microsoft.com/en-us/dotnet/api/microsoft.jsinterop.jsruntime?view=aspnetcore-7.0) and [DotNetObjectReference](https://learn.microsoft.com/en-us/dotnet/api/microsoft.jsinterop.dotnetobjectreference?view=aspnetcore-7.0) classes to communicate between the viewer and the server-side ServerTextControl class in .NET code. Due to the many changes in .NET 8, applications built with TX Text Control in Blazor require some modifications compared to older .NET versions. Before .NET 8, the entire Blazor application ran in either Blazor WASM or Blazor Server. NET 8 allows you to control the rendering mode by component. This is a big advantage because you can now use the TX Text Control, which requires server-side rendering, with WASM applications. There are 4 render modes available for .NET 8 components: - **Static server-side** Requests are routed to a Razor Component which returns static HTML. - **Interactive Server** Components are more interactive when run through Blazor Server. Interactive DOM modification is dynamic. - **Interactive WASM** The component will be executed on the client side (in the browser) and not on the server side. - **Interactive Auto** The component uses the Blazor Server for the initial request and then uses the Blazor WASM for subsequent requests. TX Text Control requires server-side rendering and an update after creation, so this example uses **Interactive Server** mode. #### Data Flow An illustration of the data flow in this concept is shown in the diagram below. By initializing it with JavaScript, the Text Control Razor component dynamically adds the TX Text Control Document Viewer to the page. The JSRuntime is used to create an object reference to the created JavaScript file. The JavaScript API of the TX Text Control is invoked by this object reference. ![TX Text Control in Blazor](https://s1-www.textcontrol.com/assets/dist/blog/2024/01/29/a/assets/blazor.webp "TX Text Control in Blazor") ### Creating the Application Make sure that you downloaded the latest version of Visual Studio 2022 that comes with the [.NET 8 SDK](https://dotnet.microsoft.com/download/dotnet/8.0). 1. In Visual Studio 2022, create a new project by choosing *Create a new project*. 2. Select *Blazor Web App* as the project template and confirm with *Next*. ![Creating the .NET 8 project](https://s1-www.textcontrol.com/assets/dist/blog/2024/01/29/a/assets/visualstudio1.webp "Creating the .NET 8 project") 3. Choose a name for your project and confirm with *Next*. 4. In the next dialog, choose *.NET 8 (Long-term support)* as the *Framework*. Select *Server* as the *Interactive render mode* and choose *Per page/component* as the *Interactivity location*. Confirm with *Create*. ![Creating the .NET 8 project](https://s1-www.textcontrol.com/assets/dist/blog/2024/01/29/a/assets/visualstudio2.webp "Creating the .NET 8 project") #### Adding the NuGet Package 1. In the *Solution Explorer*, select your created project and choose *Manage NuGet Packages...* from the *Project* main menu. > **Package Source** > > Select either **Text Control Offline Packages** or **nuget.org** as the *Package source*. Packages in the official *Text Control* NuGet profile are frequently updated. Browse and install the following packages: - *TXTextControl.Web.DocumentViewer* - *TXTextControl.TextControl.ASP.SDK* ![ASP.NET Core Web Application](https://s1-www.textcontrol.com/assets/dist/blog/2024/01/29/a/assets/visualstudio3.webp "ASP.NET Core Web Application") #### Configure the Application 1. Open the *Program.cs* file located in the project's root folder. Before the *var app = builder.Build();* entry, insert the following code: ``` builder.Services.AddControllers(); ``` Before the *app.Run();* line, insert the following code: ``` app.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); ``` #### Creating the Interop JavaScript 1. Create a new folder *scripts* in your *wwwroot* folder, create a new JavaScript file and name it *txdocumentviewer.js*. Paste the following content into the file you have just created. ``` var dotNetObject; export function loadDocument(document, name) { // load the document back into the editor (TXTextControl) TXDocumentViewer.loadDocument(document, name); }; ``` #### Creating the Razor Component This step creates a new Razor component named *TXDocumentViewer.razor* that initializes both the .NET object reference and the JavaScript object reference. 1. Select the project in the *Solution Explorer* and choose *New Item...* from the *Project* main menu. Select *Razor Component*, name it *TXDocumentViewer.razor* and confirm with *Add*. 2. Paste the following code into the newly created file: ``` @using Microsoft.AspNetCore.Components.Web @using Microsoft.JSInterop @inject IJSRuntime JsRuntime @inject NavigationManager Navigator @code { [Parameter] public string? BasePath { get; set; } private DotNetObjectReference DotNetReference => DotNetObjectReference.Create(this); private IJSObjectReference? _txdocumentviewer; protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { _txdocumentviewer = await JsRuntime.InvokeAsync("import", "./scripts/txdocumentviewer.js"); } } [JSInvokable("LoadDocumentFromFile")] public void LoadDocumentFromFile(string filename) { // check if the file exists if (!System.IO.File.Exists(filename)) { return; } // load the file into a byte array byte[] bDocument = System.IO.File.ReadAllBytes(filename); // invoke the JS function 'loadDocument' to load back to the modified document _txdocumentviewer?.InvokeVoidAsync("loadDocument", new object[] { Convert.ToBase64String(bDocument), filename }); } } ``` Any function of the referenced *txdocumentviewer.js* JavaScript file can be called using the created *IJSObjectReference* *\_txdocumentviewer*. The *DotNetObjectReference* points to this Razor component. This is passed to the JavaScript functions to save and reload the document. #### Consuming the TXDocumentViewer Razor Component In this step, we are going to use the Razor component we have created on a page. 1. Find the *Home.razor* page in the *Pages* folder and replace the content with the following code: ``` @page "/" @rendermode InteractiveServer @inject NavigationManager Navigator;
@code { private TXDocumentViewer? _txdocumentviewer; // insert a table using the client-side API private void LoadDocment() { _txdocumentviewer?.LoadDocumentFromFile("App_Data/demo.tx"); } } ``` 2. Select the project in the *Solution Explorer* and choose *New Folder* from the *Project* main menu. Name it *App\_Data* and copy the following file into it: [demo.tx](https://s1-www.textcontrol.com/assets/dist/blog/2024/01/29/a/assets/demo.tx) In the *Solution Explorer*, set the *Copy to Output Directory* property to *Copy always*. Compile and start the application. ![Text Control in Blazor Server](https://s1-www.textcontrol.com/assets/dist/blog/2024/01/29/a/assets/blazor1.webp "Text Control in Blazor Server") #### Button: Loading a Document The *LoadDocument()* method is called in the .NET code of *Home.razor* when the button is clicked. ``` private void LoadDocment() { _txdocumentviewer?.LoadDocumentFromFile("App_Data/demo.tx"); } ``` This calls the *LoadDocumentFromFile()* method of the *TXDocumentViewer.Razor* component where a server-side file is loaded into a byte array. ``` [JSInvokable("LoadDocumentFromFile")] public void LoadDocumentFromFile(string filename) { // check if the file exists if (!System.IO.File.Exists(filename)) { return; } // load the file into a byte array byte[] bDocument = System.IO.File.ReadAllBytes(filename); // invoke the JS function 'loadDocument' to load back to the modified document _txdocumentviewer?.InvokeVoidAsync("loadDocument", new object[] { Convert.ToBase64String(bDocument), filename }); } ``` This calls the JavaScript function *loadDocument()* in the *txdocumentviewer.js* JavaScript file: ``` export function loadDocument(document, name) { // load the document back into the editor (TXTextControl) TXDocumentViewer.loadDocument(document, name); }; ``` ![Text Control in Blazor Server](https://s1-www.textcontrol.com/assets/dist/blog/2024/01/29/a/assets/blazor2.webp "Text Control in Blazor Server") For your own testing, you can download and try this sample from our GitHub repository. --- ## 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 - [Handling Electronic Signatures in a Blazor Web App using .NET 8](https://www.textcontrol.com/blog/2024/02/06/handling-electronic-signatures-in-a-blazor-web-app-using-net-8/llms.txt) - [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) - [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) - [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) - [Using TX Text Control in a Blazor Server App with .NET 8](https://www.textcontrol.com/blog/2024/01/25/using-tx-text-control-in-an-blazor-server-app-with-net-8/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) - [E-Sign Comes to Blazor: Document Viewer 33.0.1 Released](https://www.textcontrol.com/blog/2025/04/24/e-sign-comes-to-blazor-document-viewer-33-0-1-released/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) - [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) - [ASP.NET Core: Use the Document Editor and Viewer in the Same Razor View](https://www.textcontrol.com/blog/2024/11/08/asp-net-core-use-the-document-editor-and-viewer-in-the-same-razor-view/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) - [Document Viewer: Setting the Rendering Mode](https://www.textcontrol.com/blog/2024/08/22/document-viewer-setting-the-rendering-mode/llms.txt) - [View MS Word DOCX and PDF Documents using a .NET C# Document Viewer for ASP.NET Core and ASP.NET](https://www.textcontrol.com/blog/2024/08/08/view-ms-word-docx-and-pdf-documents-using-a-net-csharp-document-viewer-for-aspnet-core-and-aspnet/llms.txt) - [Stay Up-To-Date: Document Viewer 32.3.1 Released](https://www.textcontrol.com/blog/2024/08/08/stay-up-to-date-document-viewer-32-3-1-released/llms.txt) - [Getting Started Video Tutorial: How to Add Electronic and Digital Signatures to PDF Documents in ASP.NET Core C#](https://www.textcontrol.com/blog/2024/08/05/getting-started-video-tutorial-how-to-add-electronic-and-digital-signatures-to-pdf-documents-in-asp-net-core-csharp/llms.txt) - [Getting Started Video Tutorial: How to use the Document Viewer in ASP.NET Core C#](https://www.textcontrol.com/blog/2024/08/05/getting-started-video-tutorial-how-to-use-the-document-viewer-in-asp-net-core-csharp/llms.txt) - [Transforming Financial Documents into Smart and Secure Forms in ASP.NET Core C#](https://www.textcontrol.com/blog/2024/05/01/transforming-financial-documents-into-smart-and-secure-forms-in-asp-net-core-c-sharp/llms.txt) - [Document Viewer: Long Polling Support for Loading Documents](https://www.textcontrol.com/blog/2024/04/25/document-viewer-long-polling-support-for-loading-documents/llms.txt) - [Adding and Sharing Annotations across Document Types using the Document Viewer in ASP.NET Core C#](https://www.textcontrol.com/blog/2024/04/19/adding-and-sharing-annotations-across-document-types-using-the-document-viewer-in-asp-net-core-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) - [Document Viewer 32.2.1 Released](https://www.textcontrol.com/blog/2024/03/13/document-viewer-3221-released/llms.txt)