ASP.NET MVC Document Viewer

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

The ASP.NET MVC DocumentViewer is a lightweight, cross-browser compatible, mobile-friendly viewer for ASP.NET MVC. In comparison, our HTML5-based document editor is used to create and modify documents using an MS Word compatible interface and user experience. For pure viewing tasks, the editor is probably too powerful and the requirements for a viewer interface is totally different.

This tutorial shows how to integrate Web.DocumentViewer into an MVC application with Razor.

Create Your Application

  1. Open Visual Studio and create a new ASP.NET Web Application. Make sure to select .NET Framework 4.5 as the .NET Framework project version.

    image

  2. In the next dialog New ASP.NET Project, select Empty as your project template. Check the checkbox MVC to add the folders and core references. Close the dialog with OK.

    image

  3. Click Manage NuGet Packages... from the Project main menu. Select nuget.org from the Online package source panel. In the upper right corner, search for TXTextControl.Web.DocumentViewer. Find the latest version and click on Install.

    image

    Make sure to update the Microsoft ASP.NET MVC packages, if they are available in the Updates panel. Close the dialog with Close.

  4. Click Add Reference... from the Project main menu. In the opened Reference Manager, click on Browse... and find the TX Text Control Assembly folder that is located in the installation directory of TX Text Control .NET Server for ASP.NET:

    C:\Program Files\Text Control GmbH\TX Text Control 28.0.NET Server for ASP.NET\Assembly\

    Select the 3 files TXDocumentServer.dll, TXTextControl.dll and TXTextControl.Server.dll and confirm with Add.

    image

  5. In the Solution Explorer, select the project and choose Add New Item... from the Project main menu. Select General -> Text File as the template, name it licenses.licx and confirm with Add.

    image

    Paste the following string into the newly created file:

    TXTextControl.ServerTextControl, TXTextControl.Server, Culture=neutral, PublicKeyToken=6b83fe9a75cfb638

  6. In the Solution Explorer, select App_Data and click Add Existing Item... from the Project main menu.

    Browse to the following TX Text Control installation folder:

    C:\Program Files\Text Control GmbH\TX Text Control 28.0.NET Server for ASP.NET\Samples\Demo\

    Select the file demo.rtf and confirm with Add.

    image

  7. In the Solution Explorer, right-click the Controllers folder and choose Add -> Controller... from the context menu. In the opened dialog Add Scaffold, select MVC 5 Controller - Empty and confirm with Add. Set the name to HomeController and insert it by clicking the Add button.

    image

  8. In the Solution Explorer, right-click the newly created folder Home and choose Add -> View from the context menu. Name the view Index and confirm with Add.

    image

  9. Open the Index.cshtml view from the Views -> Home folder. Add the following Razor code to the top of the view:

    @using TXTextControl.Web.MVC.DocumentViewer
  10. Add the following HtmlHelper code to the end of the view page:

    @Html.TXTextControl().DocumentViewer(settings =>
    {
        settings.DocumentPath = Server.MapPath("~/App_Data/Demo.rtf");
        settings.Dock = DocumentViewerSettings.DockStyle.Window;
        settings.IsSelectionActivated = true;
        settings.ShowThumbnailPane = true;
    }).Render()

    The complete Index.cshtml should now look like this:

    @using TXTextControl.Web.MVC.DocumentViewer
    
    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    @Html.TXTextControl().DocumentViewer(settings =>
    {
        settings.DocumentPath = Server.MapPath("~/App_Data/Demo.rtf");
        settings.Dock = DocumentViewerSettings.DockStyle.Window;
        settings.IsSelectionActivated = true;
        settings.ShowThumbnailPane = true;
    }).Render()
  11. Compile and start the application.

Loading Documents

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.

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 TXTextControl.Web.MVC.DocumentViewer.DocumentViewerSettings.DocumentPath Property 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()

Loading documents from data

In order to load a document from data, the TXTextControl.Web.MVC.DocumentViewer.DocumentViewerSettings.DocumentData Property property must retrieve a Base64 encoded string in the internal TX Text Control format.

If a document is loaded from data, the TXTextControl.Web.MVC.DocumentViewer.DocumentViewerSettings.DocumentPath Property 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()

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 TXTextControl.DocumentServer.MailMerge Class 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;
}

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