# ASP.NET Web Forms Document Editor

> Add the Web.TextControl server control to an ASP.NET Web Forms page: cc1 tag, TXWebSocketHandler.ashx, TXPrintHandler.ashx, handler path and service address.

- **Product:** TX Text Control .NET Server
- **Section:** Documentation
- **Kind:** Topic
- **Path:** TX Text Control .NET Server > Integration Guide > ASP.NET on .NET Framework > ASP.NET Web Forms Document Editor
- **3269 words**
- **Web URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/integration/dotnet-framework/web-forms-editor/
- **LLMs URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/integration/dotnet-framework/web-forms-editor/llms.txt
- **LLMs-Full URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/integration/dotnet-framework/web-forms-editor/llms-full.txt

---

In ASP.NET Web Forms, the Document Editor is a server control: the class [Web.TextControl](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web/textcontrol/llms-full.txt) in *TXTextControl.Web.dll*, which you place on an *.aspx* page with a tag. It was the first browser-based editor of TX Text Control, introduced in version 21.0, and it still ships with the Windows setup of version 34.0. Follow the steps below to add it to a Web Forms application in Visual Studio 2022 with .NET Framework 4.8, register its handlers and connect it to the TX TextControl Service.

**Legacy technology.** Web Forms runs on the .NET Framework only, and with it TX Text Control runs on Windows only and uses the Classic engine. New applications use the Document Editor in [ASP.NET Core](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/aspnet-core/llms-full.txt).

### Prerequisites

- Visual Studio 2022 and .NET Framework 4.8.
- The Windows setup of TX Text Control .NET Server 34.0, trial or full version, on the development machine. It installs *TXTextControl.Web.dll* to the *Assembly* folder of `C:\Program Files\Text Control GmbH\TX Text Control 34.0.NET Server for ASP.NET\` and the TX TextControl Service.
- IIS Express 8.0 or higher with the WebSocket protocol installed, as the requirements of the Document Editor on the .NET Framework state.

The setup installs this tutorial as a sample project in two languages:

- C#: `%USERPROFILE%\Documents\TX Text Control 34.0.NET Server for ASP.NET\CSharp\Web Forms\editor\`
- Visual Basic: `%USERPROFILE%\Documents\TX Text Control 34.0.NET Server for ASP.NET\VB.NET\Web Forms\editor\`

### How the Control Works

```text
Browser: Document Editor
    |
    |-- WebSocket ---> TXWebSocketHandler.ashx in your web application
                           |
                           |-- TCP ---> TX TextControl Service (Windows service)
```

- **The control** `Web.TextControl` derives from `System.Web.UI.WebControls.WebControl`. It renders the editor into the page and has server-side properties and methods, such as [LoadText](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web/textcontrol/loadtext-method/llms-full.txt) and [SaveText](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web/textcontrol/savetext-method/llms-full.txt).
- **Two HTTP handlers** in *Web.config* serve the editor: `TXTextControl.Web.WebSocketHandler` at the path *TXWebSocketHandler.ashx*, which accepts the WebSocket connection of the editor, and `TXTextControl.Web.TXPrintHandler` at *TXPrintHandler.ashx*.
- **The TX TextControl Service** synchronizes the documents and calculates their layout. The WebSocket handler connects to it, by default on the local computer.

### Create the Project

1. In Visual Studio 2022, choose **Create a new project**.
2. Select **ASP.NET Web Application (.NET Framework)** as the project template and confirm with **Next**.
3. Enter a project name, select **.NET Framework 4.8** as the **Framework** and confirm with **Create**.
4. In the next dialog, choose **Web Forms** as the project template and confirm with **Create**.

    ![The Create a new ASP.NET Web Application dialog of Visual Studio with the Web Forms template selected.](https://docs.textcontrol.com/assets/img/tx-text-control-dotnet-server/aspnet-template-web-forms.c7ea4092.webp)

### Add the Assembly Reference

The Web Forms control is not in a NuGet package. You reference it from the installation folder:

1. With the project selected in **Solution Explorer**, choose **Project > Add Project Reference...** to open the **Reference Manager**.
2. Click **Browse...**, open the *Assembly* folder of the installation and select *TXTextControl.Web.dll*.
3. Click **Add** and close the **Reference Manager** with **OK**.

The control needs no other TX Text Control assembly in the project and no *licenses.licx* file. The engine runs in the TX TextControl Service.

### Add the Control to the Page

Open *Default.aspx* in the root folder of the project. Keep its first line, the `Page` directive, and replace everything below it with the following markup:

```html
<%@ Register Assembly="TXTextControl.Web" Namespace="TXTextControl.Web" TagPrefix="cc1" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <cc1:TextControl ID="TextControl1" runat="server" />

    <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>

</asp:Content>
```

The markup works as follows:

- The `Register` directive makes the controls of the namespace `TXTextControl.Web` in the assembly `TXTextControl.Web` available on the page under the tag prefix `cc1`.
- `<cc1:TextControl ID="TextControl1" runat="server" />` creates the editor. The code-behind file of the page reaches it as `TextControl1`.
- `asp:Content` fills the `MainContent` placeholder of the master page of the Web Forms template.
- The button calls the JavaScript API of the editor in the browser, the global [`TXTextControl`](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/llms-full.txt) object, with the same code as the ASP.NET Core tutorial. [`tables.add`](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/tablecollection/add-method/llms-full.txt) inserts a table with 5 rows, 5 columns and the ID 10, and the callback writes "Cell text" into every cell.

### Register the Handlers in Web.config

Open *Web.config* in the root folder of the project and add the following element directly after the opening `configuration` element:

```xml
<system.webServer>
  <handlers>
    <add name="TXWebSocketHandler" verb="*" path="TXWebSocketHandler.ashx" type="TXTextControl.Web.WebSocketHandler, TXTextControl.Web, Version=34.0.1400.500, Culture=neutral, PublicKeyToken=6B83FE9A75CFB638" />
    <add name="TXPrintHandler" verb="*" path="TXPrintHandler.ashx" type="TXTextControl.Web.TXPrintHandler, TXTextControl.Web, Version=34.0.1400.500, Culture=neutral, PublicKeyToken=6B83FE9A75CFB638" />
  </handlers>
</system.webServer>
```

Each `type` attribute names the handler class and the assembly with its full version, 34.0.1400.500 for version 34.0. After an upgrade to another version of TX Text Control, change the version in both entries.

### Run the Application

Press **F5** to build and start the application. The home page shows the Document Editor with its ribbon bar in the content area of the template. Click **Insert Table** to insert a table with "Cell text" in every cell.

The editor needs the running TX TextControl Service and the WebSocket protocol of IIS Express. When it doesn't load, check both first.

### Load a Document in the Code-Behind

The server-side methods of the control are called from the code-behind file. To show a document when the page opens, load it in `Page_Load` of *Default.aspx.cs*:

```csharp
using System;
using System.Web.UI;

namespace WebFormsEditor
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                // Load an HTML string as the initial document
                TextControl1.LoadText(
                    "<html><body><p>Welcome to <strong>Text Control</strong></p></body></html>",
                    TXTextControl.Web.StringStreamType.HTMLFormat);
            }
        }
    }
}
```

- Keep the namespace and class name that Visual Studio generated for your project.
- [LoadText](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web/textcontrol/loadtext-method/llms-full.txt) replaces the content of the editor. Its overloads load a file with a [Web.StreamType](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web/streamtype/enumeration/llms-full.txt), a byte array with a `Web.BinaryStreamType` or a string with a [Web.StringStreamType](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web/stringstreamtype/enumeration/llms-full.txt). [LoadTextAsync](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web/textcontrol/loadtextasync-method/llms-full.txt) returns without waiting until the text is loaded.
- [UserNames](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web/textcontrol/usernames-property/llms-full.txt) and [Dock](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web/textcontrol/dock-property/llms-full.txt) are set on the control the same way, in the code-behind or as attributes of the tag.

### Set the Path of the WebSocket Handler

The browser builds the URL of *TXWebSocketHandler.ashx* from the URL of the current page. In most applications, this URL is correct. When the page is in a virtual directory and the generated URL is wrong, the editor can't connect to the web server. Set [WebSocketHandlerPath](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web/textcontrol/websockethandlerpath-property/llms-full.txt) to correct it:

```html
<cc1:TextControl ID="TextControl1" runat="server" WebSocketHandlerPath="/editor/" />
```

- The value is the part of the path between the root of the web site and the handler. For a handler at `ws://www.website.com/editor/TXWebSocketHandler.ashx`, it is `/editor/`.
- Absolute directories such as `/editor/` and relative directories such as `../../` are possible.
- The default value is `null`. With `null` or an empty string, the browser derives the URL from the page.

### Connect to a Service on Another Server

Since version 23.0, the TX TextControl Service can run on an application server of its own, or on several of them behind a load balancer, instead of on the web server. Set [ServiceAddress](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web/textcontrol/serviceaddress-property/llms-full.txt) to the IP address of that server, in the **Properties** window of Visual Studio or in the code-behind:

```csharp
// Before the editor connects, for example in Page_Load
TextControl1.ServiceAddress = System.Net.IPAddress.Parse("10.0.0.20");
```

- The default value of `ServiceAddress` is 127.0.0.1, the local computer.
- [ServicePort](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol-web/textcontrol/serviceport-property/llms-full.txt) sets the port the WebSocket handler connects to on that server.
- Both properties affect all instances of `Web.TextControl` in the application. They are instance properties only so that the Visual Studio designer shows them.

### Deploy the Application

A Web Forms application with the editor is deployed in two parts: the web application, with **Copy Local** set to `true` on the `TXTextControl.Web` reference so that the assembly is published with it, and the TX TextControl Service on the server. [.NET Framework Applications](https://docs.textcontrol.com/tx-text-control-dotnet-server/deployment/windows/dotnet-framework/llms-full.txt) in the Deployment Guide describes both.

### Next Steps

- [ASP.NET MVC Document Editor](https://docs.textcontrol.com/tx-text-control-dotnet-server/integration/dotnet-framework/mvc-editor/llms-full.txt): the editor in an MVC 5 application.
- [Web Forms Document Viewer (Legacy)](https://docs.textcontrol.com/tx-text-control-dotnet-server/integration/dotnet-framework/web-forms-viewer/llms-full.txt): the viewer control of Web Forms.
- [JavaScript API](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/javascript-api/llms-full.txt): program the editor in the browser.
- [.NET Framework Applications](https://docs.textcontrol.com/tx-text-control-dotnet-server/deployment/windows/dotnet-framework/llms-full.txt): deploy the application and the service.

---

## Nearby

- **Previous:** [ASP.NET MVC Mail Merge](https://docs.textcontrol.com/tx-text-control-dotnet-server/integration/dotnet-framework/mvc-mail-merge/llms-full.txt)
- **Next:** [Web Forms Document Viewer (Legacy)](https://docs.textcontrol.com/tx-text-control-dotnet-server/integration/dotnet-framework/web-forms-viewer/llms-full.txt)
