Gnostice Document Studio .NET > Getting Started > Document Viewing > ASP.NET

Steps to integrate ASP.NET Document Viewer in ASP.NET web application (using MVC).

1.Open Visual Studio and create a new ASP.NET Web Application (.NET Framework). In the wizard choose "Empty" and choose "Add folders and core references for: MVC".

2.Use either the GUI or the Package Manager Console and install the Gnostice.DocumentStudio.ASP NuGet package.

3.Right-click on the project and choose Add -> Client-Side Library... Install the jquery, and jqueryui libraries by choosing only the following files

a.For jQuery: jquery.min.js file

b.For jQueryUI: jquery-ui.min.js file, and themes\base folder

4.Configure the DocumentCache setting in Web.config file. This setting specifies the location where the processed data should be cached. You can refer to the FAQ to know which cache location is right for you. To know more about all the settings, refer to the Web.config reference documentation.

○To use RAM as the temporary storage for processed document data, no changes are required. DocumentCache is already setup as memory.

○To use a database as the temporary storage for processed document data

▪Change the value of DocumentCache setting in Web.config to database

▪Add the following settings under appSettings and provide values for them

a.DBConnectionStringName

b.DBCleanupRetentionTime

c.DBCleanupIntervalTime

For more detailed description on why we need document caching, please refer the Application Scenario section.

5.Add a new empty MVC controller called HomeController and then add an associated ‘view’ to the view folder. To add an associated view first open the controller and right-click on the method titled Index and then select Add View. When adding the view please uncheck the option to use a layout page.

6.Add a JavaScript file with name app to your project and copy the following contents to it. This creates the document viewer.

var documentViewer;

$(document).ready(function() {

var preferences = new gnostice.Preferences();

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

});

7.Copy and paste the following JavaScript and CSS inclusion statements in the <head> section of the main page (default: Index.cshtml). Make sure the order of inclusion of the files matches with what is shown below.

8.Add a <div> tag like this to the main page and give it the same ID (doc-viewer-id) as used in the JavaScript code (app.js) above.

9.Add the following line to App_Start\RouteConfig.cs file.

routes.IgnoreRoute("{*DocumentHandler}", new { DocumentHandler = @".*\.axd(/.*)?" });

10.Build the project and run the Web application in your favorite browser.

11.Click on open button control from viewer’s toolbar to load the document from your machine.

ASP.NET MVC: Application creation

ASP.NET MVC: Application creation