Blazor

Since TX Text Control .NET Server 30.0 supports .NET 5 and .NET 6, the components can be used in Blazor Server Apps. This article shows how to save a document using the document editor and to modify the document server-side using the &#9584; TX Text Control .NET Server &#9584; TXTextControl Namespace &#9584; ServerTextControl Class The ServerTextControl class implements a component that provide high-level text processing features for server-based applications. " data-tippy-interactive="true" data-tippy-placement="bottom" data-tooltip-width="wide"

>Server Text Control class.

Data Flow

The following dialog shows the data flow in this concept. The JavaScript API of TX Text Control is used to save the document which is transferred to .NET (the "server"). In .NET, the document is processed using an instance of ServerTextControl and is sent back to client-side by invoking a JavaScript function that loads the content back into the TX Text Control document editor.

Server-side, the document is loaded and modified by adding the text "This document has been modified by .NET" to the beginning of the document before it is loaded back into the editor.

The Required Code

The following code shows the editor page that consists of the document editor and a button:

@page "/editor" @inject IJSRuntime JSRuntime

Send Document to .NET

#txDocumentEditorContainer { width: 1100px; height: 600px; display: inline-block; position: relative; }

Save and Reload Document

@code { private ElementReference txDocumentEditorContainer;

protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await JSRuntime.InvokeVoidAsync("addEditorToElement", txDocumentEditorContainer); } }

private void SaveDocument() { // create a .NET object and call the 'saveDocument' JS function var dotNetReference = DotNetObjectReference.Create(this); JSRuntime.InvokeVoidAsync("TextControl.saveDocument", dotNetReference); }

[JSInvokable("ProcessDocument")] public void ProcessDocument(string document) { byte[] bDocument;

// create a ServerTextControl instance to load the saved document using (TXTextControl.ServerTextControl tx = new TXTextControl.ServerTextControl()) { tx.Create(); tx.Load(Convert.FromBase64String(document), TXTextControl.BinaryStreamType.InternalUnicodeFormat); // add additional text to the document tx.Selection.Text = "This document has been modified by .NET\r\n"; // save back tx.Save(out bDocument, TXTextControl.BinaryStreamType.InternalUnicodeFormat); }

// invoke the JS function 'loadDocument' to load back to the modified document JSRuntime.InvokeVoidAsync("TextControl.loadDocument", bDocument); }

} When clicking the button, a DotNetObjectReference object is created and invoked with the TextControl.saveDocument JavaScript method. In this method, the document is saved and passed to the .NET method ProcessDocument (see code above).

var TextControl = TextControl || {};

TextControl.saveDocument = function (dotNetObject) {

// save the document on TXTextControl object TXTextControl.saveDocument(TXTextControl.StreamType.InternalUnicodeFormat, function (document) { // call the .NET method 'ProcessDocument' with the saved document data dotNetObject.invokeMethodAsync('ProcessDocument', document.data); });

};

TextControl.loadDocument = function (document) {

// load the document back into the editor (TXTextControl) TXTextControl.loadDocument(TXTextControl.StreamType.InternalUnicodeFormat, document);

}; In the .NET method ProcessDocument , the saved document is loaded into a ServerTextControl instance to add additional text. Finally, it is saved back by invoking another JavaScript method TextControl.loadDocument to load the modified document into the document editor.

Conclusion

This data flow shows how to use the document editor and the server-side non-UI components of TX Text Control in combination in Blazor Server Apps.

You can test this data flow using the sample project that is hosted in our GitHub account.

TX Text Control .NET Server

DS Server

Server & Web

Windows Forms

WPF

ActiveX

Core Technologies

Blog

Core Technologies

Blog

Authors

Latest Posts

Support Resources

Documentation

Support

Getting Started

Other Resources

About Us

Industry events

Company

Contact

Newsletter

Legal

Sign in

Create account

Text Control Account

Blazor

Post tagged with Blazor in 2022

Server & Web

Windows Forms

WPF

ActiveX

Core Technologies

​

Latest Posts

​

Support

Getting Started

​

Other Resources

Company

Contact

Newsletter

Legal

Text Control Account

​

​

Blazor

Post tagged with Blazor in 2022 ​

January 2022

Post tagged with Blazor in 2022