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 (MVC) 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.Modify the HomeController class (Controllers\HomeController.cs) as follows.

public class HomeController : Controller

{

private readonly ILogger<HomeController> _logger;

private IWebHostEnvironment _env;

private IServiceScopeFactory _serviceScopeFactory;

private IMemoryCache _memoryCache;

//public string? DocumentUri { get; private set; }

public HomeController(ILogger<HomeController> logger,

IWebHostEnvironment env, IServiceScopeFactory serviceScopeFactory, IMemoryCache memoryCache)

{

_logger = logger;

_env = env;

_serviceScopeFactory = serviceScopeFactory;

_memoryCache = memoryCache;

}

public IActionResult Index()

{

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");

ViewData["DocumentUri"] = viewerController.LoadDocument(filenameWithPath);

return View();

}

// Leave other methods as-is

// ...

}

The Index() action 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 view page Home\View\Index.cshtml file add the following JavaScript code before the div tags. This defines the method displayServerDocumentInViewer() that loads the document.

function displayServerDocumentInViewer() {

var documentUri = "@ViewData["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.