Syncfusion AI Assistant

How can I help you?

Getting started with the ASP.NET MVC PDF Viewer control

26 Apr 20265 minutes to read

This guide shows 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

Install NuGet packages

Install the following NuGet packages to add the PDF Viewer to the ASP.NET MVC application.

Add namespace

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

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

Add the style sheet

Reference a theme from the 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 consistent appearance for Syncfusion® ASP.NET MVC controls.

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

Register the Syncfusion® script manager

Open ~/Views/Shared/_Layout.cshtml 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 the 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 -->
        <!-- ServiceUrl specifies the controller endpoint that the viewer uses to communicate with the server -->
        @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/Home/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
    </div>
</div>

Implement server-side handlers

Add the server side code to HomeController.cs in the Controllers folder. The class should contain handler methods that process all PDF operations on the server, such as loading documents, rendering pages, handling annotations, and managing downloads.

An implementation example can be found in Github.

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

Deployment notes

  • Unlike the standalone PDF Viewer which performs client-side rendering, the server-backed PDF Viewer processes and renders PDFs entirely on the server. As a result, the following files are not required and should be omitted during deployment:
    • pdfium.js
    • pdfium.wasm

  • For hosting the web service on Linux, include SkiaSharp.NativeAssets.Linux

  • For AWS environments, use the following packages:

    Amazon Web Services (AWS) NuGet package name
    AWS Lambda SkiaSharp.NativeAssets.Linux
    AWS Elastic Beanstalk SkiaSharp.NativeAssets.Linux.NoDependencies v3.119.1
  • The serviceUrl can be updated dynamically at runtime. After updating the value, invoke pdfViewer.dataBind() to apply the change and then load the document. This feature is supported in version 23.1.36 or later.
@{
    string serviceUrl = VirtualPathUtility.ToAbsolute("~/Home/");
}
<script>
    function load() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.serviceUrl = "@serviceUrl";
        pdfViewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
        pdfViewer.dataBind();
    }
</script>

See also