Skip to main content
All docs
V21.2

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

  • 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:

    Create New ASP.NET MVC Application

    Configure New ASP.NET MVC Application

    Select New ASP.NET MVC Application

  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.

    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:

    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:

    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.