Syncfusion AI Assistant

How can I help you?

Getting Started with ASP.NET MVC Standalone PDF Viewer Control

27 Apr 20263 minutes to read

This guide explains how to integrate the ASP.NET MVC PDF Viewer into an ASP.NET MVC application using Visual Studio. A fully functional example project is available in the GitHub repository.

Prerequisites

Create a new ASP.NET MVC App in Visual Studio

ASP.NET MVC PDF Viewer NuGet packages installation

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

Add namespace

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

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

Add style sheet

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

<head>
    ...
    <!-- Syncfusion ASP.NET MVC controls styles -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/33.2.3/fluent.css" />
</head>

NOTE

Check out the Themes topic to learn different ways (CDN, NPM package, and CRG) to reference styles in an ASP.NET MVC application and ensure the expected appearance for Syncfusion® ASP.NET MVC controls.

Add script reference

Add the required scripts from the CDN inside the <head> of ~/Views/Shared/_Layout.cshtml as follows:

<head>
    ...
    <!-- Syncfusion ASP.NET MVC controls scripts -->
    <script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js"></script>
</head>

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 in the ASP.NET MVC application as follows.

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

NOTE

Add the script manager EJS().ScriptManager() at the end of <body>.

Add ASP.NET MVC PDF Viewer control

Add the Syncfusion® ASP.NET MVC PDF Viewer control in ~/Views/Home/Index.cshtml. Load a PDF by setting the DocumentPath property to a file name or URL, as shown below.

@{
    ViewBag.Title = "Home Page";
}

<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>

To configure ResourceUrl and DocumentPath with locally available resources, follow 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

See also