Products Technologies Demo Docs Blog Support Company

This blog post contains outdated information.

The cited code snippets may be workarounds, and be part of the official API in the meantime.

Getting Started: Document Editor with ASP.NET Core and .NET 6

This article shows how to use the TX Text Control ASP.NET document editor within a .NET 6 application in Visual Studio 2022.

Getting Started: Document Editor with ASP.NET Core and .NET 6

Prerequisites

There are two ways to evaluate the TX Text Control Document Editor. You can either host your own backend by downloading the trial version of TX Text Control .NET Server or by creating a trial access token to use a hosted backend valid for 30 days:

Creating the Application

Make sure that you downloaded the latest version of Visual Studio 2022 that comes with the .NET 6 SDK.

  1. In Visual Studio 2022, create a new project by choosing Create a new project.

  2. Select ASP.NET Core Web App (Model-View-Controller) 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 6 (Long-term support) as the Framework and confirm with Create.

    Creating the .NET 6 project

Adding the NuGet Package

  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.

    ASP.NET Core Web Application

Configure the Application

Trial Access Token Users

In case you are using a Trial Access Token, skip step 6 and continue with step 7.

  1. Open the Program.cs file located in the project's root folder. Add the following code after the entry app.UseStaticFiles();:

    // serve static linked files (JavaScript and CSS for the editor)
    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new Microsoft.Extensions.FileProviders.PhysicalFileProvider(
           System.IO.Path.Combine(System.IO.Path.GetDirectoryName(
               System.Reflection.Assembly.GetEntryAssembly().Location),
               "TXTextControl.Web")),
        RequestPath = "/TXTextControl.Web"
    });
    
    // enable Web Sockets
    app.UseWebSockets();
    
    // attach the Text Control WebSocketHandler middleware
    app.UseMiddleware<TXTextControl.Web.WebSocketMiddleware>();

Adding the Control to the View

  1. Find the Index.cshtml file in the Views -> Home folder. Replace the complete content with the following code to add the document editor to the view:

    @using TXTextControl.Web.MVC
        
    @{
        var sDocument = "<html><body><p>Welcome to <strong>Text Control</strong></p></body></html>";
    }
    
    @Html.TXTextControl().TextControl(settings => {
        settings.UserNames = new string[] { "Tim Typer" };
    }).LoadText(sDocument, TXTextControl.Web.StringStreamType.HTMLFormat).Render()
    
    <input type="button" onclick="insertTable()" value="Insert Table" />
    
    <script>
        function insertTable() {
            TXTextControl.tables.add(5, 5, 10, function(e) {
              if (e === true) { // if added
                TXTextControl.tables.getItem(function(table) {
                  table.cells.forEach(function(cell) {
    
                    cell.setText("Cell text");
    
                  });
                }, null, 10);
              }
            })
        }
    </script>

    Trial Access Token Users

    In case you are using a Trial Access Token, replace the content with the following code.

    @using TXTextControl.Web.MVC
            
    @Html.TXTextControl().TextControl(settings => {
            settings.WebSocketURL = "wss://backend.textcontrol.com?access-token=addYourTokenHere"
    }).Render()

    Replace addYourTokenHere with your actual Trial Access Token.

Compile and start the application.

Stay in the loop!

Subscribe to the newsletter to receive the latest updates.

ASP.NET

Integrate document processing into your applications to create documents such as PDFs and MS Word documents, including client-side document editing, viewing, and electronic signatures.

ASP.NET Core
Angular
Blazor
JavaScript
React
  • Angular
  • Blazor
  • React
  • JavaScript
  • ASP.NET MVC, ASP.NET Core, and WebForms

Learn more Trial token Download trial

Related Posts

ASP.NETASP.NET CoreMailMerge

Getting Started: ServerTextControl and MailMerge with ASP.NET Core

This article shows how to use the TX Text Control ASP.NET ServerTextControl and MailMerge classes within a .NET 6 application in Visual Studio 2022.


ASP.NETASP.NET CoreDocument Viewer

Getting Started: Document Viewer with ASP.NET Core

This article shows how to use the TX Text Control ASP.NET document viewer within a .NET 6 application in Visual Studio 2022.


ASP.NETASP.NET Core.NET 6

Getting Started: Document Viewer with ASP.NET Core and .NET 6

This article shows how to use the TX Text Control ASP.NET document viewer within a .NET 6 application in Visual Studio 2022.


ASP.NETASP.NET Core.NET 6

Using TX Text Control .NET Server with .NET 6

This article shows how to use the TX Text Control ASP.NET document editor and the ServerTextControl class within a .NET 6 application in Visual Studio 2022.


ASP.NETASP.NET CoreBlockchain

Storing Documents on the Blockchain

Storing documents or document hashes on a blockchain provides functionality such as validation and tamper resistance. This article shows how to store document hashes on a blockchain and how to…