The File menu in TX Text Control Document Editor is a legacy document management interface, available only in ASP.NET Framework and WebForms. Due to fundamental differences in architecture, ASP.NET Core's cross-platform, modular design conflicts with the Windows-only component model of the ASP.NET Framework. This makes the legacy File menu unavailable in ASP.NET Core projects. Developers working with ASP.NET Core 8.0 and later need a modern alternative. This article shows how to build a custom backstage view with a File tab to load your multi-format documents using TX Text Control for ASP.NET Core applications.

Inspired by the Backstage view users know from MS Word, this custom solution is built using vanilla JavaScript, CSS, HTML templates, and TX Text Control with ASP.NET Core. This approach provides users with a clean, distraction-free environment to browse and open multiple document formats (.docx, .rtf, .tx, .pdf, and more) without leaving the application context. The result is a professional, intuitive interface that maintains full control over document loading.

The article walks through the key implementation steps for building this custom backstage view: CSS overlay structure, JavaScript event handling, and server-side multi-format document loading with TX Text Control.

Prerequisites

You need to download and install the trial version of TX Text Control .NET Server for ASP.NET Core to host the backend:

• Download Trial Version - Setup download and installation required
• ASP.NET Core MVC Application (version 8.0 or higher)

Getting Started

This article shows how to create a backend for the Document Editor and Viewer using ASP.NET Core. The backend can be hosted on Windows and Linux and can be used in Blazor, Angular, JavaScript, and ASP.NET Core applications.

Building an ASP.NET Core Backend (Linux and Windows) for the Document Editor and Viewer

Learn More

This video tutorial shows how to use the Document Editor in an ASP.NET Core application using C#. This tutorial is part of the TX Text Control Getting Started series originally published on our YouTube channel.

Getting Started Video Tutorial: How to use the Document Editor in ASP.NET Core C#

Designing the Backstage Overlay

The backstage interface uses pure CSS with Flexbox for layout. The overlay is positioned within the TX Text Control container, sliding in from the left to cover the editor when the File tab is clicked. The layout uses a two-column structure: a fixed-width sidebar for navigation and a flexible content area for displaying documents. CSS custom properties define consistent spacing, colors, and shadows throughout the backstage interface.

Building the Backstage View

The backstage implementation is organized into three modular JavaScript files: index.js (application entry point), fileTab.js (custom File tab creation), and backstageMenu.js (core backstage functionality and server communication).

Initializing the Backstage

Wait for TX Text Control to fully initialize before injecting custom components:

document.addEventListener('DOMContentLoaded', function () {
    TXTextControl.addEventListener("ribbonTabsLoaded", function () {
        initBackstageMenu();
        initFileTab();
    });
});

Cloning HTML Templates

Both the File tab and backstage menu use HTML template cloning. Here's how the File tab is created:

// Initialize and inject the custom File tab into TX Text Control's ribbon
export function initFileTab() {
    const ribbonBar = document.getElementById('ribbonbar');
    const tabsContainer = ribbonBar.querySelector('.tabs, [class*="tabs"]');
    // Clone the File tab template
    const template = document.getElementById('file-tab-template');
    const fileTab = template.content.cloneNode(true);

    // Attach click handler to open backstage
    const fileTabLink = fileTab.querySelector('#tabFile');
    fileTabLink.addEventListener('click', function (e) {
        e.preventDefault();
        openBackstage();
    });

    // Insert File tab at the beginning of the ribbon
    tabsContainer.insertBefore(fileTab, tabsContainer.firstChild);
}

The template cloning approach separates structure from behavior. HTML defines the layout while JavaScript manages interactions and events.

Fetching Data from the Server

Two functions handle server communication for fetching the document list and loading the selected document into TX Text Control:

// Fetch and display the document list from the server
function loadDocuments() {
    fetch("/Home/GetDocuments", { method: "GET" })
        .then(response => response.text())
        .then(html => {
            const stageElement = document.getElementById('stage');
            if (stageElement) {
                stageElement.innerHTML = html;
            }
        })
        .catch(error => {
            console.error("Error loading view:", error);
        });
}

// Load selected document into TX Text Control
export function LoadFromController(fileName, loadButton) {
    // Show loading state
    const originalText = loadButton.textContent;
    loadButton.textContent = "Loading...";
    loadButton.disabled = true;

    fetch("/Home/LoadTemplate", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ FileName: fileName })
    })
        .then(res => res.json())
        .then(data => {
            if (data?.data) {
                // Load document in TX Text Control's native format
                TXTextControl.loadDocument(
                    TXTextControl.streamType.InternalUnicodeFormat,
                    data.data
                );
                closeBackstage();
            }
        })
        .catch(err => {
            alert(err.message);
            // Restore button state on error
            loadButton.textContent = originalText;
            loadButton.disabled = false;
        });
}

Note: All documents are converted to InternalUnicodeFormat (TX Text Control's native format) before sending them to the client. This ensures optimal performance regardless of the original file format (.docx, .rtf, .tx, .pdf, and more).

The full source code, including event handlers and event delegation for dynamically loaded buttons, is available in the Text Control GitHub repository.

Multi-Format Document Handling in ASP.NET Core

The backend controller handles document loading and format conversion using TX Text Control's ServerTextControl:

[HttpPost]
public ActionResult LoadTemplate([FromBody] DocumentRequest request)
{
    try
    {
        string filePath = Path.Combine(_environment.ContentRootPath, "App_Data", "documents", request.FileName);

        if (!System.IO.File.Exists(filePath))
        {
            return NotFound(new { error = "File not found" });
        }

        using (ServerTextControl tx = new ServerTextControl())
        {
            tx.Create();

            // Detect document format from file extension
            string extension = Path.GetExtension(filePath).ToLower();
            StreamType streamType = extension switch
            {
                ".docx" => StreamType.WordprocessingML,
                ".doc" => StreamType.MSWord,
                ".rtf" => StreamType.RichTextFormat,
                ".txt" => StreamType.PlainText,
                ".html" => StreamType.HTMLFormat,
                ".pdf" => StreamType.AdobePDF,
                ".tx" => StreamType.InternalUnicodeFormat,
                _ => StreamType.WordprocessingML // Default fallback
            };

            // Load and convert to InternalUnicodeFormat
            tx.Load(filePath, streamType);
            byte[] data;
            tx.Save(out data, BinaryStreamType.InternalUnicodeFormat);
            return Ok(new { data = Convert.ToBase64String(data) });
        }
    }
    catch (Exception ex)
    {
        return BadRequest(new { error = ex.Message });
    }
}

The controller detects the file format from the extension, converts the document, and sends it to the client. Adding support for new formats is straightforward - add another case to the switch statement.

Simply place your documents in the App_Data/documents folder. The controller automatically scans the folder and displays all available files in the backstage view.

Conclusion

The custom backstage view provides a modern alternative to the legacy file menu of TX Text Control and is fully compatible with ASP.NET Core 8.0+ applications. This solution delivers an intuitive document management interface that can handle multiple file formats without leaving the application.

The complete source code, including CSS, JavaScript, and HTML templates, is available in the Text Control GitHub repository. Download the project and adapt it to your requirements.