The MVC DocumentViewer is typically used to display documents and resulting reports in web applications. Documents can be loaded from files resides physically server-side, from data or from JavaScript.

This article describes these three different ways to load documents into the DocumentViewer.

  1. Loading documents from files

    Documents that resides physically on the server can be loaded directly from the HTML Helper view code. In order to load a document from a physical file, the DocumentPath ╰ TX Text Control .NET Server for ASP.NET
    ╰ Web.MVC.DocumentViewer Namespace
    ╰ DocumentViewerSettings Class
    ╰ DocumentPath Property
    Gets or sets the document path including the file name from where to load the document to view.     property must point to a supported file type on the server.

    @Html.TXTextControl().DocumentViewer(settings =>
    {
    settings.DocumentPath = Server.MapPath("~/App_Data/Documents/car_insurance.tx");
    settings.Dock = DocumentViewerSettings.DockStyle.Fill;
    settings.IsSelectionActivated = true;
    settings.ShowThumbnailPane = true;
    }).Render()
    view raw demoexplorer1.cshtml hosted with ❤ by GitHub

    See this live

  2. Loading documents from data

    In order to load a document from data, the DocumentData ╰ TX Text Control .NET Server for ASP.NET
    ╰ Web.MVC.DocumentViewer Namespace
    ╰ DocumentViewerSettings Class
    ╰ DocumentData Property
    Specifies document data to load a document from memory.     property must retrieve a Base64 encoded string in the internal TX Text Control format. If you want to load a document from another format such as DOCX, the document must be converted first using the ServerTextControl. Typically, the document is loaded in the Controller and passed to the View as a Model.

    If a document is loaded from data, the DocumentPath ╰ TX Text Control .NET Server for ASP.NET
    ╰ Web.MVC.DocumentViewer Namespace
    ╰ DocumentViewerSettings Class
    ╰ DocumentPath Property
    Gets or sets the document path including the file name from where to load the document to view.     property can contain a filename which is displayed in the status bar.

    @Html.TXTextControl().DocumentViewer(settings =>
    {
    settings.DocumentData = Convert.ToBase64String(
    File.ReadAllBytes(Server.MapPath("~/App_Data/Documents/car_insurance.tx")));
    settings.DocumentPath = "MyDocument.tx";
    settings.Dock = DocumentViewerSettings.DockStyle.Fill;
    settings.IsSelectionActivated = true;
    settings.ShowThumbnailPane = true;
    }).Render()
    view raw demoexplorer1.cshtml hosted with ❤ by GitHub

    See this live

  3. Loading documents from JavaScript

    Documents can be loaded from client-side JavaScript as well. This is typically used when documents are asynchronously created server-side using MailMerge and then loaded into the DocumentViewer.

    This code shows how to load a document using Ajax from an HttpGet method of the Controller in order to load the results into the viewer.

    View (HTML Helper)

    @Html.TXTextControl().DocumentViewer(settings =>
    {
    settings.Dock = DocumentViewerSettings.DockStyle.Fill;
    settings.IsSelectionActivated = true;
    settings.ShowThumbnailPane = true;
    }).Render()
    <button onclick="LoadDocument('car_insurance.tx')"
    class="btn mt-3 btn-success">Load Document</button>
    view raw demoexplorer1.cshtml hosted with ❤ by GitHub

    Controller

    [HttpGet]
    public string LoadDocument(string filename)
    {
    string sDocument = Convert.ToBase64String(
    System.IO.File.ReadAllBytes(
    Server.MapPath("~/App_Data/Documents/" + filename)));
    return sDocument;
    }
    view raw controller.cs hosted with ❤ by GitHub

    View (JavaScript)

    function LoadDocument(filename) {
    $('.alert').show();
    var bDocument;
    var serviceURL = "@Url.Action("LoadDocument", "TX")";
    // send document to controller
    $.ajax({
    type: "GET",
    url: serviceURL,
    data: {
    filename: filename
    },
    success: successFunc,
    error: errorFunc
    });
    }
    function successFunc(data, status) {
    TXDocumentViewer.loadDocument(data, "loaded.tx");
    TXDocumentViewer.toggleSidebar();
    $('.alert').hide();
    }
    function errorFunc() {
    alert("Error");
    }
    view raw load.js hosted with ❤ by GitHub

    See this live