Multiple Documents on one page
Question asked by John Tsombakos - 4/7/2020 at 7:39 AM
Answered
Is there a way to have multiple DocumentUltimate documents on one page? This is in a MVC application. We want to show thumbnails of (a specific set of) documents on one page, and have the user select one to show fully on another page. I know there needs to be things rendered in the header of the page (with @this.RenderHead(document) ), but not sure if having multiple of those on one page is possible. Is there an alternate way to do this?

Thanks.

1 Reply

Reply to Thread
0
Cem Alacayir Replied
Employee Post Marked As Answer

You can have multiple instances of DocumentViewer on one page but I guess you are asking to have one instance of DocumentViewer but load different documents in that DocumentViewer? 


Firstly you can not change the loaded document from client-side, you need to hit server because RenderBody does some preparation for each document passed. 


So you can either have pop-up window with iframe which loads url of a dedicated host page for DocumentViewer. Then you can load different documents by passing document name or some kind of id to your url via querystring. 


Or you can use a PartialView with RenderBody for your DocumentViewer and put RenderHead in your main view. Then you can reload PartialView with jQuery everytime you need to change the loaded document.

https://demos.gleamtech.com/documentultimate/AspNetMvcCS/#DocumentViewer/UsingPartial



More details:

It is already possible to get RenderHead in your main page’s / layout’s <head> tag.

You can either use a section or you can simply put a RenderHead(new DocumentViewer()) with empty model in your layout’s <head> tag.


See below for the all the details.


Regarding RenderHead method:


  • It should be only inside <head> tag and should not be added multiple times inside <body> tag. This is how browsers work.


  • if you are calling RenderHead multiple time in the same page, the same JS includes will be put in the page and browser will misbehave (you could see errors in the console).



More information regarding rendering DocumentViewer in ASP.NET MVC/Core:


Make sure you are not adding the result of RenderHead multiple times to the same page, it can be called only once where RenderBody can be called multiple times.

So probably you are calling RenderHead in wrong location. And this causes the strange issue with the browser.

RenderHead should be always placed inside <head> tag of your page. You can’t put it inside <body> tag or some random place.


<!DOCTYPE html>


<html>

<head>

    <title>Overview</title>

@this.RenderHead(Model)

</head>

<body style="margin: 20px;">

    @this.RenderBody(Model)

</body>

</html>


If you are using MVC layouts then it’s already possible to make RenderHead go inside <head> tag:

https://demos.gleamtech.com/documentultimate/AspNetMvcCS/#DocumentViewer/UsingLayout


Or you can use partial views:

https://demos.gleamtech.com/documentultimate/AspNetMvcCS/#DocumentViewer/UsingPartial


More info on using ASP.NET MVC/Core layouts:


This is your Layout/Template/Master page:


<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title</title>

@if (IsSectionDefined("LayoutHead"))

    {

        @RenderSection("LayoutHead")

    }

</head>

<bodystyle="margin: 20px;">

<divstyle="width: 1000px; height: 800px; border: 1px dashed black">

        Parent layout

        @RenderBody()

</div>

</body>

</html>


This is the page which you host DocumentViewer:


@using GleamTech.AspNet.Mvc

@using GleamTech.DocumentUltimate.AspNet.UI

@model DocumentViewer


@{

    ViewBag.Title = "UsingLayout";

    Layout = "~/Views/Shared/_Layout.cshtml";

}


@section LayoutHead {

    @this.RenderHead(Model)

}


@this.RenderBody(Model)


So as you see RenderHead is propogated to the parent Template via using a “section”.

So your parent template does not know about DocumentViewer it only knows to render LayoutHead section if it’s defined in a child.


Is there any other way to add  RenderHead?


Just call RenderHead(new DocumentViewer()) in your parent template , so you don’t need to pass your actual model, just pass an empty instance.

This is because as of current version RenderHead does not use instance specific properties (but may use in future, so the more correct approach is the above one)

Reply to Thread