search

Atalasoft / web-document-viewer-demo

Atalasoft DotImage Web Document Viewer demo application
http://atalasoft-viewer-demo.azurewebsites.net/
10 stars 15 forks source link

Document doesnt load in razor view #13

Closed aramka closed 7 years ago

aramka commented 7 years ago

Im trying to get the web document viewer to work in an mvc razor view. Is this scenario supported?

I have an Index.cshtml file inside a directory structure like

root-->views-->DocViewerInTypicalMvcDirectoryStructure

The out of the box VS asp.net mvc project template creates the directories like this.

My Index.cshtml looks like

<html>
<head>
    <title></title>
    <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery-ui-1.8.14.min.js" type="text/javascript"></script>
    <script src="~/Scripts/atalaWebDocumentViewer.js" type="text/javascript"></script>
    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <link href="~/Scripts/atalaWebDocumentViewer.css" rel="stylesheet" />
    <script type="text/javascript">

    $(function () {
        try {
            // URL that points to our Web Document Viewer handler

            var serverUrl = '../../WebDocumentViewrHandler.ashx';

            // Initialize Web Viewing

            var viewer = new Atalasoft.Controls.WebDocumentViewer({
                parent: $('.atala-document-container'),
                toolbarparent: $('.atala-document-toolbar'),
                serverurl: serverUrl,
                allowannotations: true
            });

            // Initialize Thumbnail Viewer

            var thumbs = new Atalasoft.Controls.WebDocumentThumbnailer({
                parent: $('.atala-document-thumbnailer'),
                serverurl: serverUrl,

                // Note that specify relative URL to our

                // sample document on server here:

                documenturl: '../../Invoice.pdf',
                viewer: viewer
            });

        } catch (error) {
            alert('Thrown error: ' + error.description);
        }
    });
    </script>
</head>
<body>
    <h1>Document viewer finds the handler when page is in root</h1>
    <div>
        <div class="atala-document-toolbar" style="width: 1000px;"></div>
        <div class="atala-document-thumbnailer" style="width: 200px; height: 500px; float: left"></div>
        <div class="atala-document-container" style="width: 800px; height: 500px; float: left"></div>
    </div>
</body>
</html>

The page gets served up and I see the handler(ashx) is hit. It looks like the viewer gets initialized, it turns the div into a viewer with thumbs, but the image never gets loaded. Also, there are no errors, 404, 500, etc, in the dev tools network tab.

Also, if I put the same code above into a regular html file in the root of the project, or a sub directory, and adjust the relative paths accordingly then I can get it to work. But I cannot get the Index.cshtml to work.

I've cloned your demo and it does not use razor views, cshtml. Nor does it use the typical asp.net mvc scaffolded directory structure. It uses an html file in the root.

Will the document viewer work in cshtml files, razor views, in the typical ( typical-scaffolded VS ASP.NET MVC project template) folder structure?

I have a github repo here

git@github.com:aramka/AtalasoftWebDocumentViewer.git

That illustrates the issue.

Any insight or direction is greatly appreciated.

Thank You.

gennady-ermakov commented 7 years ago

Hi @aramka, Thanks for your input and interest in WDV in general. I've run through your sample. Long story short, it's happened because of the issue in our code which appeared itself because jquery is included to the page twice in this particular sample.

First time jquery is included directly in DocViewerInTypicalMvcDirectoryStructure, right before WDV script. We are capturing jQuery gloabal variable to our local varable("$" as a standart practice) to avoid global scope naming conflicts.

Then Jquery is included second time from _Layout.cshtml(@Scripts.Render("~/bundles/jquery")) and the global jQuery variable gets overridden with the new instance. After that moment all our internal checks of "instanceof jQuery" are broken and it leads to the incorrect pages load.

Workaround would be to include Jquery only once. But the drawback is that since WDV requires jquery to be already defined on the page, it will be uncomfortable to include WDV to the particular page and still have scripts incusion on the bottom of html page.

Hope that helps,

aramka commented 7 years ago

I have removed the _Layout.cshtml from the project completely and I have removed all jquery bundles. Now, jquery is loaded only once in the head of the page.

But the behavior is the same. The image never loads. I checked in the changes if you can look.

gennady-ermakov commented 7 years ago

Hi @aramka, new version is working for me, except path to the document is not correct - 'documenturl: '../../Invoice.pdf'' causes error on loading document metadata - path goes out of app virtual directory.

I've modified it to the 'documenturl: '~/Invoice.pdf'' and it works for me. Also i'd suggest to subscribe to document lifecycle events to make process more visible.

I've created a pull request demonstrating the changes - https://github.com/aramka/AtalasoftWebDocumentViewer/pull/1 hope that will help this time.

If you have a specific use case or want to discuss other WDV features feel free to contact us here or our support - usually they are very friendly. p.s. we are trying to rollout API reference for javascript side. It's targeted for upcoming release, but most features are presented in 10.7 so you could take a look in it if you'll be interested - https://atalasoft.github.io/web-document-viewer

aramka commented 7 years ago

Yes, this issue looks like its fixed. I have merged your changes.

Thank You.