Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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.