Getting Started: Document Viewer with ASP.NET Core

This article shows how to use the TX Text Control ASP.NET document viewer within a .NET 6 application in Visual Studio 2022.

The source code for this example is contained in the following directories:

• %USERPROFILE%\Documents\TX Text Control 32.0.NET Server for ASP.NET\CSharp\Core\viewer\

Creating the Application

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

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

Adding the Control to the View

1. Find the Index.cshtml file in the Views -> Home folder. Replace the complete content with the following code to add the document viewer to the view:

• C#

​@using TXTextControl.Web.MVC.DocumentViewer
@using System.Text

<div style="width: 800px; height: 600px;">

@Html.TXTextControl().DocumentViewer(settings => {
    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>

Compile and start the application.