ASP.NET MVC PDF Viewer Control
How to open, view, edit PDF document on modal popup windows in web page using C#

Easy to setup a new asp.net app to open, view PDF document on modal popup windows in web page using C#

ON THIS PAGE:

Overview
System Requirements
Tutorial: How to view PDF file in modal popup window?

In this tutorial, you learn how to build an ASP.NET MVC5 web application using C# that open, view edit PDF document on a modal popup window in a web page.

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

Download EdgePDF asp.net PDF viewer web control
Check system requirements
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
Visual Studio 2017

Step by Step Tutorial
How to open, view PDF file in modal popup window in ASP.NET MVC5 app?

1. Create a new MVC5 project "EdgePDFMVC5Demo".

2. Add RasterEdge DLL references (add all DLLs with prefix "RasterEdge" in name).

Please go to the folder “/Bin” in the download package, and choose .NET Framework 4.0, x86 DLLs. Add all DLLs with prefix “RasterEdge.” to your project references.

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

3. We will use the default controller "HomeController" and default view "Index.cshtml".

4. Copy the contents in the below table to overwrite your Index.cshtml file.

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>
    <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>

5. Add the folder "/DemoProjects/EdgePDF Demo Project/RasterEdge_Resource_Files" (all contents) to the project.

6. Set the Web.config

Add 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"/>
<add key="reAnnotationImageZoom" value="2"/>
<add key="reOutputLogData" value="true"/>    
<!-- Set the max. links allowed in the source document. Input value must be non-negative number.
        Default: 0 (no limit). Recommend: 5000. -->
<add key="reWDPSinglePDFMaxLinkCount" value="500"/>
<!--  DEBUG ,INFO ,WARNING,ERROR -->
<add key="reLogLevel" value="DEBUG"/>
<add key="reWDPFileCacheMaxLimit" value="0"/>
<add key="reSDKLogerEnable" value="true"/>
<!-- if true, SDK will automatically convert many shape and path inside PDF page into image-->
<!-- default is false -->
<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 "firefox, ie"    -->
<add key="reIntelliDrawShapesToImageSupportBrowsers" value="all"/>
<!-- Valid values: html, svg, png
        Default: svg -->
<add key="reDocRenderEngine" value="svg"/>
<add key="reRestfulFolder" value="c:/RasterEdge_Restful"/>
<add key="reI18NFolder" value="/RasterEdge_Resource_Files/i18n/"/>
<!-- set the domain for remote client-->
<add key="reServerURL" value=""/>

<!-- If true, SDK will automatically all pages after file has been uploaded. Deafult: false. -->
<add key="autoProcessWholeDocument" value="false"/>
<!-- If true, SDK will automatically render extract text content after file has been uploaded. Default: false. -->
<add key="autoIndexTextSearchWholeDocument" value="false"/>
<!-- set the js response max try time when save file or save as-->
<add key="reJSResponseMaxTryTime" value="120"/>
  
<!-- Number of pages loading per request, must be a positive integer. -->
<add key="clientSidePagesLoadingPerRequest" value="5"/>

Add following contents 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 following contents to tag <system.web>:

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

Note:
If tag <web.config> has already defined a tag "<httpRuntime>", you need merge all above attributes with the existed tag contents.

7. Set the cache folder auto-clear rules

Copy the contents in the below table to overwrite your Global.asax.cs file.

File: Global.asax.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;
using System.Web.Caching;
using RasterEdge.WDP;

namespace EdgePDFMVC5Demo
{
    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();
        }
    }
}

8. Change target platform to "x86"

9. Add a new HTML file "edgepdf-page-popup.html" to the project.

Note: all contents in the HTML file could be found in the Appendix: edgepdf-page-popup.html.

10. Start the demo project and open web page "https://localhost:44389/edgepdf-page-popup.html"

Press "ShowFile" button to open the popup frame.

Appendix: edgepdf-page-popup.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: "Arial";
            font-size: 16px;
        }

        #mask_shadow {
            display: none;
            opacity: 0;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .5);
        }

        #popup {
            display: none;
            opacity: 0;
            position: absolute;
            z-index: 2;
            top: 0px;
            width: 800px;
            height: 20px;
            padding-right:5px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        }

        #btn1 {
            margin: 30px;
        }
        .title {
            background: -webkit-linear-gradient(#00aaff, blue);
            background: -o-linear-gradient(#00aaff, blue);
            background: -moz-linear-gradient(#00aaff, blue);
            background: linear-gradient(#00aaff, blue);
            height: 20px;
            color: #FFFFFF;
        }
    </style>
</head>
<script src="RasterEdge_Resource_Files/javascript/jquery.js" type="text/javascript"></script>

<body>

    <input type="button" value="Show" id="btn1" class="btnpop" onclick="wdpOpenPopupForm('', 700, 800)" />

    <input type="button" value="ShowFile" class="btnpop" id="btn2"
        onclick="wdpOpenPopupForm('pdf-1.pdf', 700, 800)" />

    <div id="popup">
        <div class="title" id="puptitle">
            <p data-title="EdgePDF" style="float:left"><span id="titlespan"></span></p>
            <button id="closepopup" style="float: right; width: 20px; height: 20px; " onclick="closepop()">X</button>
            <button id="maxpopup" style="float: right; width: 20px; height: 20px;" onclick="changesize()">A</button>
        </div>
        <iframe id="popframe" src="Home" height="700" width="800"></iframe>
    </div>
    <div id="mask_shadow"></div>

    <script type="text/javascript">
        window.onresize = function () {
            if (ismax) {
                $("#popframe").attr("height", $(window).height() - 28);
                $("#popframe").attr("width", $(window).width());
                $("#popup").css("width", $(window).width());
                $("#puptitle").css("width", $(window).width());
                $("#popup").css("top", "0px");
                $("#popup").css("left", "0px");
            }
        }
        function wdpOpenPopupForm(filesrc, height, width) {
            if (filesrc != '') {
                var srcVal = "Home";
                if (filesrc.indexOf('http') != 0)
                    srcVal += "?yourtarget=" + filesrc;
                else
                    srcVal += "?src=" + filesrc;
                $("#popframe").attr("src", srcVal);
            }
            $("#popframe").attr("height", height + "px");
            $("#popframe").attr("width", width + "px");
            $("#popup").css("width", width + "px");
            $("#puptitle").css("width", width + "px");
        }
        var ismax = false;
        var preheight;
        var prewidth;
        var preleft;
        var pretop;
        function changesize() {
            if (ismax) {
                $("#popframe").attr("height", preheight);
                $("#popframe").attr("width", prewidth);
                $("#popup").css("width", prewidth);
                $("#puptitle").css("width", prewidth);

                $("#popup").css("top", pretop);
                $("#popup").css("left", preleft);

                ismax = false;
                $("#maxpopup").text("A");
            } else {
                ismax = true;

                preheight = $("#popframe").attr("height");
                prewidth = $("#popframe").attr("width");

                pretop = $("#popup").css("top");
                preleft = $("#popup").css("left");

                $("#popframe").attr("height", $(window).height() - 28);
                $("#popframe").attr("width", $(window).width());
                $("#popup").css("width", $(window).width());
                $("#puptitle").css("width", $(window).width());
                $("#popup").css("top", "0px");
                $("#popup").css("left", "0px");
                $("#maxpopup").text("N");
            }
        }
        function closepop() {
            if (ismax)
                changesize();
            $(document.body).trigger("click");
        }

        //pop up
        !(function ($, window, document, undefined) {

            var Plugin = function (elem, options) {
                this.$elem = elem;
                this.$btn = $('.btnpop');
                this.$oMask = $('#mask_shadow');
                this.$oTitle = this.$elem.find('.title');
                this.$title_text = this.$oTitle.find('p');
                this.$close = this.$oTitle.find('span');

                this.b_stop = true;
                this.page_w = $(window).width();
                this.page_h = $(window).height();

                this.defaults = {
                    ifDrag: false,
                    dragLimit: false
                };

                this.opts = $.extend({}, this.defaults, options);
            };

            Plugin.prototype = {
                inital: function () {
                    var self = this;

                    this.$title_text.text(this.$title_text.attr('data-title'));
                    this.$elem.css({ left: (this.page_w - this.$elem.width()) / 2 });

                    this.$elem.on('click', function () {
                        return false;
                    });

                    this.$btn.on('click', function () {
                        self.popbox();

                        self.b_stop = false;

                        return false;
                    });

                    this.$close.on('click', function () {
                        self.closePopbox();

                        return false;
                    });

                    $(document.body).on('click', function () {
                        self.closePopbox();
                    });

                    this.$oTitle.on('mousedown', function (ev) {
                        if (self.opts.ifDrag) {
                            self.drag(ev);
                        }

                        return false;
                    });
                },

                popbox: function () {
                    var self = this;

                    this.$oMask.show().animate({ opacity: 1 });;
                    this.$elem.show().animate({ opacity: 1, top: 20 }, function () {
                        self.b_stop = true;
                    });
                },

                closePopbox: function () {
                    var self = this;

                    if (this.b_stop) {
                        this.$oMask.animate({ opacity: 0 }, function () {
                            $(this).hide();
                        });;
                        this.$elem.animate({ opacity: 0, top: 150 }, function () {
                            $(this).hide();
                        });
                    }
                },

                drag: function (ev) {
                    var self = this;
                    var oEvent = ev || window.event;
                    var disX = oEvent.clientX - this.$elem.offset().left;
                    var disY = oEvent.clientY - this.$elem.offset().top;
                    var _move = true;

                    $(document).mousemove(function (ev) {
                        if (_move) {
                            var oEvent = ev || window.event;
                            var offset_l = oEvent.clientX - disX;
                            var offset_t = oEvent.clientY - disY;

                            if (self.opts.dragLimit) {
                                if (offset_l <= 0) {
                                    offset_l = 0;
                                } else if (offset_l >= self.page_w - self.$elem.width()) {
                                    offset_l = self.page_w - self.$elem.width();
                                }

                                if (offset_t <= 0) {
                                    offset_t = 0;
                                } else if (offset_t >= self.page_h - self.$elem.height()) {
                                    offset_t = self.page_h - self.$elem.height();
                                }
                            }

                            self.$elem.css({ left: offset_l, top: offset_t });
                        }
                    }).mouseup(function () {
                        _move = false;
                    });
                },

                constructor: Plugin
            };

            $.fn.popup = function (options) {
                var plugin = new Plugin(this, options);

                return plugin.inital();
            };

        })(window.jQuery, window, document);
    </script>
    <script>
        $(function () {
            $('#popup').popup({ ifDrag: true, dragLimit: true });
        });
    </script>
</body>
</html>

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.

Copyright © <2000-2023> by <RasterEdge.com>. All Rights Reserved. RasterEdge.com is professional ASP.NET PDF Viewer, MVC PDF Viewer provider for document, content and imaging solutions, available for ASP.NET AJAX, Silverlight, Windows Forms as well as WPF. We are dedicated to provide powerful & profession imaging controls and components for capturing, viewing, processing, converting, compressing and storing images, documents and more.

ASP.NET MVC PDF Viewer Control How to open, view, edit PDF document on modal popup windows in web page using C#