After you have used the Document Editor to create your first ASP.NET (Core) Web application, you may want to load an actual document. The basic tutorial shows how to load an HTML string into the editor, and this tutorial shows several ways to load documents into the editor.

This tutorial is built on top of the basic tutorial, and an application that has been built according to the tutorial is required as a prerequisite.

Learn More

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

HTML Helper

The easiest way to load a document into the editor is to use the HTML helper that adds the editor to a view. Suppose you have created a folder called Documents in the root folder of your project and have copied the documents you want to load into it.

Loading from a Server Folder

Now, you can load a document from the Documents folder into the editor using the LoadText method.

@using TXTextControl.Web.MVC

@Html.TXTextControl().TextControl().LoadText(
    "Documents/demo.tx", 
    TXTextControl.Web.StreamType.InternalUnicodeFormat).Render()

Loading a Document from ViewBag

Another way to load a document into the editor is to pass the document as a byte array to the view using the ViewBag. The following code snippet shows how to load a document from the Documents folder into the editor using the ViewBag. The controller method loads the document from the files and stores it in the ViewBag.

public IActionResult Index()
{
   byte[] data = System.IO.File.ReadAllBytes("Documents/demo.tx");
   ViewBag.Document = data;

   return View();
}

The view then loads the document from the ViewBag into the editor using the LoadText method.

@using TXTextControl.Web.MVC

@Html.TXTextControl().TextControl().LoadText(
    ViewBag.Document, 
    TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat).Render()

Loading from JavaScript

Another way to load a document into the editor is to use JavaScript. The following HttpGet Web API method returns a document and can be called from JavaScript.

[HttpGet]
public IActionResult LoadDocument()
{
    // load the document from the file system
    byte[] data = System.IO.File.ReadAllBytes("Documents/demo.tx");
    // return the document as a base64 encoded string
    return Content(Convert.ToBase64String(data));
}

The following code snippet shows how to load a document from the Web API into the editor using theLoadDocument method.

@using TXTextControl.Web.MVC

@Html.TXTextControl().TextControl().Render()

<button onclick="loadDocument()">Load Document</button>

<script>

    function loadDocument() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "Home/LoadDocument", true);
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                TXTextControl.loadDocument(
                    TXTextControl.StreamType.InternalUnicodeFormat,
                    xmlhttp.responseText);
            }
        }
        
        xmlhttp.send();
    }   

</script>

Loading using WebSocketHandler

The WebSocketHandler acts as a proxy between the client-side JavaScript and the TCP synchronization service. However, the WebSocketHandler can be used directly on the server side to do document manipulation and to load documents.

In this example, a document is loaded directly from the server using the WebSocketHandler. The example consists of a button that calls the loadDocument function.

@using TXTextControl.Web.MVC

@Html.TXTextControl().TextControl().Render()

<input type="button" onclick="loadDocument()" value="Load Document" />

<script>

    var connectionID;

    TXTextControl.addEventListener("textControlLoaded", function () {
        connectionID = TXTextControl.connectionID;
    });

    function loadDocument() {
      $.ajax({
              url: '@Url.Action("LoadDocument")',
              type: 'POST',
              data: { connectionID: connectionID },
      });
    }
    
</script>

The method posts the connection ID to the LoadDocument endpoint. The GetInstance method of the WebSocketHandler returns the instance specified by the connection id. The LoadText method is then used to load the document directly into the instance.

[HttpPost]
public HttpResponseMessage LoadDocument(string ConnectionID)
{
  // connect the WebSocketHandler with the ConnectionID
  WebSocketHandler wsHandler = WebSocketHandler.GetInstance(ConnectionID);

  // the document directly server-side
  wsHandler.LoadText("Documents/demo.tx", StreamType.InternalUnicodeFormat);

  return new HttpResponseMessage()
  {
    StatusCode = HttpStatusCode.OK
  };
}

Conclusion

This tutorial showed several ways to load documents into the Document Editor. The easiest way is to use the HTML helper to load a document from a server folder. The ViewBag can be used to pass a document to the view, and JavaScript can be used to load a document from a Web API. The WebSocketHandler can be used to load a document directly on the server side.