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

The following Javascript disables the original file menu in order to attach the backstage view on clicking the FILE menu:

Loading...

The backstage view itself consists of simple DIV elements and an unordered list for the vertical menu:

Loading...

When a menu link is clicked, the function switchBackstageView is loading an MVC partial view dynamically:

Loading...

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.

GitHub

Download and Fork This Sample on GitHub

We proudly host our sample code on github.com/TextControl.

Please fork and contribute.

Requirements for This Sample

  • Visual Studio 2012 or better
  • TX Text Control .NET Server for ASP.NET (trial sufficient)