Getting Started with ASP.NET MVC Standalone PDF Viewer Control
24 Jun 20243 minutes to read
The ASP.NET MVC PDF Viewer control is used to viewing and printing PDF files in any web application. It provides the best viewing experience available with core interactions such as zooming, scrolling, text searching, text selection, and text copying. Thumbnail, bookmark, hyperlink and table of contents support provides easy navigation within and outside the PDF files.
This section briefly explains about how to integrate ASP.NET MVC PDF Viewer control in your ASP.NET MVC application using Visual Studio.
Prerequisites
System requirements for ASP.NET MVC controls
Integrate PDF Viewer into an ASP.NET MVC application
- Start Visual Studio and select Create a new project.
- Create a new ASP.NET MVC Web Application project.
- Choose the target framework.
- Select Web Application pattern (MVC) for the project and then select Create button.
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.
NOTE
If you creating ASP.NET MVC application with MVC4 package, search for Syncfusion.EJ2.MVC4 and then install it.
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 referred using CDN inside the <head>
of ~/Views/Shared/_Layout.cshtml
file as follows,
<head>
...
<!-- Syncfusion ASP.NET MVC controls styles -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/27.2.2/fluent.css" />
</head>
NOTE
Checkout the Themes topic to learn different ways (CDN, NPM package, and CRG) to refer styles in ASP.NET MVC application, and to have the expected appearance for Syncfusion ASP.NET MVC controls.
Add script reference
Add the required scripts using CDN inside the <head>
of ~/Views/Shared/_Layout.cshtml
file as follows,
<head>
...
<!-- Syncfusion ASP.NET MVC controls scripts -->
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js"></script>
</head>
NOTE
While referring the scripts from the downloaded resources in your application, make sure to place the ‘ej2-pdfviewer-lib’ assets in the same directory as the ‘ej2.min.js’ script.
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
page. You can load a PDF file in the PDF Viewer by specifying the document name in the DocumentPath property as below.
@{
ViewBag.Title = "Home Page";
}
<div>
<div style="height:500px;width:100%;">
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
</div>
</div>
DocumentPath is the property needed to load a PDF file in the PDF Viewer.
Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion ASP.NET MVC PDF Viewer control will be rendered in the default web browser.
NOTE
NOTE
You can refer to our ASP.NET MVC PDF Viewer feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET MVC PDF Viewer example to understand the core features of PDF Viewer.