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

• Aug 23, 2023
• 2 minutes to read

This document describes how to create and configure the backend application required to integrate Document Viewer in client-side JS frameworks.

1. Create a new ASP.NET MVC project from the Microsoft Visual Studio template:

   

   

   

2. Install the following NuGet packages from the DevExpress NuGet Gallery:

   • DevExpress.Web.Mvc5
   • DevExpress.Web.Reporting

3. 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.Net;
   using System.Web.Mvc;
   
   public class WebDocumentViewerController : WebDocumentViewerApiControllerBase
   {
       [AllowCrossSite]
       public override ActionResult Invoke()
       {
           // CORS preflight request.
           if (this.Request.RequestType == "OPTIONS")
               return new HttpStatusCodeResult(HttpStatusCode.OK);
           return base.Invoke();
       }
   }
   
   public class AllowCrossSiteAttribute : ActionFilterAttribute
   {
       public override void OnActionExecuting(ActionExecutingContext filterContext)
       {
           filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
           filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Headers", "Authorization");
           filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Credentials", "true");
           filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
           base.OnActionExecuting(filterContext);
       }
   }
   

4. Create the Services folder in the project. Right-click the folder in the Solution Explorer and select Add | Class to create the CustomReportProvider class that implements the IReportProvider interface. The CustomReportProvider service uses the report string ID to return the report instance:

   CustomReportProvider.cs

   using DevExpress.XtraReports.Services;
   using DevExpress.XtraReports.UI;
   
   public class CustomReportProvider : IReportProvider
   {
       public XtraReport GetReport(string id, ReportProviderContext context)
       {
           XtraReport rep =  XtraReport.FromFile("C://Data//TestReport.repx");
           return rep;
       }
   }
   

   The code snippet above loads a report from the C:/Data folder on the server from a file in REPX format. Modify file name and location as required, or use your own code to create a report instance.

5. Register the CustomReportProvider service at application startup:

   Global.asax.cs

   using DevExpress.XtraReports.Services;
   using DevExpress.XtraReports.Web.WebDocumentViewer;
   // ...
   
           protected void Application_Start()
           {
               // ...
   
               DefaultWebDocumentViewerContainer.Register<IReportProvider, CustomReportProvider>();
   
           }
   

6. If a report is bound to a database, add the related connection string to the Web.config file. For more information on connection strings, review the following help topic: Connection Strings for XPO Providers.

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

8. Run the project.