How to build an ASP.NET PDF viewer

This post provides you with a step-by-step guide outlining how to deploy Nutrient’s ASP.NET PDF viewer.

ASP.NET(opens in a new tab) is an open source web framework used to build modern web apps and services with .NET, and it was created by Microsoft. ASP.NET Core is the open source version of ASP.NET, and it runs on macOS, Windows, Linux, and Docker.

ASP.NET Core MVC(opens in a new tab) is a framework used to build web applications and APIs using the Model-View-Controller (MVC) design pattern, which will be the focus of this tutorial.

MVC is an architectural pattern that promotes separation of concerns(opens in a new tab). It allows you to separate your code into logical units and then build a web application that can easily be maintained and extended.

What is an ASP.NET PDF viewer?

An ASP.NET PDF viewer lets you render and view PDF documents in a web browser without the need to download it to your hard drive or use an external application like a PDF reader.

We offer a commercial ASP.NET PDF viewer library that can easily be integrated into your web application using .NET PDF SDK. It comes with 30+ features that let you view, annotate, edit, and sign documents directly in your browser. Out of the box, it has a polished and flexible UI that you can extend or simplify based on your unique use case.

• A prebuilt and polished UI for an improved user experience
• 15+ prebuilt annotation tools to enable document collaboration
• Support for more file types with client-side PDF, MS Office, and image viewing
• Dedicated support from engineers to speed up integration

Try the ASP.NET PDF viewer

To try the ASP.NET PDF viewer, upload a PDF, JPG, PNG, or TIFF file by clicking Open Document under the Standalone option (if you don’t see this option, select Choose Example from the dropdown). Once your document is displayed in the viewer, try drawing freehand, adding a note, or applying a crop or an eSignature.

Requirements to get started

To get started, you’ll need:

• .NET 6.0, which is the current long-term support (LTS) version of .NET.

You can download it from Microsoft’s website(opens in a new tab).

Creating a new ASP.NET project

1. For this tutorial, you’ll install the ASP.NET web application (Model-View-Controller) template using the .NET CLI(opens in a new tab) (command-line interface). Open your terminal, navigate to the directory where you want to create your project, and run the following command:

dotnet new mvc -o nutrient-aspnet-example

This command creates your ASP.NET MVC project and places it in a new directory called nutrient-aspnet-example inside your current location.

2. Change your directory to the newly created project:

cd nutrient-aspnet-example

mvc is a template that creates the initial files and directory structure for an ASP.NET MVC project. Here’s the file structure of the project:

• Controllers — Handles the request flow and delegates information between the Model and the View. The Controller will get the data information from the Model and then pass that data into the View.
• Models — Handles data logic and represents how data is stored.
• Views — Presents the user interface to the user. View templates are created using Razor(opens in a new tab). These templates have a .cshtml extension.
• Views/Shared — Contains the shared components and stylesheets.
• Properties/launchSettings.json — Located in the Properties folder and holds the development environment configuration(opens in a new tab).
• wwwroot — Contains the public static assets. You’ll store the PDF file and Nutrient artifacts in this folder.
• Program.cs — The entry point of the web application.
• nutrient-aspnet-example.csproj — Defines the app project and its dependencies.

Adding Nutrient to your project

Nutrient Web SDK library files are distributed as an archive that can be extracted manually.

1. Download the framework here(opens in a new tab). The download starts immediately and saves a .tar.gz archive of Nutrient Web SDK to your computer.
2. Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s wwwroot/lib/ folder.
3. Make sure your wwwroot/lib/ folder contains the nutrient-viewer.js file and a nutrient-viewer-lib directory with the library assets.

Displaying a PDF

1. Add the PDF document you want to display to the wwwroot directory. You can use the demo document as an example.
2. Navigate to the Views/Shared/_Layout.cshtml file. You’ll only keep the @RenderBody() placeholder in this file. This will help you display the contents of the view-specific pages in the @RenderBody() placeholder:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>@ViewData["Title"] - nutrient_aspnet_example</title>
    @* Removed for brevity *@
  </head>
  <body>
    @RenderBody()
  </body>
</html>

3. Now, you’ll start working on the Home route. Navigate to your project’s Views/Home/Index.cshtml Razor file.

• Add an empty <div> element with a defined height to where Nutrient will be mounted:

<div id="nutrient" style="height: 100vh"></div>

• Include nutrient-viewer.js. The path is relative to the wwwroot directory:

<script src="/lib/nutrient-viewer.js"></script>

• Load the Nutrient SDK before the </body> tag:

<script>
  NutrientViewer.load({
    container: "#nutrient",
    document: "document.pdf",
  })
    .then(function(instance) {
      console.log("Nutrient Web SDK loaded", instance);
    })
    .catch(function(error) {
      console.error(error.message);
    });
</script>

You can see the full code for the Views/Home/Index.cshtml file here:

@{
    ViewData["Title"] = "Home Page";
}

<div id="nutrient" style="height: 100vh"></div>

<script src="/lib/nutrient-viewer.js"></script>

<script>
  NutrientViewer.load({
    container: "#nutrient",
    document: "document.pdf",
  })
    .then(function(instance) {
      console.log("Nutrient Web SDK loaded", instance);
    })
    .catch(function(error) {
      console.error(error.message);
    });
</script>

Serving the application

1. Start the app in the root directory of your project:

dotnet watch run

The server will start and automatically restart the application when changes are made to the project.

Adding even more capabilities

Once you’ve deployed your viewer, you can start customizing it to meet your specific requirements or easily add more capabilities. To help you get started, here are some of our most popular ASP.NET guides:

• Adding annotations
• Editing documents
• Filling PDF forms
• Adding signatures to documents
• Real-time collaboration
• Redaction
• UI customization

Conclusion

You should now have our ASP.NET PDF viewer up and running in your web application. If you hit any snags, don’t hesitate to reach out to the Support team for help.

You can also deploy our vanilla JavaScript PDF viewer or use one of our many web framework deployment options like React.js, Vue.js, jQuery, and Angular.

To see a list of all web frameworks, start your free trial. Or, launch the demo to see it in action.

FAQ