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.

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.

   

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

   

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.

   

   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.

   

   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.