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 Documents

Loading from a Server Folder

Now, you can load a document from the Documents folder into the editor using the LoadText ╰ TX Text Control .NET Server for ASP.NET
╰ Web.MVC Namespace
╰ TextControl Class
╰ LoadText Method
Loads text in a certain format. method.

@using TXTextControl.Web.MVC
@Html.TXTextControl().TextControl().LoadText(
"Documents/demo.tx",
TXTextControl.Web.StreamType.InternalUnicodeFormat).Render()
view raw test.cs hosted with ❤ by GitHub

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();
}
view raw test.cs hosted with ❤ by GitHub

The view then loads the document from the ViewBag into the editor using the LoadText ╰ TX Text Control .NET Server for ASP.NET
╰ Web.MVC Namespace
╰ TextControl Class
╰ LoadText Method
Loads text in a certain format. method.

@using TXTextControl.Web.MVC
@Html.TXTextControl().TextControl().LoadText(
ViewBag.Document,
TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat).Render()
view raw test.cs hosted with ❤ by GitHub

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));
}
view raw test.cs hosted with ❤ by GitHub

The following code snippet shows how to load a document from the Web API into the editor using the LoadDocument ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ TXTextControl Object
╰ loadDocument Method
Loads text in a certain format. 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>
view raw test.cshtml hosted with ❤ by GitHub

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>
view raw test.cshtml hosted with ❤ by GitHub

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
};
}
view raw test.cs hosted with ❤ by GitHub

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.