Document Viewer Server-Side Application from DevExpress Template (ASP.NET MVC)

• Feb 15, 2022
• 2 minutes to read

This document describes how to create and configure an ASP.NET MVC application as a server-side solution to use the Document Viewer in JavaScript:

1. Select FILE | New | Project in the main menu or press CTRL+SHIFT+N to create a new project.

   

2. Select the DevExpress v22.1 Web App Template Gallery, and click Next:

   

3. Specify a project name and location, and click Create:

   

4. In the invoked DevExpress Template Gallery, select Reporting Web Application from the ASP.NET MVC category and click Run Wizard.

   

5. Set Add Viewer Page to true to add the Document Viewer (the Viewer.cshtml view) to the web application.

   

6. Right-click the Controllers folder in the Solution Explorer and select Add | Controller…. Create the WebDocumentViewerController controller inherited from the WebDocumentViewerApiControllerBase class. Set up cross-origin resource sharing (CORS) on your back-end to configure permissions to access resources from a server with a different origin. Implement the Invoke action to allow CORS requests from all origins as shown below.

   WebDocumentViewerController.cs

   using DevExpress.Web.Mvc.Controllers;
   using System.Web.Mvc;
   
   namespace ServerSide.Controllers
   {
       public class WebDocumentViewerController : WebDocumentViewerApiControllerBase {
           public override ActionResult Invoke() {
               var result = base.Invoke();
               // Allow cross-domain requests.
               Response.AppendHeader("Access-Control-Allow-Origin", "*");
               return result;
           }
       }
   }
   

7. Use the project Properties | Web section to determine the protocol prefix (HTTP or HTTPS) and the server port number. Subsequently you specify the server-side application URL in the client application settings.

8. Run the project.