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

   

Configure the Application

6. 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;

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

   // enable Web Sockets
   app.UseWebSockets();
   
   // attach the Text Control WebSocketHandler middleware
   app.UseTXWebSocketMiddleware();

Adding the Control to the View

7. 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}");
           }
       }
   }

Adding Documents

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

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

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

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

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