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 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()

   See this live

2. Loading documents from data

   In order to load a document from data, the DocumentData 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 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()

   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>

   Controller

   [HttpGet]
   public string LoadDocument(string filename)
   {
       string sDocument = Convert.ToBase64String(
           System.IO.File.ReadAllBytes(
               Server.MapPath("~/App_Data/Documents/" + filename)));           
   
       return sDocument;
   }

   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");
   }

   See this live