# MVC: Replace the File Menu with a Backstage View Menu > Replace the Web.TextControl File menu with a full-page backstage view using JavaScript and CSS. The tutorial disables the default FILE ribbon handler, renders a vertical navigation panel with document options, and loads MVC partial views dynamically for each backstage menu section. - **Author:** Bjoern Meyer - **Published:** 2015-12-30 - **Modified:** 2026-07-17 - **Description:** Replace the Web.TextControl File menu with a full-page backstage view using JavaScript and CSS. The tutorial disables the default FILE ribbon handler, renders a vertical navigation panel with document options, and loads MVC partial views dynamically for each backstage menu section. - **2 min read** (308 words) - **Tags:** - ASP.NET - GitHub - HTML5 - MVC - **Web URL:** https://www.textcontrol.com/blog/2015/12/30/mvc-replace-the-file-menu-with-a-backstage-view-menu/ - **LLMs URL:** https://www.textcontrol.com/blog/2015/12/30/mvc-replace-the-file-menu-with-a-backstage-view-menu/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2015/12/30/mvc-replace-the-file-menu-with-a-backstage-view-menu/llms-full.txt - **GitHub Repository:** https://github.com/TextControl/TextControl.Web.MVC.BackstageView --- 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 working in a document and the backstage view provides options and commands to do to a document. From a UX (user experience) point of view, the backstage view is very interesting. The user can focus on a specific task such as saving the document. A usual dialog box doesn't hide the document and doesn't provide as much space that is available in the backstage view. In this project, a sample backstage view is implemented and opened when the user clicks on the ribbon *FILE* menu. ![MVC: Replace the file menu with a backstage view menu](https://s1-www.textcontrol.com/assets/dist/blog/2015/12/30/a/assets/tx_animation_backstageview.webp "MVC: Replace the file menu with a backstage view menu")The following Javascript disables the original file menu in order to attach the backstage view on clicking the *FILE* menu: ``` TXTextControl.addEventListener("ribbonTabsLoaded", function (e) { // remove the original file menu $("#fileMenu").remove(); // open the new menu when the FILE menu is clicked $("#tabFile").on("click", function () { animateBackstage(0); }); animateBackstage(1); }); ``` The backstage view itself consists of simple DIV elements and an unordered list for the vertical menu: ```
``` When a menu link is clicked, the function *switchBackstageView* is loading an MVC partial view dynamically: ``` function switchBackstageView(view) { $('#menu li a').each(function () { $(this).removeClass("active"); }); // add the title $("#title").html("

" + view + "

"); $("#" + view).addClass("active"); // load the partial view dynamically $("#stage").load("/home/getview", { viewName: view }); } ``` This blog entry will be part of a series that shows how to add several tasks to a backstage view such as loading, saving and printing documents. Stay tuned! Download the sample from GitHub and test it on your own. --- ## About Bjoern Meyer As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano. - [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/) - [X](https://x.com/txbjoern) - [GitHub](https://github.com/bjoerntx) --- ## Related Posts - [MVC: Loading Files from the Backstage Menu](https://www.textcontrol.com/blog/2016/01/06/mvc-loading-files-from-the-backstage-menu/llms.txt) - [MVC: Replace the Ribbon Table Menu with a Quick Insert Table Drop-down](https://www.textcontrol.com/blog/2015/12/23/mvc-replace-the-ribbon-table-menu-with-a-quick-insert-table-drop-down/llms.txt) - [MVC: Arrange a Docked Web.TextControl with a Custom Bar at the Top](https://www.textcontrol.com/blog/2015/12/18/mvc-arrange-a-docked-webtextcontrol-with-a-custom-bar-at-the-top/llms.txt) - [MVC: Autosave and Restore Documents to and from the Local Browser Storage](https://www.textcontrol.com/blog/2015/12/14/mvc-autosave-and-restore-documents-to-and-from-the-local-browser-storage/llms.txt) - [MVC: Loading and Saving Documents Through Controller HttpPost Methods](https://www.textcontrol.com/blog/2015/12/08/mvc-loading-and-saving-documents-through-controller-httppost-methods/llms.txt) - [HTML5: Saving Documents in an MVC Controller Method](https://www.textcontrol.com/blog/2015/10/01/html5-saving-documents-in-an-mvc-controller-method/llms.txt) - [Web.TextControl: JQueryUI Alert Boxes and Javascript Events](https://www.textcontrol.com/blog/2015/04/20/webtextcontrol-jqueryui-alert-boxes-and-javascript-events/llms.txt) - [Detect Toggle Button Changes Using a MutationObserver](https://www.textcontrol.com/blog/2021/11/11/detect-toggle-button-changes-using-a-mutationobserver/llms.txt) - [Implementing Conditional Table Cell Colors with MailMerge](https://www.textcontrol.com/blog/2020/10/08/implementing-conditional-table-cell-colors-with-mailmerge/llms.txt) - [Deploying the MVC HTML5 Editor to Azure App Services](https://www.textcontrol.com/blog/2018/04/06/deploying-the-mvc-html5-editor-to-azure-app-services/llms.txt) - [Updated MVC Sample: Loading Files from the Backstage Menu](https://www.textcontrol.com/blog/2017/04/20/updated-mvc-sample-loading-files-from-the-backstage-menu/llms.txt) - [ASP.NET MVC: Implementing a Simplistic, Custom Button Bar](https://www.textcontrol.com/blog/2017/03/13/aspnet-mvc-implementing-a-simplistic-custom-button-bar/llms.txt) - [ASP.NET MVC: Adding Protected Sections to Documents](https://www.textcontrol.com/blog/2017/03/01/aspnet-mvc-adding-protected-sections-to-documents/llms.txt) - [ASP.NET: Adding Electronic Signatures to Documents](https://www.textcontrol.com/blog/2016/10/12/aspnet-adding-electronic-signatures-to-documents/llms.txt) - [MVC: Loading a Document in the View Code from a MemoryStream](https://www.textcontrol.com/blog/2016/03/16/mvc-loading-a-document-in-the-view-code-from-a-memorystream/llms.txt) - [HTML5: Adding a Download Button to the Ribbon File Menu](https://www.textcontrol.com/blog/2015/10/22/html5-adding-a-download-button-to-the-ribbon-file-menu/llms.txt) - [HTML5: Make Merge Field Lists Scrollable in the Ribbon Bar](https://www.textcontrol.com/blog/2015/10/16/html5-make-merge-field-lists-scrollable-in-the-ribbon-bar/llms.txt) - [HTML5: Store Documents Using the Local Browser Storage](https://www.textcontrol.com/blog/2015/10/09/html5-store-documents-using-the-local-browser-storage/llms.txt) - [HTML5: Display and Handle FormCheckBox Fields](https://www.textcontrol.com/blog/2015/09/22/html5-display-and-handle-formcheckbox-fields/llms.txt) - [Building a Touch-enabled Button Bar with Javascript](https://www.textcontrol.com/blog/2015/05/27/building-a-touch-enabled-button-bar-with-javascript/llms.txt) - [TextControl.Web: Creating an MVC Application with Razor](https://www.textcontrol.com/blog/2015/05/12/textcontrolweb-creating-an-mvc-application-with-razor/llms.txt) - [TextControl.Web: Adding a Block Navigation Panel](https://www.textcontrol.com/blog/2015/05/08/textcontrolweb-adding-a-block-navigation-panel/llms.txt) - [Building a TX Text Control Project with GitHub Actions and the Text Control NuGet Feed](https://www.textcontrol.com/blog/2026/02/09/building-a-tx-text-control-project-with-github-actions-and-the-text-control-nuget-feed/llms.txt) - [Creating an ASP.NET Core Web App with Docker Support and GitHub Packages](https://www.textcontrol.com/blog/2024/01/05/creating-an-asp-net-core-web-app-with-docker-support-and-github-packages/llms.txt) - [Official TX Text Control .NET Sample Applications Are Now Hosted on GitHub](https://www.textcontrol.com/blog/2023/01/08/official-tx-text-control-net-sample-applications-are-now-hosted-on-github/llms.txt)