How to build an ASP.NET image viewer

Hulya Masharipov

February 8, 2022

In this post, we provide you with a step-by-step guide outlining how to deploy PSPDFKit’s ASP.NET image 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.

What is an ASP.NET image viewer?

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

PSPDFKit ASP.NET image viewer

We offer a commercial ASP.NET image viewer library that can easily be integrated into your web application. 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

Example of our ASP.NET image viewer

To see our image viewer(opens in a new tab) in action, upload a JPG, PNG, or TIFF file by selecting Choose Example > Open Document (if you don’t see this, switch to the Standalone option). Once your image is displayed in the viewer, you can try drawing freehand, adding a note, or applying a crop or an e-signature.

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

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 pspdfkit-aspnet-example

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

Change your directory to the newly created project:

cd pspdfkit-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:

asp.net mvc file structure shown in VS Code

Views/Home — Contains the routable components/pages. You’ll work on the Home page, which is the Index.cshtml file.
Views/Shared — Contains the shared components and stylesheets. The _Layout.cshtml file defines the app’s layout component(opens in a new tab).
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 PSPDFKit artifacts in this folder.
Program.cs — Contains the app startup code and middleware configuration.
pspdfkit-aspnet-example.csproj — Defines the app project and its dependencies.

Adding PSPDFKit to your project

PSPDFKit for Web library files are distributed as an archive that can be extracted manually.

Download the framework here(opens in a new tab). The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.2.1.tar.gz to your computer.
Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s wwwroot/lib folder.
Make sure your wwwroot/lib folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

Displaying an image document

Add the image you want to display to the public directory. You can use our demo image as an example.
Navigate to the Views/Shared/_Layout.cshtml file. During rendering, the @RenderBody() property will be replaced with the content of the layout:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>@ViewData["Title"] - pspdfkit_aspnet_example</title>
    @* ... *@
  </head>
  <body>
    @RenderBody()
  </body>
</html>

Now, you’ll start working on the Home route. Navigate to your project’s Views/Home/Index.cshtml file, and load the PSPDFKit SDK before the </body> tag:

<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>

<script src="/lib/pspdfkit.js"></script>

<script>
  PSPDFKit.load({
    container: "#pspdfkit",
    document: "image.png",
  })
    .then(function(instance) {
      console.log("PSPDFKit loaded", instance);
    })
    .catch(function(error) {
      console.error(error.message);
    });
</script>

The div element is used to display the PDF document.

Serving the application

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.

You can access the source code for this tutorial on GitHub(opens in a new tab). If you're using Visual Studio, follow our getting started guide for Visual Studio.

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:

Conclusion

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

You can also integrate our JavaScript image viewer or JavaScript image annotation library using web frameworks like Angular and React.js. To see a list of all web frameworks, start your free trial. Or, launch our demo(opens in a new tab) to see our viewer in action.