The TX Text Control Document Editor Blazor packages use the InteractiveServer render mode. This rendering mode provides a seamless way to load documents that reside on the server. It also simplifies saving edited documents back to the server without requiring complex client-server synchronization.

This tutorial demonstrates how to combine Blazor calls - such as saving a document - with TX Text Control's server-side MailMerge functionality, enabling powerful document automation workflows in your Blazor applications.

The application, which can be downloaded from our GitHub repository, is based on the basic Getting Started tutorial. Use the link below to create such an application.

Getting Started

This article shows how to integrate the Document Editor for Blazor into an ASP.NET Core application running on Windows and Linux. The Document Editor is a powerful word processing component that can be used to create, edit, and view documents in various formats.

Getting Started: Document Editor for Blazor in ASP.NET Core

The applications integrate the document editor into a page and provide various buttons to load and save the document, load a JSON file as a data source, and merge the document server-side. We will describe all of these processes step by step.

Loading a Document

The first button loads a document directly from the server using server-side C# code. The document is located on the server in a folder named Documents.

The following Razor code shows the Document Editor component and its buttons.

@page "/"
@rendermode InteractiveServer

<PageTitle>Home</PageTitle>

<h1>Hello, Blazor!</h1>

<TXTextControl.Web.Blazor.DocumentEditor.DocumentEditor 
                                                        OnLoad="documentEditor_Load" 
                                                        @ref="_documentEditor" 
                                                        Width="800px" 
                                                        Height="500px" />

<button class="btn btn-primary mt-5" @onclick="ButtonLoad">
    Load Document
</button>

<button class="btn btn-primary mt-5" @onclick="ButtonSave">
    Save Document
</button>

<button class="btn btn-primary mt-5" onclick="loadJson()">
    Load JSON Client-Side
</button>

<button class="btn btn-primary mt-5" @onclick="ButtonMerge">
    Merge Template Server-Side
</button>

When the first button is clicked, it calls server-side C# code with a reference to the Document Editor (_documentEditor).

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

Saving a Document

In the same way, the document can also be stored on the server. The second button saves the document to the server using server-side C# code.

private async Task ButtonSave()
{
   try
   {
       await _documentEditor.SaveDocumentAsync("Documents/output.docx",
           TXTextControl.Web.StreamType.WordprocessingML);
   }
   catch (Exception ex)
   {
       Console.Error.WriteLine($"Error saving document: {ex.Message}");
   }
}

Loading a JSON Data Source

The third button loads a JSON data source from a Web API endpoint called api/file. This JSON file is then loaded into the Document Editor using JavaScript. The JavaScript API is required for certain operations, such as manipulating the document or responding to user interactions.

<script>
    function loadJson() {
    // call Web API controller and load json file
    fetch('api/file')
        .then(response => response.json())
        .then(body => {
            TXTextControl.loadJsonData(JSON.stringify(body));
    })
    .catch(error => {
        console.error('Error:', error);
    });
    }
</script>

Merging the Document

The fourth button merges the document with the JSON data source. The merge process is executed on the server using the MailMerge class.

private async Task ButtonMerge()
{
    try
    {
        byte[] data;
        var document = _documentEditor.SaveDocumentAsync(TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat).Result;

        using (TXTextControl.ServerTextControl serverTextControl = new TXTextControl.ServerTextControl())
        {
            serverTextControl.Create();
            serverTextControl.Load(document, TXTextControl.BinaryStreamType.InternalUnicodeFormat);

            TXTextControl.DocumentServer.MailMerge mailMerge = new TXTextControl.DocumentServer.MailMerge();
            mailMerge.TextComponent = serverTextControl;

            string jsonData = System.IO.File.ReadAllText("Documents/data.json");

            mailMerge.MergeJsonData(jsonData);

            serverTextControl.Save("Documents/merged.pdf", TXTextControl.StreamType.AdobePDF);
            serverTextControl.Save(out data, TXTextControl.BinaryStreamType.InternalUnicodeFormat);

            await _documentEditor.LoadDocumentAsync(data, TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat);
        }

    }
    catch (Exception ex)
    {
        Console.Error.WriteLine($"Error merging document: {ex.Message}");
    }
}

As you can see in the code above, the MailMerge class is used directly in the Razor code with the data exported by the Document Editor reference object. The document is exported to PDF, saved to a separate file, and loaded back into the editor.

Conclusion

Integrating the TX Text Control Document Editor into a Blazor application is a straightforward process. The server-side rendering mode provides a seamless way to load and save documents on the server. This tutorial demonstrates how to combine Blazor calls with TX Text Control's server-side mail merge functionality to enable powerful document automation workflows in your Blazor applications.

The full source code of the application is available on GitHub. You can download the project and run it on your local machine.