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

    ASP.NET Core Web Application

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

    Add the following code after the entry app.UseHttpsRedirection();:

    // enable Web Sockets
    app.UseWebSockets();
    // attach the Text Control WebSocketHandler middleware
    app.UseTXWebSocketMiddleware();
    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
    <PageTitle>Home</PageTitle>
    <h1>Hello, Blazor!</h1>
    <TXTextControl.Web.Blazor.DocumentEditor.DocumentEditor
    @ref="_documentEditor" Width="800px" Height="500px" />
    <button class="btn btn-primary mt-5" @onclick="ButtonLoad">
    Load Document
    </button>
    @code {
    private TXTextControl.Web.Blazor.DocumentEditor.DocumentEditor _documentEditor;
    private async Task ButtonLoad()
    {
    try
    {
    await _documentEditor.LoadDocumentAsync("Documents/template.docx",
    TXTextControl.Web.StreamType.WordprocessingML);
    }
    catch (Exception ex)
    {
    Console.Error.WriteLine($"Error loading document: {ex.Message}");
    }
    }
    }
    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 Editor.

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 Editor with ASP.NET Core and Linux WSL Support