Gnostice Document Studio .NET > Going Deeper > Document Viewing > ASP.NET > Displaying server-side documents

Steps to load server-side document in an ASP.NET Core Web App (Razor Pages) is as follows.

1.Setup a simple document viewer control in ASP.NET Core Web App as explained in the Getting Started section.

2.Create a folder called App_Data at the root of the app

3.Copy the input document (say sampleFormDocument.pdf) to the App_Data folder created in the previous step.

4.Add the following code to the Pages\Index.cshtml.cs file. You need to switch to "Page Model" to edit this file.

public class IndexModel : PageModel

{

private readonly ILogger<IndexModel> _logger;

private IWebHostEnvironment _env;

private IServiceScopeFactory _serviceScopeFactory;

private IMemoryCache _memoryCache;

public string? DocumentUri { get; private set; }

public IndexModel(ILogger<IndexModel> logger,

IWebHostEnvironment env, IServiceScopeFactory serviceScopeFactory, IMemoryCache memoryCache)

{

_logger = logger;

_env = env;

_serviceScopeFactory = serviceScopeFactory;

_memoryCache = memoryCache;

}

public void OnGet()

{

var viewerController = new Gnostice.Controls.ASP.ViewerController(_serviceScopeFactory, _memoryCache);

// Load the file present under App_Data folder

string filenameWithPath = System.IO.Path.Combine(_env.ContentRootPath, "App_Data", "sampleFormDocument.pdf");

DocumentUri = viewerController.LoadDocument(filenameWithPath);

}

The OnGet method will initialize the ViewerController and load the document to the server, and a unique document URI is generated. This URI includes a resource identifier that refers to the loaded document.

5.In the index page Pages\Index.cshtml file add the following JavaScript code. This defines the method displayServerDocumentInViewer() that loads the document.

function displayServerDocumentInViewer() {

var documentUri = "@Model.DocumentUri";

if (documentUri != null) {

// Load the server-side document through its URI using the client-side "documentViewer" object

documentViewer.loadDocument(documentUri);

}

</script>

6.In the wwwroot\js\site.js JavaScript file, call the displayServerDocumentInViewer() method after the document viewer is created, as shown below.

var documentViewer;

$(document).ready(function() {

var preferences = new gnostice.Preferences();

documentViewer = new gnostice.DocumentViewer('doc-viewer-id', preferences);

displayServerDocumentInViewer();

});

The displayServerDocumentInViewer() JavaScript function will load the document using the URI set by the server-side code.

7.Run the application in your favorite browser.