Prerequisites

You need to download and install the trial version of TX Text Control .NET Server to host the required backend:

• Download Trial Version
  Setup download and installation required.

Creating the Application

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

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

2. Select Blazor Web App 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 8 (Long Term Support) as the Framework, select Server as the Interactive render mode 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 nuget.org as the Package source.

   Install the following package:

   • TXTextControl.Web.Blazor.DocumentViewer

   

6. Select Text Control Offline Packages as the Package source and install the following packages:

   • TXTextControl.TextControl.Core.SDK
   • TXTextControl.Web.DocumentViewer

Important Notice

The Blazor Document Viewer package depends on the TX Text Control package TXTextControl.TextControl.Core.SDK, which must be installed using the developer setup (trial of full version) and will be available in the Text Control Offline Packages package source.

If this package is not found, be sure to install the TX Text Control .NET Server setup.

• Download Trial Version
  Setup download and installation required.

Configure the Application

7. Open the Program.cs file located in the project's root folder. At the very top of the file, insert the following code:

   using TXTextControl.Web.MVC.DocumentViewer;

   Add the following code after the entry var builder = WebApplication.CreateBuilder(args);:

   builder.Services.AddControllers();

   After app.UseStaticFiles();, add the following code:

   app.UseRouting();
   app.UseAntiforgery();
   app.UseTXDocumentViewer();

Your complete Program.cs file should look like this:

using TXTextControl.Web.MVC.DocumentViewer;
using tx_blazor_33_editor.Components;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllers();
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();
app.UseAntiforgery();
app.UseTXDocumentViewer();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

Adding the Control to the View

8. Find the Home.razor file in the Components -> Pages folder. Replace the complete content with the following code to add the document editor to the view:

   @page "/"
   @rendermode InteractiveServer
   
   <div style="width: 800px; height: 500px">
       <TXTextControl.Web.Blazor.DocumentViewer.DocumentViewer @ref=_documentViewer />
   </div>
   
   <button @onclick="LoadDocument">Load Document</button>
   
   @code {
       private TXTextControl.Web.Blazor.DocumentViewer.DocumentViewer _documentViewer;
   
       public async Task LoadDocument()
       {
           byte[] document = System.IO.File.ReadAllBytes("Documents/template.docx");
           await _documentViewer.LoadDocument(document);
       }
   }

Adding Documents

To show how to load documents into the Document Editor, we will add a few sample documents to the application.

9. Create a new folder in the project's root folder and name it Documents.

10. Place any documents you want to load into the Document Editor into this folder. In this sample, we will use a document named template.docx.

Running the Application

11. Run the application by pressing F5 or by choosing Debug -> Start Debugging from the main menu.

When clicking the Load Document button, the document template.docx will be loaded into the Document Viewer.

Deploying to Linux?

If you want to deploy to Linux or run it with WSL or Docker support, see the following article to learn how to deploy the required web server to Linux.

Getting Started: Document Viewer with ASP.NET Core and Linux WSL Support