Products Technologies Demo Docs Blog Support Company

Announcing Our Work on a Blazor Component for Document Editing and Viewing

We are pleased to announce our work on a Blazor document editing and viewing component. This component will be part of our upcoming release and will provide an easy upgrade path from Web Forms to a modern web application framework..

Announcing Our Work on a Blazor Component for Document Editing and Viewing

At Text Control, we're always looking for ways to provide developers with powerful and easy-to-integrate digital document processing tools. Over the past few months, we've been inspired by the feedback we've received after releasing a sample application that demonstrates how to build a Blazor application using our document editor and document viewer. This overwhelmingly positive response has led us to take the next step: Creating dedicated Blazor components for these tools.

What Is Blazor?

For those new to Blazor, it is a modern web framework developed by Microsoft that allows developers to build interactive web applications using C# and .NET. By enabling C# code to run in the browser alongside HTML and CSS, Blazor streamlines the development process. Developers who want to leverage their existing .NET skills for Web development will find this especially appealing. Personally, I think Blazor could be a very good replacement for developers who used to work with Web Forms, since the communication between client and server is handled internally and you don't have to worry about HTTP requests.

Blazor supports two hosting models:

  • Blazor Server: The application runs on the server, and interactions between the browser and the server are handled through a SignalR connection.
  • Blazor WebAssembly: The application runs directly in the browser on WebAssembly.

We are focusing on Blazor Server Interactive to ensure a seamless and responsive document handling experience for our upcoming release.

Blazor Components for Document Processing

Building on the success of our sample, we are excited to announce dedicated Blazor components for both the document editor and document viewer. These components will be packaged as NuGet packages, making them easy to integrate into your Blazor applications.

Developers have access to an intuitive C# API for typical tasks such as loading, saving, and manipulating documents. This eliminates the need for complex JavaScript interop and allows you to handle document operations directly from your server-side code. Documents are loaded and processed directly on the server, eliminating the need for round-tripping to the client. This approach not only improves performance, but also ensures a more secure and efficient workflow for handling sensitive documents.

The following Razor code shows the integration of the Blazor component and buttons to load and save documents directly in C# code.

@page "/"
@rendermode @(new InteractiveServerRenderMode(false))

<PageTitle>TX Text Control for Blazor</PageTitle>

<h1>Hello, Blazor!</h1>

<TXTextControl.Web.Blazor.DocumentEditor.DocumentEditor @ref="_documentEditor" onload="@DocumentEditorLoaded" />

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

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

@if (!string.IsNullOrEmpty(ReturnMessage))
{
    <div class="alert alert-primary mt-5" role="alert">
        @ReturnMessage
    </div>
}

@code {
    private TXTextControl.Web.Blazor.DocumentEditor.DocumentEditor _documentEditor;
    private string ReturnMessage { get; set; } = "";

    private async Task DocumentEditorLoaded()
    {
        try
        {
            await _documentEditor.LoadDocumentAsync(
                "<html><body><h1>Welcome to TX Text Control</h1><p>This is a sample document.</p></body></html>",
                TXTextControl.Web.StringStreamType.HTMLFormat
            );
        }
        catch (Exception ex)
        {
            Console.Error.WriteLine($"Error loading document: {ex.Message}");
        }
    }

    private async Task ButtonLoad()
    {
        try
        {
            await _documentEditor.LoadDocumentAsync("sample.docx", TXTextControl.Web.StreamType.WordprocessingML);

            ReturnMessage = "Document loaded successfully.";
        }
        catch (Exception ex)
        {
            Console.Error.WriteLine($"Error loading document: {ex.Message}");
        }
    }

    private async Task ButtonSave()
    {
        try
        {
            await _documentEditor.SaveDocumentAsync("sample.pdf", TXTextControl.Web.StreamType.AdobePDF);

            ReturnMessage = "Document saved successfully.";
        }
        catch (Exception ex)
        {
            Console.Error.WriteLine($"Error saving document: {ex.Message}");
        }
    }
}

The following screenshot shows the Blazor Text Control Document Editor in action:

Blazor Text Control Document Editor

By providing NuGet packages, integrating our components into your Blazor projects becomes as simple as adding a reference and configuring a few settings. Our goal is to reduce the complexity of setup so you can focus on building great applications.

Why Blazor and Why Now?

Blazor's growing popularity in the .NET ecosystem makes it the perfect platform for us to extend our document processing capabilities. By offering native Blazor components, we're making it easier than ever for developers to integrate advanced document editing and viewing into their applications without compromising performance or usability.

This move is also very exciting for our upcoming Linux release, where Blazor applications can be seamlessly deployed in Linux environments. This opens up new opportunities for developers who want to build cross-platform applications that take advantage of our document processing capabilities.

Stay tuned for more updates on our Blazor components and the upcoming release. We can't wait to see what you build with our new tools!

Stay in the loop!

Subscribe to the newsletter to receive the latest updates.

Related Posts

AngularASP.NETBlazor

Building an ASP.NET Core Backend (Linux and Windows) for the Document Editor…

This article shows how to create a backend for the Document Editor and Viewer using ASP.NET Core. The backend can be hosted on Windows and Linux and can be used in Blazor, Angular, JavaScript, and…


ASP.NETBlazorASP.NET Core

TX Text Control Document Editor and Viewer for Blazor Released

We are very happy to announce the immediate availability of TX Text Control packages for Blazor. This article gives an overview of the available packages and how to use them.


ASP.NETBlazorASP.NET Core

TX Text Control for Blazor: Mail Merge Integration Tutorial

This tutorial shows how to integrate the TX Text Control MailMerge component into a Blazor application using the TX Text Control .NET Server.


ASP.NETBlazorASP.NET Core

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

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…


ASP.NETBlazorASP.NET Core

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

This article shows how to integrate the Document Viewer for Blazor into an ASP.NET Core application running on Windows and Linux. The Document Viewer is a powerful and flexible component to…