Adding the Document Viewer to an ASP.NET MVC Application
- 2 minutes to read
Note
Watch the Video: Reporting: ASP.NET MVC Document Viewer (YouTube)
This document illustrates how to add a Document Viewer to a Web page in an ASP.NET MVC application.
To get started with this tutorial, open an existing reporting application or create a new one from scratch.
Insert the WebDocumentViewer MVC extension in one of the following ways:
Use the DevExpress MVC Extension Wizard
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.
In the invoked dialog, select the Reports tab and then select the WebDocumentViewer extension. Specify the required report as a model class to display in the Document Viewer and click Insert. Note that the report should have been added to the current project previously.
After that, the following view code is generated automatically:
@Html.DevExpress().WebDocumentViewer(settings => { settings.Name = "WebDocumentViewer"; }).Bind(new DXWebApplication1.Reports.XtraReport1()).GetHtml()
Manually Register the Required Extension
Switch to the HomeController.cs file and pass a new instance of the added report as a model object to the Index view the corresponding action method returns.
Switch to the Index.cshtml file and add the following code, which calls the ExtensionsFactory.WebDocumentViewer method and passes specific settings to the method as a parameter:
@model DevExpress.XtraReports.UI.XtraReport @Html.DevExpress().WebDocumentViewer(settings => { settings.Name = "WebDocumentViewer"; }).Bind(Model).GetHtml()
Register the corresponding style sheet and script extensions in the _Layout.cshtml file.
@Html.DevExpress().GetStyleSheets( new StyleSheet { ExtensionSuite = ExtensionSuite.Report } ) @Html.DevExpress().GetScripts( new Script { ExtensionSuite = ExtensionSuite.Report } )
Add the “resources” section to the application’s Web.config file as shown below to transfer all the necessary script files to a client application automatically.
<devExpress>
<!-- ... -->
<resources>
<add type="ThirdParty" />
<add type="DevExtreme" />
</resources>
</devExpress>
See the Document Viewer Requirements and Limitations document to learn about manual Document Viewer integration.
Run the application to view the result in a web browser.