|
<< Click to Display Table of Contents >> Navigation: Gnostice Document Studio .NET > Getting Started > Document Viewing > ASP.NET > ASP.NET WebForms: Application creation |
Steps to integrate ASP.NET Document Viewer in ASP.NET web application using WebForms.
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: Web Forms".
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 (see code snippet below)
a.DBConnectionStringName
b.DBCleanupRetentionTime
▪Install EntityFramework (v 6.x) NuGet package
For more detailed description on why we need document caching, please refer the Application Scenario section.
Web.config settings (comment out the appropriate code based on the caching method being used)
<appSettings> <!-- For in-memory caching --> <add key="DocumentCache" value="memory" />
<!-- For database caching --> <add key="DocumentCache" value="database" /> <add key="DBConnectionStringName" value="GITSampleDatabase" /> <add key="DBCleanupRetentionTime" value="10" /> <add key="DBCleanupIntervalTime" value="4" /> </appSettings>
<connectionStrings> <!-- Specify the database connection strings --> <add name="GITSampleDatabase" connectionString="Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=GnosticeDatabase;Integrated Security=True;" providerName="System.Data.SqlClient" /> </connectionStrings>
|
6.Add a JavaScript file with name app to your project (under the Scripts folder) 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.Add an ASP.NET "Web Form" with name Viewer to your project. Right-click on the newly added form and set it as the "Start Page".
7.Copy/paste the following JavaScript and CSS inclusion statements to the <head> section of your WebForm (Viewer.aspx). Make sure the order of inclusion of the files matches with what is shown below.
<script src="lib/jquery/jquery.min.js"></script> <link href="Content/Gnostice/solid.min.css" rel="stylesheet" />
|
8.Add a <div> tag like this to the form and give it the same ID (doc-viewer-id) as used in the JavaScript code (app.js) above.
<div id="doc-viewer-id" style="width: 100%; height: 700px;"></div>
|
9.Build the project and run the Web application in your favorite browser.
10.Click on open button control from viewer’s toolbar to load the document from your machine.