All client-side packages, including those for Angular, React, and JavaScript, require an ASP.NET Core backend application based on TX Text Control .NET Server to host the Document Editor and Document Viewer.

Prerequisites

In order to create a back-end application, you must have the TX Text Control .NET Server installed on your machine. You can download a trial version here.

Download Trial Version

Creating the Application

1. Open Visual Studio and create a new ASP.NET Core Empty application.

   

2. Select a project name, location and solution name in the next dialog and confirm with Next.

3. In the next dialog, choose .NET 8 (Long Term Support) as the Framework and confirm with Create.

Adding the NuGet Packages

1. 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.TextControl.ASP.SDK
   • TXTextControl.Web
   • TXTextControl.Web.DocumentViewer

   

2. Select nuget.org as the Package source and check for updates of the above packages. Update them if a newer package is available.

Adding the Middleware

1. Open the Program.cs file located in the project's root folder. Replace the complete code with the following code:

   using TXTextControl.Web;
   using TXTextControl.Web.MVC.DocumentViewer;
   
   var builder = WebApplication.CreateBuilder(args);
   
   // adding CORS policy to allow all origins
   builder.Services.AddCors(options =>
   {
       options.AddDefaultPolicy(
                  builder =>
                  {
               builder.AllowAnyOrigin()
                   .AllowAnyMethod()
                   .AllowAnyHeader();
           });
   });
   
   // adding controllers for DocumentViewer Web API
   builder.Services.AddControllers();
   
   var app = builder.Build();
   
   app.MapGet("/", () => "TX Text Control .NET Server for ASP.NET Backend is up and running!");
   
   app.UseRouting();
   
   // adding CORS middleware
   app.UseCors();
   
   // adding WebSockets middleware
   app.UseWebSockets();
   
   // adding TX Text Control middleware
   app.UseTXWebSocketMiddleware();
   app.UseTXDocumentViewer();
   
   app.Run();

Running the Backend

1. Press F5 to start the application.

After launching the application, you should see the following screen.

Connecting Client-Site Packages

The Document Editor and Document Viewer instances used in your Angular, React, or JavaScript applications can now be connected to your newly created backend.

Document Editor

In your Angular, React, or JavaScript project, change the webSocketURL attribute of the Document Editor component in the to the URL of your backend application created above. For example in Angular:

<tx-document-editor
  width="1000px"
  height="500px"
  webSocketURL="wss://localhost:7118/api/TXWebSocket">
</tx-document-editor>

Make sure that wss is used if the backend is hosted using https and that ws is used in the case of http.

Document Viewer

In your Angular, React, or JavaScript project, change the basePath attribute of the Document Viewer component in the to the URL of your backend application created above. For example in Angular:

<tx-document-viewer
   width="1000px"
   height="800px"
   basePath="https://localhost:7118"
</tx-document-viewer>