# Using the MVC DocumentViewer with a Separate Backend

> The MVC DocumentViewer can be used with a separate backend running on another server. This tutorial shows how to setup such an environment.

- **Author:** Bjoern Meyer
- **Published:** 2022-10-31
- **Modified:** 2025-11-16
- **Description:** The MVC DocumentViewer can be used with a separate backend running on another server. This tutorial shows how to setup such an environment.
- **4 min read** (731 words)
- **Tags:**
  - ASP.NET
  - Backend
- **Web URL:** https://www.textcontrol.com/blog/2022/10/31/using-the-mvc-documentviewer-with-a-separate-backend/
- **LLMs URL:** https://www.textcontrol.com/blog/2022/10/31/using-the-mvc-documentviewer-with-a-separate-backend/llms.txt
- **LLMs-Full URL:** https://www.textcontrol.com/blog/2022/10/31/using-the-mvc-documentviewer-with-a-separate-backend/llms-full.txt

---

The following tutorial shows how to setup a solution with two .NET 6 ASP.NET Core projects to simulate a separate backend running the required DocumentViewer components.

### Creating the Backend

Make sure that you downloaded the latest version of Visual Studio 2022 that comes with the [.NET 6 SDK](https://dotnet.microsoft.com/download/dotnet/6.0).

1. In Visual Studio 2022, create a new project by choosing *Create a new project*.
2. Select *ASP.NET Core Web App (Model-View-Controller)* as the project template and confirm with *Next*.
3. Choose a name (e.g. **tx-documentviewer-backend**) for your project and confirm with *Next*.
4. In the next dialog, choose *.NET 6 (Long-term support)* as the *Framework* and confirm with *Create*.
    
    ![Creating the .NET 6 project](https://s1-www.textcontrol.com/assets/dist/blog/2022/10/31/a/assets/visualstudio1.webp "Creating the .NET 6 project")

#### Adding the NuGet Packages

5. In the *Solution Explorer*, select your created project and choose *Manage NuGet Packages...* from the *Project* main menu.
    
    Select *Text Control Offline Packages* from the *Package source* drop-down.
    
    *Install* the latest versions of the following packages:
    
    
    - *TXTextControl.Web.DocumentViewer*
    - *TXTextControl.TextControl.ASP.SDK*
    
    ![ASP.NET Core Web Application](https://s1-www.textcontrol.com/assets/dist/blog/2022/10/31/a/assets/visualstudio2.webp "ASP.NET Core Web Application")

#### Adding CORS

In order to access the backend, CORS (Cross-Origin Resource Sharing) must be added to *Program.cs*

1. Find the *Program.cs* in the *Solution Explorer*, open it and replace the content with the following content:
    
    ```
    var builder = WebApplication.CreateBuilder(args);
    
    // Add services to the container.
    builder.Services.AddControllersWithViews();
    
    builder.Services.AddCors(p => p.AddPolicy("corsapp", builder =>
    {
    	builder.WithOrigins("*").AllowAnyMethod().AllowAnyHeader();
    }));
    
    var app = builder.Build();
    
    // Configure the HTTP request pipeline.
    if (!app.Environment.IsDevelopment()) {
    	app.UseExceptionHandler("/Home/Error");
    	app.UseHsts();
    }
    
    app.UseHttpsRedirection();
    app.UseStaticFiles();
    
    app.UseCors("corsapp");
    
    app.UseRouting();
    
    app.UseAuthorization();
    
    app.MapControllerRoute(
    	name: "default",
    	pattern: "{controller=Home}/{action=Index}/{id?}");
    
    app.Run();
    ```

### Creating the Client Application

1. Select the solution in the *Solution Explorer* and *File -> Add -> New Project...*.
2. Select *ASP.NET Core Web App (Model-View-Controller)* as the project template and confirm with *Next*.
3. Choose a name (e.g. **tx-documentviewer-client**) for your project and confirm with *Next*.
4. In the next dialog, choose *.NET 6 (Long-term support)* as the *Framework* and confirm with *Create*.

#### Adding the NuGet Package

In the client project, both NuGet packages need to be added for compiling reasons. The actual work is done by the backend in this scenario.

5. In the *Solution Explorer*, select your created project and choose *Manage NuGet Packages...* from the *Project* main menu.
    
    Select *Text Control Offline Packages* from the *Package source* drop-down.
    
    *Install* the latest versions of the following packages:
    
    
    - *TXTextControl.Web.DocumentViewer*
    - *TXTextControl.TextControl.ASP.SDK*

#### Adding the Control to the View

6. In the *Solution Explorer*, open the *Properties -> launchSettings.json* file of the backend project and find the *applicationUrl* value.
    
    ![ASP.NET Core Web Application](https://s1-www.textcontrol.com/assets/dist/blog/2022/10/31/a/assets/settings1.webp "ASP.NET Core Web Application")
    
    Copy that value into the clipboard.
7. Find the *Index.cshtml* file in the *Views -> Home* folder. Replace the complete content with the following code:
    
    ```
    @using TXTextControl.Web.MVC.DocumentViewer
    @using System.Text
    	        
    <div style="width: 800px; height: 600px;">
    	    
    @Html.TXTextControl().DocumentViewer(settings => {
    	settings.BasePath = "https://localhost:7198";
    	settings.DocumentData = Convert.ToBase64String(
    	    Encoding.ASCII.GetBytes("<strong>Sample Content</strong>"));
    	settings.Dock = DocumentViewerSettings.DockStyle.Fill;
    }).Render()
    	    
    </div>
    	
    <script>
    	
    	var jsonAnnotations = '[[{"pen":{"type":"comment","objectWidth":32,"objectHeight":32},"user":"Unknown User","location":{"x":127,"y":50},"time":1658908087097,"comments":[{"comment":"Welcome to Text Control","user":"Unknown User","date":1658908100339,"id":"c8d818ce-ff1e-4c0c-b78c-6ba95a98dede","status":"none"}],"id":"feed80ff-1c94-4abf-9838-3e833faa4092","status":"Accepted"}]]';
    	
    	window.addEventListener("documentViewerLoaded", function () {
    	    TXDocumentViewer.annotations.showToolbar(true);
    	    TXDocumentViewer.annotations.load(jsonAnnotations);
    	});
    	
    </script>
    ```
    
    In line 7, replace the value of the *BasePath* property with the copied *applicationUrl* value from step 6.

#### Starting the Solution

1. Select the solution in the *Solution Explorer* and choose *Project -> Properties* from the main menu.
    
    In the opened dialog, select *Multiple startup projects* and set both *Actions* to *Start*.
    
    ![ASP.NET Core Web Application](https://s1-www.textcontrol.com/assets/dist/blog/2022/10/31/a/assets/settings2.webp "ASP.NET Core Web Application")
    
    Confirm with *OK*.
2. Compile and start the application.

When checking the network traffic on the client application, you can see that all required calls to the backend (*/TextControl*) are routed to our backend project.

![ASP.NET Core Web Application](https://s1-www.textcontrol.com/assets/dist/blog/2022/10/31/a/assets/settings3.webp "ASP.NET Core Web Application")

---

## 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

- [Deploying the TX Text Control Document Editor Backend Web Server in Docker](https://www.textcontrol.com/blog/2025/04/10/deploying-the-tx-text-control-document-editor-backend-web-server-in-docker/llms.txt)
- [Configuring the TX Text Control Document Editor Backend Web Server, including Port and Logging](https://www.textcontrol.com/blog/2025/03/28/configuring-the-tx-text-control-document-editor-backend-web-server-including-port-and-logging/llms.txt)
- [Designing a Maintainable PDF Generation Web API in ASP.NET Core (Linux) C# with Clean Architecture and TX Text Control](https://www.textcontrol.com/blog/2025/03/27/designing-a-maintainable-pdf-generation-web-api-in-asp-net-core-linux-c-sharp-with-clean-architecture-and-tx-text-control/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)
- [Load Balancing: Using Different TCP Service Locations using a Custom WebSocketHandler](https://www.textcontrol.com/blog/2021/11/02/using-different-tcp-service-locations/llms.txt)
- [Expanding Text Control Agent Skills: New ServerTextControl Skills for AI Assisted Document Processing](https://www.textcontrol.com/blog/2026/04/13/expanding-text-control-agent-skills-new-servertextcontrol-skills-for-ai-assisted-document-processing/llms.txt)
- [Programmatically Fill, Flatten, and Export DOCX Form Templates to PDF in C# .NET](https://www.textcontrol.com/blog/2026/04/10/programmatically-fill-flatten-and-export-docx-form-templates-to-pdf-in-csharp-dotnet/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)
- [TX Spell .NET 11.0 SP1 is Now Available: What's New in the Latest Version](https://www.textcontrol.com/blog/2026/04/08/tx-spell-net-11-0-sp1-is-now-available/llms.txt)
- [TX Text Control vs iText: Understanding Template-Based Document Generation in .NET](https://www.textcontrol.com/blog/2026/04/07/tx-text-control-vs-itext-understanding-template-based-document-generation-in-dotnet/llms.txt)
- [Extracting Structured Table Data from DOCX Word Documents in C# .NET with Domain-Aware Table Detection](https://www.textcontrol.com/blog/2026/04/03/extracting-structured-table-data-from-docx-word-documents-in-csharp-dotnet-with-domain-aware-table-detection/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)
- [Why Structured E-Invoices Still Need Tamper Protection using C# and .NET](https://www.textcontrol.com/blog/2026/03/24/why-structured-e-invoices-still-need-tamper-protection-using-csharp-and-dotnet/llms.txt)
- [AI Generated PDFs, PDF/UA, and Compliance Risk: Why Accessible Document Generation Must Be Built Into the Pipeline in C# .NET](https://www.textcontrol.com/blog/2026/03/23/ai-generated-pdfs-pdf-ua-and-compliance-risk-why-accessible-document-generation-must-be-built-into-the-pipeline-in-c-sharp-dot-net/llms.txt)
- [Ten Years of MD-DevDays: From Community Idea to One of Germany's Largest Developer Conferences](https://www.textcontrol.com/blog/2026/03/23/ten-years-of-md-devdays/llms.txt)
- [File Based Document Repository with Version Control in .NET with TX Text Control](https://www.textcontrol.com/blog/2026/03/20/file-based-document-repository-with-version-control-in-dotnet/llms.txt)
- [Create Fillable PDFs from HTML Forms in C# ASP.NET Core Using a WYSIWYG Template](https://www.textcontrol.com/blog/2026/03/17/create-fillable-pdfs-from-html-forms-in-csharp-aspnet-core-using-a-wysiwyg-template/llms.txt)
- [Why HTML to PDF Conversion is Often the Wrong Choice for Business Documents in C# .NET](https://www.textcontrol.com/blog/2026/03/13/why-html-to-pdf-conversion-is-often-the-wrong-choice-for-business-documents-in-csharp-dot-net/llms.txt)
- [Inspect and Process Track Changes in DOCX Documents with TX Text Control with .NET C#](https://www.textcontrol.com/blog/2026/03/10/inspect-and-process-track-changes-in-docx-documents-with-tx-text-control-with-dotnet-csharp/llms.txt)
- [Text Control at BASTA! Spring 2026 in Frankfurt](https://www.textcontrol.com/blog/2026/03/06/text-control-at-basta-spring-2026-in-frankfurt/llms.txt)
- [From Legacy Microsoft Office Automation to a Future-Ready Document Pipeline with C# .NET](https://www.textcontrol.com/blog/2026/03/02/from-legacy-microsoft-office-automation-to-a-future-ready-document-pipeline-with-csharp-dot-net/llms.txt)
- [We are Gold Partner at Techorama Belgium 2026](https://www.textcontrol.com/blog/2026/02/26/we-are-gold-partner-techorama-belgium-2026/llms.txt)
- [Text Control Sponsors & Exhibits at BASTA! Spring 2026 in Frankfurt](https://www.textcontrol.com/blog/2026/02/26/text-control-sponsors-exhibits-basta-spring-2026-frankfurt/llms.txt)
- [Azure DevOps with TX Text Control .NET Server 34.0: Private NuGet Feed and Azure Artifacts](https://www.textcontrol.com/blog/2026/02/25/azure-devops-with-tx-text-control-dotnet-server-34-0-private-nuget-feed-and-azure-artifacts/llms.txt)
