Configure GcDocs PDF Viewer for Editing

The steps listed below describe how to configure GcDocs PDF Viewer in an ASP.NET Core Web Application to view and edit PDF Files.

1. Open Microsoft Visual Studio and select Create a new project | ASP.NET Core Web Application.
   
2. In the Create a new ASP.NET Core web application dialog, select the following:
   NET Core 3.1(Long-term support)
   
   Note: Make sure that 'Configure for HTTPS' option is unchecked to avoid warnings shown by FireFox on Windows.
3. Make sure that sample project builds and runs fine (shows the 'Welcome' screen in browser). Next steps assume that the project is named as 'WebApplication2'.
4. Run the following command to install GcDocs PDF Viewer. Make sure that the directory location in command prompt is set to lib folder. The GcDocs PDF Viewer will be installed in WebApplication2\WebApplication2\wwwroot\lib:
   npm install @grapecity/gcpdfviewer
5. Right-click the project in Solution Explorer and choose Manage NuGet Packages
6. In the Package source on top right, select nuget.org.
7. Click Browse tab on top left and search for "GrapeCity.Documents.Pdf.ViewerSupportApi".
8. On the left panel, select GrapeCity.Documents.Pdf.ViewerSupportApi as shown in image below:
    
9. On the right panel, click Install to install the GrapeCity.Documents.Pdf.ViewerSupportApi package and its dependencies into the project. When the installation is complete, make sure you check the Packages folder under Dependencies folder in your solution explorer and confirm whether the GrapeCity.Documents.Pdf.ViewerSupportApi package is added to your project dependencies.
    
10. Modify the default content of WebApplication2\WebApplication2\Pages\Index.cshtml with the following code:
     

    Index.cshtml

    Copy Code

    @page @model IndexModel @{ ViewData["Title"] = "Home page"; } <style> .container { height: calc(100% - 128px); max-width: inherit; } #host, .pb-3 { height: 100%; } </style> <div id="host"></div> <script src="~/lib/node_modules/@@grapecity/gcpdfviewer/gcpdfviewer.js" asp-append-version="true"></script> <script> var viewer = new GcPdfViewer("#host", { supportApi: 'api/pdf-viewer' }); viewer.addDefaultPanels(); viewer.addAnnotationEditorPanel(); viewer.addFormEditorPanel(); viewer.beforeUnloadConfirmation = true; viewer.newDocument(); </script>

11. Create a 'Controllers' folder in WebApplication2 project and add a class file 'SupportApiController.cs' to it as shown below:
    
12. Modify Startup.cs by adding the following lines of code to default ConfigureServices() method:

    services.AddMvc((opts) => { opts.EnableEndpointRouting = false;});

    services.AddRouting();
    

    and following line of code to Configure() method:

    app.UseMvcWithDefaultRoute();

    The final startup.cs will look like below:

    C#

    Copy Code

    using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Hosting; using Microsoft.Extensions.Configuration; using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.Hosting; namespace WebApplication2 { public class Startup { public Startup(IConfiguration configuration) { Configuration = configuration; } public IConfiguration Configuration { get; } // This method gets called by the runtime. Use this method to add services to the container. public void ConfigureServices(IServiceCollection services) { services.AddRazorPages(); // Enable routing: services.AddMvc((opts) => { opts.EnableEndpointRouting = false; }); services.AddRouting(); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } else { app.UseExceptionHandler("/Error"); } app.UseStaticFiles(); app.UseRouting(); app.UseAuthorization(); app.UseEndpoints(endpoints => { endpoints.MapRazorPages(); }); // Enable routing: app.UseMvcWithDefaultRoute(); } } }

13. Replace the code in 'SupportApiController.cs' with the code snippet:
     

    C#	Copy Code
    using GrapeCity.Documents.Pdf.ViewerSupportApi.Controllers; using Microsoft.AspNetCore.Mvc; namespace WebApplication2 { [Route("api/pdf-viewer")] [ApiController] public class SupportApiController : GcPdfViewerController { } }

14. Build and run the application to view GcDocs PDF Viewer in your browser which contains the annotation and form editor tools to edit PDF documents.
    

The steps listed below describe how to configure GcDocs PDF Viewer in an ASP.NET WebForms Application to view and edit PDF Files.

1. Open Microsoft Visual Studio and select Create a new project | ASP.NET Web Application (.NET Framework).
2. In 'Configure your new project' dialog, name the project and select '.NET Framework 4.8' framework.
    
3. In the 'Create a new ASP.NET web application' dialog, select 'Web Forms'.
   Note: Make sure that 'Configure for HTTPS' option is unchecked to avoid warnings shown by FireFox on Windows.
   
   
4. Run the following command to install GcDocs PDF Viewer. Make sure that the directory location in command prompt is set to Scripts folder. The GcDocs PDF Viewer will be installed in WebApplication1_WebForms\WebApplication1_WebForms\Scripts:
   npm install @grapecity/gcpdfviewer
5. Replace the code in <asp:Content>..</asp:Content> tag in Default.aspx with below code:

   Default.aspx

   Copy Code

   <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1_WebForms._Default" %> <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> <style> html, body, body > form, .body-content { height: 100%; width: 100%; } #host { padding: 60px 20px 20px 10px; } </style> <div id="host"></div> <script src="Scripts/node_modules/@grapecity/gcpdfviewer/gcpdfviewer.js"></script> <script> var viewer = new GcPdfViewer("#host", { supportApi: 'SupportApi' }); viewer.addDefaultPanels(); viewer.addAnnotationEditorPanel(); viewer.addFormEditorPanel(); viewer.beforeUnloadConfirmation = true; viewer.newDocument(); </script> </asp:Content>

6. In WebApplication1_WebForms project, Right click Manage Nuget Packages and add below packages from nuget.org:
   • GrapeCity.Documents.Pdf.ViewerSupportApi
   • Microsoft.AspNet.WebApi.WebHost
7. Add a new class file 'WebApiConfig.cs' in App_Start folder and add the following code to it:
   

   WebApiConfig.cs

   Copy Code

   using System.Web.Http; namespace WebApplication1_WebForms.App_Start { public static class WebApiConfig { public static void Register(HttpConfiguration config) { // Web API configuration and services // Web API routes config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "{controller}/{action}/{id}/{id2}/{id3}", defaults: new { id = RouteParameter.Optional, id2 = RouteParameter.Optional, id3 = RouteParameter.Optional } ); } } }

8. Add the following lines of code to WebApplication1_WebForms\WebApplication1_WebForms\Global.asax.cs file. The final Global.asax.cs will look like below:
   

   using System.Web.Http;

   GlobalConfiguration.Configure(WebApiConfig.Register);

   Global.asax.cs

   Copy Code

   using System; using System.Web; using System.Web.Http; //added line using System.Web.Optimization; using System.Web.Routing; using WebApplication1_WebForms.App_Start; namespace WebApplication1_WebForms { public class Global : HttpApplication { void Application_Start(object sender, EventArgs e) { // Code that runs on application startup RouteConfig.RegisterRoutes(RouteTable.Routes); BundleConfig.RegisterBundles(BundleTable.Bundles); GlobalConfiguration.Configure(WebApiConfig.Register); //added line } } }

9. Create a 'Controllers' folder in WebApplication1_WebForms project and add a class file 'SupportApiController.cs' to it as shown below:
    
10. Replace the code in 'SupportApiController.cs' with below code:

    SupportApiController.cs	Copy Code
    using GrapeCity.Documents.Pdf.ViewerSupportApi.Controllers; namespace WebApplication1_WebForms.Controllers { public class SupportApiController : GcPdfViewerController { } }

11. Build and run the application to view GcDocs PDF Viewer with enabled editing options in your browser. You can open any PDF document and modify it.