Add the Document Viewer to an ASP.NET MVC Application
- 4 minutes to read
This topic describes how to configure an ASP.NET MVC project to use DevExpress controls, add the Document Viewer control to a view page, and display a report.
You can add the Document Viewer to an existing application. To keep things simple, we begin with a newly created ASP.NET MVC web application.
Create a New ASP.NET MVC Web Application
Follow the steps below to create a new project from a Visual Studio template.
Run DevExpress ASP.NET Project Wizard
Invoke the DevExpress ASP.NET Project Wizard to update the existing project. Click the Extensions menu item in Visual Studio and select DevExpress → ASP.NET Controls → Run Wizard to Update Project.
Click Update Project.
The Wizard updates the Web.config file with DevExpress project settings and adds references to DevExpress assemblies.
Include Client-Side Scripts
Add the following section to the Web.config file to automatically register third-party scripts and DevExtreme libraries:
<configuration>
<devExpress>
...
<resources>
<add type="ThirdParty" />
<add type="DevExtreme" />
</resources>
</devExpress>
</configuration>
Add the following code to the _Layout.cshtml file to include Reporting scripts and stylesheets, and make them available in all views:
<head>
...
@Html.DevExpress().GetStyleSheets(
new StyleSheet { ExtensionSuite = ExtensionSuite.Report }
)
@Html.DevExpress().GetScripts(
new Script { ExtensionSuite = ExtensionSuite.Report }
)
</head>
Comment out the line that registers the jQuery scripts in the _Layout.cshtml file:
@*@Scripts.Render("~/bundles/jquery")*@
The jQuery script library is already registered as one of the third-party scripts with the add type="ThirdParty" directive in the Web.config file. The line that adds jQuery scripts one more time results in an error. The following message appears in the browser console: jQuery script was attached multiple times and mixed up with DevExpress scripts.
For more information, review the following help topic: Manual Integration into an Existing Project.
Add a Sample Report
Right-click the project in the Solution Explorer and select Add | New Folder from the context menu. Rename the created folder to Reports.
Right-click the Reports folder and select Add | New Item from the context menu. In the invoked Add New Item dialog, click the Reporting tree node and select DevExpress v24.1 Report.
Rename the new report to TestReport and click Add.
Select the Blank report type in the invoked Report Wizard.
- The Report Designer displays the newly created blank report. Save the report and close the designer.
- Rebuild the project.
Review the following help topic for more information: Add a New Report in Visual Studio.
Implement MVC Controller to Process Requests
An application can register the ASPxHttpHandlerModule handler to process resources and requests. For more information, review the following help topic: Register HTTP Handlers.
An alternative method is to implement MVC controllers to handle the requests, as described in the following steps:
- Add a reference to the
DevExpress.XtraReports.v24.1.Webassembly to resolve the base controller type. Implement a default controller that processes the Document Viewer requests. To do this, in the Controllers folder, create a new file (
ReportingControllers.cs) with the following content:using DevExpress.Web.Mvc.Controllers; using System.Web.Mvc; namespace WebApplication1.Controllers { public class WebDocumentViewerController : WebDocumentViewerApiControllerBase { public override ActionResult Invoke() { return base.Invoke(); } } }
Create a Model and Pass the Model to the View
This method creates a WebDocumentViewerModel model and specifies all the necessary parameters on the server.
Implement the
HomeControlleras follows:using System.Web.Mvc; using DevExpress.XtraReports.Web.WebDocumentViewer; public class HomeController : Controller { public ActionResult Index() { WebDocumentViewerClientSideModelGenerator modelGenerator = new WebDocumentViewerClientSideModelGenerator(); WebDocumentViewerModel model = modelGenerator.GetModel("TestReport", @Url.Action("Invoke", "WebDocumentViewer")); return View(model); } }Implement and register the IReportProvider service to translate the
ReportUrlstring to a report instance.using DevExpress.XtraReports.Services; using DevExpress.XtraReports.UI; using WebApplication1.Reports; public class CustomReportProvider : DevExpress.XtraReports.Services.IReportProvider { public XtraReport GetReport(string id, ReportProviderContext context) { return id == "TestReport" ? new TestReport() : new XtraReport(); } }using DevExpress.XtraReports.Web.WebDocumentViewer; // ... public class MvcApplication : System.Web.HttpApplication { protected void Application_Start() { // ... DefaultWebDocumentViewerContainer.Register<IReportProvider, CustomReportProvider>(); // ... } }Replace the
Index.cshtmlpage content with the following code snippet:@model DevExpress.XtraReports.Web.WebDocumentViewer.WebDocumentViewerModel @Html.DevExpress().WebDocumentViewer(settings => { settings.Name = "WebDocumentViewer"; settings.DisableHttpHandlerValidation = true; }).Bind(Model).GetHtml()This code disables default HTTP handlers and instructs the Document Viewer to use a controller specified in the model.
Initialize Document Viewer on Startup
Add a reference to the
DevExpress.XtraReports.v24.1.Web.WebFormsassembly.Add the following line to the
Global.asax.csfile after all service registration methods:// ... public class MvcApplication : System.Web.HttpApplication { protected void Application_Start() { // ... // ... DevExpress.Web.Mvc.MVCxWebDocumentViewer.StaticInitialize(); } }
Troubleshooting
Run the project and observe the result. If the Document Viewer is not displayed or an error message is shown, review the following help topics to diagnose and remedy the problem: