Backend

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 &#9584; TX Text Control .NET Server &#9584; Web.MVC.DocumentViewer Namespace &#9584; DocumentViewer Class The DocumentViewer class represents an extension object implementing the TX Text Control DocumentViewer functionality. " data-tippy-interactive="true" data-tippy-placement="bottom" data-tooltip-width="wide"

>Document Viewer components.

Creating the Backend

Make sure that you downloaded the latest version of Visual Studio 2022 that comes with the .NET 6 SDK .

In Visual Studio 2022, create a new project by choosing Create a new project .

Select ASP.NET Core Web App (Model-View-Controller) as the project template and confirm with Next .

Choose a name (e.g. tx-documentviewer-backend ) for your project and confirm with Next .

In the next dialog, choose .NET 6 (Long-term support) as the Framework and confirm with Create .

Adding the NuGet Packages

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

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

Select the solution in the Solution Explorer and File -> Add -> New Project... .

Select ASP.NET Core Web App (Model-View-Controller) as the project template and confirm with Next .

Choose a name (e.g. tx-documentviewer-client ) for your project and confirm with Next .

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.

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

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.

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 @Html.TXTextControl().DocumentViewer(settings => { settings.BasePath = "https://localhost:7198"; settings.DocumentData = Convert.ToBase64String( Encoding.ASCII.GetBytes(" Sample Content ")); settings.Dock = DocumentViewerSettings.DockStyle.Fill; }).Render() 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); }); In line 7, replace the value of the BasePath property with the copied applicationUrl value from step 6.

Starting the Solution

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 .

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.

TX Text Control .NET Server

DS Server

Server & Web

Windows Forms

WPF

ActiveX

Core Technologies

Blog

Core Technologies

Blog

Authors

Latest Posts

Support Resources

Documentation

Support

Getting Started

Other Resources

About Us

Industry events

Company

Contact

Newsletter

Legal

Sign in

Create account

Text Control Account

Backend

Post tagged with Backend in 2022

Server & Web

Windows Forms

WPF

ActiveX

Core Technologies

​

Latest Posts

​

Support

Getting Started

​

Other Resources

Company

Contact

Newsletter

Legal

Text Control Account

​

​

Backend

Post tagged with Backend in 2022 ​

October 2022

Post tagged with Backend in 2022