Products Technologies Demo Docs Blog Support Company

MVC: Loading and Saving Documents Through Controller HttpPost Methods

With the release of TX Text Control X13, we released an MVC version of TXTextControl.Web that is available through NuGet. This sample project shows how to load and save documents using controller methods and Javascript. The view contains the TXTextControl.Web HtmlHelper and two buttons to save and to load the document. The Javascript function SaveToController uses the method saveDocument to save the document client-side in the internal Unicode format. Then, the jQuery AJAX method calls the…

MVC: Loading and Saving Documents Through Controller HttpPost Methods

With the release of TX Text Control X13, we released an MVC version of TXTextControl.Web that is available through NuGet.

This sample project shows how to load and save documents using controller methods and Javascript. The view contains the TXTextControl.Web HtmlHelper and two buttons to save and to load the document.

@using TXTextControl.Web
@using TXTextControl.Web.MVC

@{
    ViewBag.Title = "Index";
}

@* Add TXTextControl.Web to the view *@
@Html.TXTextControl().TextControl().Render()

<input onclick="SaveToController('test.docx')" id="btnSave" type="button" value="Save" />
<input onclick="LoadFromController('test.docx')" id="btnLoad" type="button" value="Load" />

The Javascript function SaveToController uses the method saveDocument to save the document client-side in the internal Unicode format. Then, the jQuery AJAX method calls the controller method SaveTemplate by sending a JSON string that contains the document name and the saved document.

function SaveToController(DocumentName) {
    TXTextControl.saveDocument(TXTextControl.streamType.InternalUnicodeFormat,
        function (e) {

        var serviceURL = "/Home/SaveTemplate";

            $.ajax({
                type: "POST",
                url: serviceURL,
                contentType: 'application/json',
                data: JSON.stringify({
                    DocumentName: DocumentName,
                    BinaryDocument: e.data
                }),
                success: successFunc,
                error: errorFunc
            });

            function successFunc(data, status) {
                alert("Document has been saved successfully.");
            }

            function errorFunc() {
                alert('Error');
            }
    });
}

The controller HttpPost method accepts the JSON string in form of a model in the parameter. The document is converted to a byte[] array and loaded into a temporary ServerTextControl instance. Finally, the document is saved server-side using the Save method of the ServerTextControl object.

[HttpPost]
public bool SaveTemplate(DocumentViewModel model)
{
    string name = model.DocumentName;
    byte[] document = Convert.FromBase64String(model.BinaryDocument);

    using (TXTextControl.ServerTextControl tx =
        new TXTextControl.ServerTextControl())
    {
        tx.Create();
        tx.Load(document, TXTextControl.BinaryStreamType.InternalUnicodeFormat);

        tx.Save(Server.MapPath("/App_Data/documents/" + model.DocumentName),
            TXTextControl.StreamType.WordprocessingML);
    }

    return true;
}

The model DocumentViewModel is shown in the code below:

public class DocumentViewModel
{
    public string DocumentName { get; set; }
    public string BinaryDocument { get; set; }
}

Download the sample from GitHub and test it on your own.

Stay in the loop!

Subscribe to the newsletter to receive the latest updates.

GitHub

Download and Fork This Sample on GitHub

We proudly host our sample code on github.com/TextControl.

Please fork and contribute.

Download ZIP

Open on GitHub

Open in Visual Studio

Requirements for this sample

  • Visual Studio 2012 or better
  • TX Text Control .NET Server (trial sufficient)

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

MVC: Loading Files from the Backstage Menu

Happy New Year, everybody! In the last blog entry, we showed how to replace the file menu with an MS Word-style backstage menu. This project shows how to load documents from a partial view in the…


ASP.NETGitHubHTML5

MVC: Replace the File Menu with a Backstage View Menu

Microsoft Word provides a very smart way to manage documents and related data such as metadata and personal information in a separate view: The backstage view. The ribbon bar contains commands for…


ASP.NETGitHubHTML5

MVC: Replace the Ribbon Table Menu with a Quick Insert Table Drop-down

MS Word provides a quick insert table drop-down to insert tables into the document. This sample shows how to replace the insert table button with such a table insert drop-down. The replacement and…


ASP.NETGitHubHTML5

MVC: Arrange a Docked Web.TextControl with a Custom Bar at the Top

Consider the following task: The Web.TextControl should be arranged under a custom bar that is located at the top of the page like in the following screenshot: Objects such as DIV elements doesn't…


ASP.NETGitHubHTML5

MVC: Autosave and Restore Documents to and from the Local Browser Storage

Modern HTML5-based web browsers support persistent data storage with an enhanced capacity up to 50MB local storage. It is possible to store data persistently or session based. This sample shows…