Getting Started with ASP.NET MVC Standalone PDF Viewer Control

17 Jul 20263 minutes to read

This section explains how to integrate the ASP.NET MVC PDF Viewer into an ASP.NET MVC application using Visual Studio.

Prerequisites

Create a new ASP.NET MVC App in Visual Studio

Install Syncfusion ASP.NET MVC Package in the application

To add the .NET PDF Viewer control, the following NuGet package needs to be installed in your ASP.NET MVC application.

Or run this command in Package Manager Console:

Install-Package Syncfusion.EJ2.MVC5 -Version 34.1.29

Make sure that the Microsoft.AspNet.Mvc package and its dependency packages are updated to the latest version.

Add namespace

Add Syncfusion.EJ2 namespace reference in Web.config under Views folder.

<namespaces>
    <add namespace="Syncfusion.EJ2"/>
</namespaces>

Add style sheet and script reference

The theme and required scripts are referenced by using a CDN inside the <head> of ~/Views/Shared/_Layout.cshtml as follows:

<!-- Syncfusion EJ2 base styles and Fluent theme -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/34.1.29/fluent.css" />
<!-- Syncfusion EJ2 base scripts (includes the PDF Viewer module) -->
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js"></script>

NOTE

To learn other ways to load themes or scripts (such as NPM packages or CRG), see the Themes topic and Adding Script Reference documentation. To configure PDF Viewer with locally available script and style resources, follow these instructions.

Register Syncfusion® Script Manager

Open ~/Views/Shared/_Layout.cshtml page and register the script manager at the end of the <body> element in the ASP.NET MVC application as follows.

<!-- Syncfusion ASP.NET MVC Script Manager -->
@Html.EJS().ScriptManager()

Add ASP.NET MVC PDF Viewer control

Add the Syncfusion® ASP.NET MVC PDF Viewer control to ~/Views/Home/Index.cshtml.

<div>
    <div style="height:500px;width:100%;">
        <!-- DocumentPath specifies the PDF document to load -->
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
    </div>
</div>

NOTE

The DocumentPath property specifies the PDF document to load in the viewer. The DocumentPath value can be a remote HTTPS URL (as shown above) or a server-relative path. For locally available PDF documents, scripts, and styles, configure the ResourceUrl and DocumentPath properties together by following these instructions.

Run the application

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. The Syncfusion® ASP.NET MVC PDF Viewer will render in the default web browser.

ASP.NET MVC PDF Viewer Control

NOTE

If the viewer area is blank or the PDF fails to load, see the PDF Viewer troubleshooting guide for guidance on common issues (404 on the document, CORS, license warnings, and missing scripts).

A fully functional example project is available in the GitHub repository.

See also