EdgePDF Developer Guide

Introduction System requirements Quick to start Integrate EdgePDF into your project Connect to content system Advanced settings Customize EdgePDF Extend EdgePDF with Add-on SDK Common exceptions Tutorials

EdgePDF Web User Guide Workspace Creating PDF from other files Editing PDF Combining files Saving, exporting PDF Searching PDF Printing PDF

ASP.NET MVC PDF Viewer
How to view multiple pdf files in one web page using C# in ASP.NET


Easy to setup a new asp.net app to view multiple pdf files in one web page using C# ASP.NET mvc pdf viewer control





ON THIS PAGE:





We have demonstrated how to load, view a single PDF file on the html web page using EdgePDF in ASP.NET. Here we will show how to embed two EdgePDF pdf viewer in one html web page to view two PDF documents on one web page using ASP.NET C#.



How to open, view PDF file in a modal popup window in web browser

  1. Download EdgePDF asp.net PDF viewer web control
  2. Check system requirements
  3. Step by Step Tutorial




























System Requirements



System Requirements

  • .NET Framework 4.0 or later version
  • Visual C++ 2010 Redistributable Package Installed



Prerequisites

  • RasterEdge.DocImageSDK trial or licensed package
  • Microsoft Visual Studio 2017









Step by Step Tutorial
How to load, view two PDF files in one web page in ASP.NET MVC app



1. Create a new MVC5 project "EdgePDFMVCSample02".




2. Add RasterEdge assemblies (all DLLs with name prefix 'RasterEdge').



All DLLs locates in the download package "/Bin", choose .NET 4.0, x86 dlls. Add all DLLs with prefix "RasterEdge" to the project reference.

Note:
Visual Studio embed web server (IIS Express) is for x86 only. Please choose x86 DLLs from Bin folder.



3. The sample project will use the default controller "HomeController", and default view "Index.cshtml".





4. Use the following codes to replace ALL contents in "Index.cshtml" file of the sample project.



File: Index.cshtml 

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>RasterEdge Application</title>
    <script src="/RasterEdge_Resource_Files/javascript/jquery.js" type="text/javascript"></script>
</head>
<body onload="$(window).resize()">
    <div id="wdp_app_left" style="float:left;top:0px;left:5px;">
        <iframe id="wdp_container_left" src="wdp_container.html"></iframe>
    </div>
    <div id="wdp_app_right" style="float:left;top:0px;left:5px;">
        <iframe id="wdp_container_right" src="wdp_container.html"></iframe>
    </div>
    <script>
        window.onresize = function () {
            console.log("Window Width: " + $(window).width())
            $("#wdp_container_left").attr("height", $(window).height() - 20);
            $("#wdp_container_left").attr("width", $(window).width() / 2 - 20);
            $("#wdp_app_left").css("width", $(window).width() / 2 - 10);
            $("#wdp_container_right").attr("height", $(window).height() - 20);
            $("#wdp_container_right").attr("width", $(window).width() / 2 - 20);
            $("#wdp_app_right").css("width", $(window).width() / 2 - 10);
        }
    </script>
</body>
</html>



5. Add a new HTML file 'wdp_container.html' to the project with the following codes.



File: wdp_container.html 

<!DOCTYPE html>
<html>
<head>
    <title>RasterEdge Application</title>
    <script src="/RasterEdge_Resource_Files/javascript/jquery.js" type="text/javascript"></script>
    <script src="/RasterEdge_Resource_Files/javascript/RasterEdge_WebApp_Customize.js" type="text/javascript"></script>
    <script src="/RasterEdge_Resource_Files/javascript/RasterEdge_WebApp.js" type="text/javascript"></script>
    <script src="/RasterEdge_Resource_Files/javascript/RasterEdge.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/RasterEdge_Resource_Files/css/process.css" type="text/css" />
    <link rel="stylesheet" href="/RasterEdge_Resource_Files/css/customize.css" type="text/css" />
    <link rel="stylesheet" href="/RasterEdge_Resource_Files/css/jquery-ui.css" type="text/css" />
    <script type="text/javascript">
        var _rootpath = "/";
        _WDPApp = new WDPOnlineApplication({
            _serverUrl: "/RasterEdge_Resource_Files/UserCommandProcessHandler.ashx"
        });
    </script>
</head>
<body>
    <div id='rasteredge_wdp'>
        <div id='wdp_Toolbar'></div>
        <div id='wdp_LeftSidebar'></div>
        <div id='wdp_Viewer'></div>
        <div id='wdp_RightSidebar'></div>
        <div id='wdp_Footer'></div>
    </div>
</body>
</html>



6. Copy the folder "/DemoProjects/EdgePDF Demo Project/RasterEdge_Resource_Files" and all its contents to the sample project.





7. Add new entries to the Web.config file.



Insert the following contents to tag <appSettings>: 

    <!-- the cache folder -->
    <add key="reCacheFolder" value="RasterEdge_Cache"/>
    <add key="reCustomStampFolder" value="RasterEdge_Resource_Files/images/stamp"/>
    <!-- set the server folder if you want to open the file on server-->
    <add key="reDefaultFolder" value="RasterEdge_Demo_Docs"/>
    <!-- set the default file when open the web first time,if set "" ,this function is disabled. (reDefaultFolder needed) -->
    <add key="reDefaultFilePath" value=""/>
    <!-- image quality in PDF document -->
    <add key="rePageImageZoom" value="2"/>
    <add key="reImageZoom" value="2"/>
    <!-- image annotation in PDF document -->
    <add key="reAnnotationImageZoom" value="2"/>
    <!-- write log -->
    <add key="reOutputLogData" value="true"/>
    <!-- if true, SDK will automatically convert many shape and path inside PDF page into image-->
    <!-- default is false -->
    <!-- DEBUG ,INFO ,WARNING,ERROR -->
    <add key="reLogLevel" value="DEBUG"/>
    <add key="reWDPFileCacheMaxLimit" value="0"/>
    <add key="reIntelliDrawShapesToImage" value="true"/>
    <!-- if reIntelliDrawShapesToImage is true, -->
    <!-- valid values are: "all", "firefox", "chrome", "ie", "edge", "salari", "others" if "all" included, ignore the rest; default is "all" -->
    <add key="reIntelliDrawShapesToImageSupportBrowsers" value="all"/>
    <!-- set the type of the show page.
    Valid values: svg, png,html
    Default: svg
    -->
    <add key="reDocRenderEngine" value="svg"/>
    <add key="reRestfulFolder" value="c:/RasterEdge_Restful"/>
    <add key="reI18NFolder" value="/RasterEdge_Resource_Files/i18n/"/>
    <add key="reServerURL" value=""/>
    <!-- set the domain for remote client-->
    <!-- If true, SDK will automatically call ... after file has been uploaded. Deafult: false. -->
    <add key="autoProcessWholeDocument" value="false"/>
    <!-- If true, SDK will automatically call ... after file has been uploaded. Default: false. -->
    <add key="autoIndexTextSearchWholeDocument" value="false"/>



Insert the following contetns to tag <system.webServer>: 

    <security>
      <requestFiltering allowDoubleEscaping="true">
        <requestLimits maxAllowedContentLength="41943040"/>
      </requestFiltering>
    </security>
    <staticContent>
      <remove fileExtension=".js"/>
      <remove fileExtension=".svg"/>
      <remove fileExtension=".woff"/>
      <remove fileExtension=".ttc"/>
      <remove fileExtension=".xfdf"/>
      <remove fileExtension=".fdf"/>
      <mimeMap fileExtension=".xfdf" mimeType="application/octet-stream"/>
      <mimeMap fileExtension=".fdf" mimeType="application/octet-stream"/>
      <mimeMap fileExtension=".woff" mimeType="application/octet-stream"/>
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml"/>
      <mimeMap fileExtension=".ttc" mimeType="application/x-font-ttc"/>
      <mimeMap fileExtension=".js" mimeType="application/x-javascript"/>
    </staticContent>
    <urlCompression doStaticCompression="true" doDynamicCompression="true"/>



Add (or merge) the following contents to tag <system.web>: 

    <httpRuntime requestValidationMode="2.0" executionTimeout="1200" maxRequestLength="40960" useFullyQualifiedRedirectUrl="false"/>



Note:
If Web.config has already defined tag , you need merge the above content to the existed tag contents.



8. Set the cache folder auto-clear rules



Copy codes below and replace contents in 'Global.asax.cs' file of the sample project.

File: Global.asax.cs 

using System;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
using RasterEdge.WDP;
using System.Web.Caching;

namespace EdgePDFMVCSample02
{
    public class MvcApplication : System.Web.HttpApplication
    {
        public System.Threading.Thread schedulerThread = null;
        private static string DummyPageUrl = "";
        private const string DummyCacheItemKey = "CacheRegistry";

        protected void Application_Start()
        {
            Logger.initLog();
            TimerTask();
            AreaRegistration.RegisterAllAreas();
            RouteConfig.RegisterRoutes(RouteTable.Routes);
        }
        private void TimerTask()
        {
            RegisterCacheEntry();
            Scheduler.ClearAllFolder();
            Scheduler.StartFileCacheCleanTask(FileCacheCleanType.FileLifeMaxTime, new IntervalTime(3, 0, 0));
            Scheduler.StartFileCacheCleanTask(FileCacheCleanType.FileCacheCleanTime, new IntervalTime(3, 0, 0));
            Scheduler.StartUserCacheCleanTask(UserCacheCleanType.UserRequestMaxTime, new IntervalTime(3, 0, 0));
            Scheduler.StartUserCacheCleanTask(UserCacheCleanType.UserFileRequestCacheCleanTime, new IntervalTime(3, 0, 0));
            Logger.LogSystem("Cache Auto clear Start", LogType.INFO);
        }

        private void RegisterCacheEntry()
        {
            if (null != HttpContext.Current.Cache[DummyCacheItemKey]) return;
            HttpContext.Current.Cache.Add(DummyCacheItemKey, "Test", null, DateTime.MaxValue, TimeSpan.FromMinutes(15), CacheItemPriority.NotRemovable, new CacheItemRemovedCallback(CacheItemRemovedCallback));
        }

        public void CacheItemRemovedCallback(string key, object value, CacheItemRemovedReason reason)
        {
            System.Net.WebClient client = new System.Net.WebClient();
            client.DownloadData(DummyPageUrl);
        }

        protected void Application_BeginRequest(Object sender, EventArgs e)
        {
            if (DummyPageUrl == "")
                DummyPageUrl = HttpContext.Current.Request.Url.ToString();
            RegisterCacheEntry();
        }
    }
}



9. Change the target platform to "x86"





10. It is done. Now run the project.



Web browser navigate to 'http://localhost:[port]/', you can get the port number in the project properties page.















Next Steps

Download and try EdgePDF - ASP.NET PDF Editor Control with online support.
See the EdgePDF - ASP.NET PDF Editor Control SDK in action and check how much they can do for you.

Check out the prices. Purchase various licenses for your needs.