Add the ASP.NET Document Viewer to an ASP.NET MVC Application

• Aug 01, 2019
• 2 minutes to read

This tutorial illustrates how to add a Document Viewer to a Web page in an ASP.NET MVC application.

Add a required report to the current project and insert the DocumentViewer MVC extension in one of the following ways:

• Use the DevExpress MVC Extension Wizard

  1. Open the main view (named Index.cshtml) and right-click anywhere in the view window. In the invoked context menu, select Insert DevExpress MVC Extension.

     

  2. In the invoked dialog, select the Reports tab and then select the DocumentViewer extension. Specify the required report as a model class to display in the Document Viewer and click Insert. Note that you should add the report to the project before running this dialog.

     

• Manually Register the Required Extension

  1. Create a partial view file (for instance, DocumentViewerPartial) and add the following code which calls the ExtensionsFactory.DocumentViewer method and passes specific settings to the method as a parameter:

     Razor

     @Html.DevExpress().DocumentViewer(settings =>{
         // The following settings are required for a Document Viewer.
         settings.Name = "documentViewer1";
         settings.Report = (DXWebApplication1.XtraReport1)ViewData["Report"];
         // Callback and export route values specify corresponding controllers and their actions. 
         // These settings are also required.
         settings.CallbackRouteValues = new { Controller="Home", Action="DocumentViewerPartial" };
         settings.ExportRouteValues = new { Controller="Home", Action="ExportDocumentViewer" };
         }).GetHtml()
     

  2. Switch to the HomeController.cs file and write the following code for the action methods to pass report instances to the Views’ data:

     C#

     using System.Web.Mvc;
     // ...
     
     namespace DevExpressMvcApplication1.Controllers {
         public class HomeController : Controller {
             public ActionResult Index() {
                 // Add the report to View data.
                 ViewData["Report"] = new DXWebApplication1.XtraReport1();
                 return View();
             }
     
             public ActionResult DocumentViewerPartial() {
                 ViewData["Report"] = new DXWebApplication1.XtraReport1();
                 return PartialView("DocumentViewerPartial");
             }
     
             public ActionResult ExportDocumentViewer() {
                 return DevExpress.Web.Mvc.DocumentViewerExtension.ExportTo(
                     new DXWebApplication1.XtraReport1());
             }
         }
     }
     

     VB.NET

     using System.Web.Mvc;
     // ...
     
     Namespace DevExpressMvcApplication1.Controllers
         Public Class HomeController
             Inherits Controller
             Public Function Index() As ActionResult
                 ' Add the report to View data.
                 ViewData("Report") = New DevExpressMvcApplication1.Reports.XtraReport1()
                 Return View()
             End Function
     
             Public Function DocumentViewerPartial() As ActionResult
                 ViewData("Report") = New DevExpressMvcApplication1.Reports.XtraReport1()
                 Return PartialView("DocumentViewerPartial")
             End Function
     
             Public Function ExportDocumentViewer() As ActionResult
                 Return DevExpress.Web.Mvc.DocumentViewerExtension.ExportTo(New DevExpressMvcApplication1.Reports.XtraReport1())
             End Function
         End Class
     End Namespace
     

  3. Register the corresponding style sheet and script extension in the _Layout.cshtml file.

     Razor

     @Html.DevExpress().GetStyleSheets(
         new StyleSheet { ExtensionSuite = ExtensionSuite.Report }
     )
      @Html.DevExpress().GetScripts(
         new Script { ExtensionSuite = ExtensionSuite.Report }
     )
     

Run the application to view the result in a web browser.