Prerequisites

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

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.

    Creating the .NET 8 project

Adding the NuGet Packages

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

    ASP.NET Core Web Application

  2. 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 for ASP.NET setup.

Configure the Application

  1. 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;
    view raw test.cs hosted with ❤ by GitHub

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

    builder.Services.AddControllers();
    view raw test.cs hosted with ❤ by GitHub

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

    app.UseRouting();
    app.UseAntiforgery();
    app.UseTXDocumentViewer();
    view raw test.cs hosted with ❤ by GitHub

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();
view raw test.cs hosted with ❤ by GitHub

Adding the Control to the View

  1. 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);
    }
    }
    view raw test.razor hosted with ❤ by GitHub

Adding Documents

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

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

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

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

Loading documents with TX Text Control Blazor

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