The TX Text Control document editor for Angular can be used in ASP.NET Core Web Applications. The back-end Web API of the ASP.NET Core Web Application can be used to load data and to merge templates created using the online editor.

This article shows how to create a new ASP.NET Core back-end Web Application with an Angular front-end SPA.

Creating the Application

The following tutorial shows how to create an ASP.NET Core 3 Web Application that can be deployed to Windows machines.

  1. In Visual Studio 2019 (> 16.5.4), create a new project, select ASP.NET Core Web Application as the project template and continue with Next.

    Creating the application

  2. Select a project name, location and solution name in the next dialog and confirm with Create.

  3. In the last dialog, select .NET Core and ASP.NET Core 3.1 as the project target, select Angular as the template and confirm with Create.

    Creating the application

Adding TX Text Control Assemblies

  1. While the project is selected in the Solution Explorer, choose Project -> Add Reference... to open the Reference Manager. In the opened dialog, select Browse... to select the required TX Text Control assemblies. Navigate to the installation folder of TX Text Control and select the following assemblies from the Assembly folder:

    • TXDocumentServer.dll
    • TXTextControl.dll
    • TXTextControl.Server.dll
    • TXDrawing.dll

    Creating the application

    Repeat this step with the following assemblies from the Assembly/bin64 folder:

    • txic.dll
    • txkernel.dll
    • txtools.dll
    • txpdf.dll

    After selecting these assemblies, close the Reference Manager by confirming with OK.

  2. While the project is selected in the Solution Explorer, choose Project -> Add Existing Item.... Browse to the TX Text Control installation folder and select the following files from the Assembly/bin64:

    • tx27_xml.dll
    • tx27_css.dll
    • tx27_doc.dll
    • tx27_dox.dll
    • tx27_htm.dll
    • tx27_pdf.dll
    • tx27_rtf.dll
    • tx27_xlx.dll

  3. Select the files from step 5 in the Solution Explorer and set the Copy to Output Directory to Copy always.

Adding the License

  1. While the project is selected in the Solution Explorer, choose Project -> Add New Item.... Select Text File, name the file licenses.licx and close the dialog by clicking Add.

    Open the newly added file and add the following content:

    TXTextControl.ServerTextControl, TXTextControl.Server, Culture=neutral, PublicKeyToken=6b83fe9a75cfb638
    view raw licenses.licx hosted with ❤ by GitHub

    Set the Build Action property to Embedded Resource.

    In case, you are getting compile errors (MSB6003 The specified task executable "lc.exe" could not be run.), please refer to this article:

    LC Task in .NET Core Projects

WebSocketHandler Middleware

  1. In the Solution Explorer, select your created project and choose Manage NuGet Packages... from the Project main menu.

    Browse for txtextcontrol.web and Install the latest version of the TXTextControl.Web package.

    Creating the application

Adding the Middleware

  1. Open the Startup.cs file located in the project's root folder. In the Configure method, add the following code before the app.UseSpa entry:

    // enable Web Sockets
    app.UseWebSockets();
    // attach the Text Control WebSocketHandler middleware
    app.UseMiddleware<TXTextControl.Web.WebSocketMiddleware>();
    view raw Customer.cs hosted with ❤ by GitHub

Adding TX Text Control Angular

  1. Select Command Line -> Developer Command Prompt from the Tools main menu. A command line is opened in the application's root folder. Switch to the ClientApp folder by typing the following command:

    cd dotnetcoreangular\ClientApp

  2. Install the TX Text Control document editor package by typing in the following command:

    ng add @txtextcontrol/tx-ng-document-editor

  3. Close the command line prompt after the packages are installed.

  4. In Visual Studio, find the file ClientApp -> src -> app -> home -> home.component.html and replace the complete content with the following:

    <tx-document-editor width="1000px"
    height="500px"
    webSocketURL="ws://localhost:32760/">
    </tx-document-editor>
    view raw test.html hosted with ❤ by GitHub

    Replace the port number (32760) with the port number of your application. To find that port number, start the application and check the browser location bar.

Start the application by pressing F5. If you see an error, make sure that you replaced the port number in step 13.

Implementing a Web API

Using the above tutorial, you created an ASP.NET Core Web Application that provides the WebSocketHandler middleware connected to the Angular document editor. The following sample, that can be downloaded from GitHub, implements a backend Web API to merge templates created in the editor with data.

The ASP.NET Core Web Application implements two simple endpoints to merge templates with dummy data and an endpoint to return dummy excerpt data:

[ApiController]
[Route("[controller]")]
public class TextControlController : ControllerBase
{
[HttpPost]
[Route("MergeDocument")]
public MergedDocument MergeDocument([FromBody] MergedDocument Document)
{
byte[] data;
// create dummy merge data
Customer customer = new Customer() { Firstname = "Klaus", Name = "Klaasen" };
// new ServerTextControl instance
using (TXTextControl.ServerTextControl tx = new TXTextControl.ServerTextControl())
{
tx.Create();
// load the document from the payload
tx.Load(Convert.FromBase64String(Document.Document),
TXTextControl.BinaryStreamType.InternalUnicodeFormat);
TXTextControl.DocumentServer.MailMerge mm =
new TXTextControl.DocumentServer.MailMerge();
mm.TextComponent = tx;
mm.MergeObject(customer); // merge the data into template
// save document into byte array
tx.Save(out data, TXTextControl.BinaryStreamType.InternalUnicodeFormat);
// return the document to the client
return new MergedDocument() { Document = Convert.ToBase64String(data) };
}
}
[HttpGet]
[Route("LoadData")]
public Customer[] LoadData()
{
// return dummy excerpt data
return new Customer[] { new Customer() { Firstname = "Klaus", Name = "Klaasen" } };
}
}
view raw Customer.cs hosted with ❤ by GitHub

Loading Data

In the constructor of the home component (home.component.ts), the LoadData endpoint is called to get dummy data:

constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
this._http = http;
this._baseUrl = baseUrl;
// get data source structure from Web API endpoint 'LoadData'
http.get<any>(baseUrl + 'textcontrol/loaddata').subscribe(result => {
// call JavaScript function from injected 'textcontrol.js'
loadData(result);
}, error => console.error(error));
}
view raw sample.ts hosted with ❤ by GitHub

The loadData function is defined in the injected JavaScript that uses the TXTextControl JavaScript API:

function loadData(JsonData) {
TXTextControl.addEventListener("textControlLoaded", function () {
TXTextControl.loadJsonData(JSON.stringify(JsonData));
});
}
view raw load.js hosted with ❤ by GitHub

On starting the application, the Insert Merge Field drop-down is filled with the data loaded from the endpoint:

Creating the application

Merging Data

The view contains a button that calls the onClickMergeDocument event:

<tx-document-editor width="1000px"
height="500px"
webSocketURL="ws://localhost:32760/">
</tx-document-editor>
<input (click)="onClickMergeDocument()" type="button" value="Merge Document" />
view raw test.html hosted with ❤ by GitHub

In the TypeScript function onClickMergeDocument, the document is saved, posted to the endpoint MergeDocument and the result is loaded back into TX Text Control.

async onClickMergeDocument() {
// get the saved document from TXTextControl
let postDocument: MergedDocument = {
document: await saveDocument(),
};
// post the document to endpoint 'MergeDocument'
this._http.post<MergedDocument>(this._baseUrl +
'textcontrol/mergedocument', postDocument).subscribe(result => {
// load the results into TXTextControl
loadDocument(result.document);
}, error => console.error(error));
}
view raw sample.ts hosted with ❤ by GitHub

The 2 JavaScript functions saveDocument and loadDocument are defined in the injected JavaScript:

function loadDocument(document) {
TXTextControl.loadDocument(TXTextControl.streamType.InternalUnicodeFormat, document);
}
function saveDocument() {
return new Promise(resolve => {
TXTextControl.saveDocument(TXTextControl.streamType.InternalUnicodeFormat, function (e) {
resolve(e.data);
});
});
}
view raw test.js hosted with ❤ by GitHub

Creating the application

Download the sample and try this on your own.