|
<< Click to Display Table of Contents >> Navigation: Gnostice Document Studio .NET > Getting Started > Document Viewing > ASP.NET > ASP.NET Core Web App: Application creation |
Steps to integrate ASP.NET Core Document Viewer in ASP.NET Core web application. Note that these steps apply to both Razor Pages, as well as the Model View Controller (MVC) type of Web App.
1.Open Visual Studio and create a new ASP.NET Core Web App.
2.Use either the GUI or the Package Manager Console and install the following NuGet package
a.Gnostice.DocumentStudio.ASP.Core
3.Right-click on the project and choose Add -> Client-Side Library... Install the jqueryui library by choosing only the following files
a.jquery-ui.min.js
b.themes\base folder
4.If database caching is being used (see topic here for help on choosing the caching) then install the following NuGet package
a.Microsoft.EntityFrameworkCore.SqlServer - Choose the version based on the following
i.Version 8.x for .NET 8
ii.Version 7.x for .NET 7
iii.Version 6.x for .NET 6
iv.Version 5.x for .NET 5 and .NET Core 3.1
For more detailed description on why we need document caching, please refer the Application Scenario section.
5.Build the application so that the Gnostice CSS and JS files are added to the project.
6.For .NET Core 3.1, and .NET 5: Open Startup.cs file and add the following statements to it. Comment out the appropriate code based on the caching method being used.
/* Add in method ConfigureServices(IServiceCollection services) */
// For in-memory caching services.AddMemoryCache();
// For database caching services.AddDbContext<EFDocumentViewerDbContext>(options => { options.UseSqlServer(Configuration.GetConnectionString("SQLConnection")); }, ServiceLifetime.Transient);
/* Add in method Configure(IApplicationBuilder app, IHostingEnvironment env) */
// Add 'using Gnostice.Controls.ASP.ASPNETCore;' at the top of the file app.Map("/DocumentHandler.axd", appMap => appMap.UseGnosticeDocumentViewerMiddleware());
|
7.For .NET 6 and later: Open Program.cs file and add the following statements to it. Comment out the appropriate code based on the caching method being used.
/* Add after var builder = WebApplication.CreateBuilder(args); statement */
// For in-memory caching builder.Services.AddMemoryCache();
// For database caching builder.Services.AddDbContext<EFDocumentViewerDbContext>(options => { options.UseSqlServer(builder.Configuration.GetConnectionString("SQLConnection")); }, ServiceLifetime.Transient);
/* Add after app.UseRouting(); statement */
// Add 'using Gnostice.Controls.ASP.ASPNETCore;' at the top of the file app.Map("/DocumentHandler.axd", appMap => appMap.UseGnosticeDocumentViewerMiddleware());
|
8.Add the following settings to appsettings.json file (for memory caching)
"GnosticeControlSettings": { "DocumentCache": "memory" }
|
9.Add the following settings to appsettings.json file (for database caching). To know more about all the settings, refer to the Web.config / appsettings.json reference documentation. Replace <Connection string here> with the correct connection string. For example, for Microsoft SQL Server installed locally it would be something like "Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=GnosticeDB;Integrated Security=True;Connect Timeout=30;Encrypt=False;Trust Server Certificate=False;Application Intent=ReadWrite;Multi Subnet Failover=False".
"GnosticeControlSettings": { "DocumentCache": "database", "DatabaseCleanup": { "DBCleanupRetentionTime": "10", "DBCleanupIntervalTime": "7", "DBCleanupRetentionSize": "1240", } }, "ConnectionStrings": { "SQLConnection": "<Connection string here>" }
|
14.Add CSS references to the file Pages/Shared/_Layout.cshtml (or Views/Shared/_Layout.cshtml for MVC) towards the end of the <head> section
<link href="~/lib/jqueryui/themes/base/jquery-ui.css" rel="stylesheet" /> <link href="~/Gnostice/css/all.min.css" rel="stylesheet" /> <link href="~/Gnostice/css/solid.min.css" rel="stylesheet" /> <link href="~/Gnostice/css/documentviewer.css" rel="stylesheet" /> |
15.Add JS references to the file Pages/Shared/_Layout.cshtml (or Views/Shared/_Layout.cshtml for MVC) towards the end of the <body> section. Though the viewer also needs jquery, we don't need to add it since it should already be added by the wizard when the project is created.
<script src="~/lib/jqueryui/jquery-ui.min.js"></script> |
16.Instantiate the document viewer by adding the following statements to the file wwwroot/js/site.js
var documentViewer; $(document).ready(function() { var preferences = new gnostice.Preferences(); documentViewer = new gnostice.DocumentViewer('doc-viewer-id', preferences); });
|
17.Add the following div tag to the file Pages\Index.cshtml (or Views\Home\Index.cshtml for MVC).
<div id="doc-viewer-id" style="width: 100%; height: 1024px;"></div>
|
18.For .NET Core 3.1, and .NET 5: Change the debug/run configuration from IISExpress to the specific project name by clicking on the drop menu next to the run icon.
19.Build the project and run the Web application.
20.Click on open button control from viewer’s toolbar to load the document from your machine.