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.