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)