A Step-By-Step Tutorial for Building An ASP.NET Responsive Document Management Application

The DevExpress "Office Applications (Mobile friendly)" demo showcases many of our ASP.NET controls: RichEdit, Spreadsheet, FileManager, and more. It's inspired by the feature-rich functionality of Office 365 online, however, our demo allows any ASP.NET developer to build similar features and host it locally.

The "Office Applications" is a big demo with lots of great features. Unfortunately, it's not a great learning tool. So we've created a smaller version of this demo that teaches you how to build the core parts, step-by-step, with detailed explanation.

Responsive Sample App

To encourage folks to download, test, fork, comment, question, etc., we've put the "DevExpress / aspnet-documentmanagement-bestpractices" sample on GitHub:

https://github.com/DevExpress/aspnet-documentmanagement-bestpractices

This sample application demonstrates 'best practices' when using the DevExpress ASP.NET File Manager, Panel, Spreadsheet, and Rich Text Editor. These controls are used to implement a responsive web application for managing office documents and media files (*.docx, *.xlsx, *.jpg, etc.).

Online Demo

Click or scan the QR code below to open the online example and experience the demo on your desktop or your mobile device.

QRCode

In the repository, you'll find a full Visual Studio ASP.NET solution and several guides:

Download this repository and run it on your machine (details below). This sample app requires DevExpress ASP.NET controls (v18.1 or higher). Download the latest installer from the DevExpress website.

Application description

The application's main screen includes three main layout elements:

  • Header with text and two navigation buttons
  • Left-side collapsible menu
  • File explorer

MainElements

The file explorer, represented by the ASPxFileManager, displays the application's file system. End-users can manage files and folders: create, delete, copy, rename, or replace them.

The left-side menu allows end-users to display files only with specific extensions or files that were modified recently. End-users can collapse/expand the menu by clicking the hamburger button. If a browser window's width is less than 960px, the menu is collapsed when the application is started; otherwise, it is expanded.

AdaptivityGif

End-users can view and edit office documents (xlsx, xls, csv, docx, doc, rtf, and txt files) by clicking the corresponding item in the file explorer. The documents are opened in view mode:

ReadingView

This mode is optimized for viewing documents, specifically for mobile devices:

  • Pages render faster than in edit mode
  • Improved readability for different devices, due to the adaptive layout
  • Easy navigation through documents on mobile devices using the browser's built-in page search

End-users can to return to the file explorer or edit the document using the navigation buttons. When an end-user clicks the pen button then the document is opened in edit mode. Office documents are then either loaded in the ASPxRichEdit or ASPxSpreadsheet controls depending on their format (docx, xlsx, etc.).

EditingView

End-users can edit and save documents in this mode. The back button returns users to the read-only view.

How to launch the project on a local machine

The following steps are required to create a database that stores files contained in the AppData/Files folder. These files in the new database are then used to display in the file explorer. Refer to the Populating the File Manager with files using a database as a file storage topic to see this feature's description.

Follow the instructions below to launch the project on your machine:

  1. Run the CreateDatabase.aspx page in your browser.
  2. Click the Create and populate Database button.
  3. Wait until the button's text is changed to Database created.
  4. Now run the Default.aspx page and experience the sample application.

What are you thoughts on this new well-documented ASP.NET sample app? Drop me a line below. Thanks!

5 comment(s)
cedrus bank

Thank you for the great sample.

Is there anything similar but using XPO ?

7 October, 2018
Alfred Rakgole 2

"The "Office Applications" is a big demo with lots of great features. Unfortunately, it's not a great learning tool. So we've created a smaller version of this demo that teaches you how to build the core parts, step-by-step, with detailed explanation."

I couldn't agree more Mehul.  We need more of this "Step-By-Step" tutorials

They will save time and go a long way to bring down "how to's" support tickets :)

Regards,

Alfred

8 October, 2018
Minor Bolanos

I agree with Alfred Rakgole 2 100%. Sometime is very hard to follow your Demos.

9 October, 2018
Dmitry P (DevExpress)

@cedrus bank,

Unfortunately, there is no a similar example that uses XPO. Our example was designed and implemented using EntityFramework and the File Manager's custom system provider. This approach is very different from the approach that uses an XPO object as a data source for the File Manager.

However, you can modify the example: you need to replace code that uses EntityFramework (most of that stored in the DataProvider.cs file) into corresponding XPO methods.

10 October, 2018
jdubeau

The edit controls for word and excel are pretty slick.   The problem in the past I had with File Manger control is with security.  In a multi user scenario, it had to assign access/restrict to folders.

Otherwise, good job.  I like the reactive resize of controls,  is it an Angular front end?

17 October, 2018

Please login or register to post comments.