How to integrate GroupDocs.Viewer in ASP.NET Core Web application Leave feedback
On this page
This page describes how to develop a simple ASP.NET Core Web application that uses GroupDocs.Viewer for .NET as a rendering engine. The page describes how to create an application and to add required packages using the terminal, but you can do the same with Visual Studio. The following image shows the simplified application diagram:
You can also find this sample application in the demo projects repository at GitHub.
To build the application from scratch, download .NET or .NET Core 3.1 SDK at https://dotnet.microsoft.com/download and then install it.
Create a web application by executing the .NET CLI command in the directory named my-viewer-app:
dotnet new web
Check that project and configuration files has been created.
Add required packages using the .NET CLI tool. To do this, execute the following commands in the my-viewer-app directory:
dotnet add package GroupDocs.Viewer.UI
dotnet add package GroupDocs.Viewer.UI.SelfHost.Api
dotnet add package GroupDocs.Viewer.UI.Api.Local.Storage
dotnet add package GroupDocs.Viewer.UI.Api.Local.Cache
- GroupDocs.Viewer.UI contains a middleware that serves the client application at the /viewer endpoint that you configure in the next step.
- GroupDocs.Viewer.UI.SelfHost.Api contains a middleware with a rendering engine based on GroupDocs.Viewer for .NET. You configure it at the /viewer-api endpoint.
- GroupDocs.Viewer.UI.Api.Local.Storage contains an implementation for the storage using a local disk to read and write files uploaded using UI.
- GroupDocs.Viewer.UI.Api.Local.Cache contains implementation for the cache storage. The cache stores output files produced by the rendering engine, such as the rendered HTML pages.
Open the Startup.cs file and add the following lines to ConfigureServices method:
services
.AddGroupDocsViewerUI();
services
.AddControllers()
.AddGroupDocsViewerSelfHostApi()
.AddLocalStorage("./Files")
.AddLocalCache("./Cache");
Add the following lines to the Configure method to register UI and API endpoints:
app
.UseRouting()
.UseEndpoints(endpoints =>
{
endpoints.MapGroupDocsViewerUI(options =>
{
options.UIPath = "/viewer";
options.APIEndpoint = "/viewer-api";
});
endpoints.MapGroupDocsViewerApi(options =>
{
options.ApiPath = "/viewer-api";
});
});
This code registers /viewer middleware that serves client application files and /viewer-api middleware that renders content for the client application.
The Startup.cs file is as follows:
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
namespace my_viewer_app
{
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services
.AddGroupDocsViewerUI();
services
.AddControllers()
.AddGroupDocsViewerSelfHostApi()
.AddLocalStorage("./Files")
.AddLocalCache("./Cache");
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app
.UseRouting()
.UseEndpoints(endpoints =>
{
endpoints.MapGroupDocsViewerUI(options =>
{
options.UIPath = "/viewer";
options.APIEndpoint = "/viewer-api";
});
endpoints.MapGroupDocsViewerApi(options =>
{
options.ApiPath = "/viewer-api";
});
});
}
}
}
If you use the new program style with top-level statements, global using directives, and implicit using directives, the Startup.cs is as follows:
var builder = WebApplication.CreateBuilder(args);
builder.Services
.AddGroupDocsViewerUI();
builder.Services
.AddControllers()
.AddGroupDocsViewerSelfHostApi()
.AddLocalStorage("./Files")
.AddLocalCache("./Cache");
var app = builder.Build();
app
.UseRouting()
.UseEndpoints(endpoints =>
{
endpoints.MapGroupDocsViewerUI(options =>
{
options.UIPath = "/viewer";
options.APIEndpoint = "/viewer-api";
});
endpoints.MapGroupDocsViewerApi(options =>
{
options.ApiPath = "/viewer-api";
});
});
app.Run();
On a local disk, create folders for files and cache by executing the following commands:
mkdir Files
mkdir Cache
To run the application, execute the dotnet run command in the my-viewer-app directory. The output should be as follows:
Building...
info: Microsoft.Hosting.Lifetime[14]
Now listening on: https://localhost:7153
info: Microsoft.Hosting.Lifetime[14]
Now listening on: http://localhost:5081
info: Microsoft.Hosting.Lifetime[0]
Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
Content root path: C:\my-viewer-app
In the browser, open one of the endpoints listed in the output above and add the /viewer path to see the viewer application in action:
To upload files, click the folder icon or copy your files to the Files directory. You can also specify the path to the directory in the AddLocalStorage extension method.
- GroupDocs.Viewer.UI package repository
- GroupDocs.Viewer for .NET Demos and Examples
- GroupDocs.Viewer Online App
Was this page helpful?
Any additional feedback you'd like to share with us?
Please tell us how we can improve this page.
Thank you for your feedback!
We value your opinion. Your feedback will help us improve our documentation.
