Getting Started: Document Editor with ASP.NET MVC (.NET Framework)

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

The source code for this example is contained in the following directories:

%USERPROFILE%\Documents\TX Text Control 32.0.NET Server for ASP.NET\CSharp\MVC\editor\

Creating the Application

Make sure that you downloaded the latest version of Visual Studio 2022.

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

2. Select ASP.NET Web Application (.NET Framework) as the project template and confirm with Next.

3. Choose a name for your project, select .NET Framework 4.8 as the Framework and confirm with Create.

4. In the next dialog, choose MVC as the project template, check Web API from the Add folders & core references selection and confirm with Create.

Adding the NuGet Package

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

Select either Text Control Offline Packages or nuget.org as the Package source. Packages in the official Text Control NuGet profile are frequently updated.

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

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:

C#

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

Compile and start the application.