How to generate PDF with Rotativa including charts from C3JS Asp.net - javascript

I'm working on dashaboard stats on one of my projects, and I'm using the C3js to add charts to my dashboard, and all it works fine,
but when I wanna generate a pdf of this dashboard using Rotativa Plugin and wkhtmltopdf, but it doesn't work properly, it generates a pdf with data but not showing charts.
Conf Application:
Server-Side : ASP.Net MVC5
Client-Side :Javascript, Rotativa, C3js

In my similar situation, I found that Rotiva wasn't going out and getting all my included files, and/or was taking too long.
So I decided what was vital, and put that into a "static layout" that contained everything I needed inline. This might include CSS files you need to render correctly, or javascript files that you include. If you go to those files, you can copy and paste their contents into style or script tag in this Static Layout, and now Rotativa will have those payloads without having to go and get them.
//Layout Static
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<meta charset="utf-8" />
<style type="text/css">
body {
color: white;
}
/*Whatever style info needed*/
</style>
<script type="text/javascript">
/*Whatever code needed*/
</script>
</head>
<body>
<div class="container">
#RenderBody()
</div>
</body>
</html>
I put this into a Layout that replaced my standard Layout just for the rotiva exporting views.
Then, I made a copy of the view for rotativa PDF output, where it used this static layout.
#model SomeModel
#{
ViewBag.Title = "Some Title";
Layout = "~/Views/Shared/_LayoutStatic.cshtml";
}

Related

When I have to use #section scripts?

My current structure has a layout with header, body and footer. Inside the body load a view using ajax to call for a action controller returning a Json and painting a tree view. When user click on the tree view the footer should load the detailed information. But isnt working, my guess is because the scripts section isnt render properly.
Right now the script are in the layout without bundles or anything and work ok on the Main body because I use Jquery and a Tree to load the Json data.
But in the partial View get an error. I could write a #section scripts area and copy all the script from the layout in the Partial View but why should I duplicate the code?
The worst part is only give me problem in the production enviroment ... on my devolpment enviroment works ok.
So the questions:
Why the main view can see the scripts define on the Layout but the Partial View Doesnt?
Why my development enviroment work ok, but productions doesnt?
What should I do to solve this?
EDIT: More testing.
This is a test View, this render in the Body. But I need include script section otherwise the dialog doesnt show, even when layout have the scripts too.
#{
ViewBag.Title = "TreeDetails";
}
<html>
<head>
<title>#ViewBag.Title</title>
</head>
<body>
<h2>TEST PAGE</h2>
<script>
// Your code goes here.
$(document).ready(function () {
console.log("before dialog");
$("#dialog").dialog();
console.log("after dialog");
})
</script>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
#section scripts {
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
}
It seems a run time error due to an unrecognized jquery function.. try to move your link reference to jquery from your view #section area in the layout header..

Importing an HTML template in Grails

I'd like to pull in a static HTML file that I'll use as an Underscore template in my front-end JavaScript. I've tried the following with no luck:
<link rel="import" href="${resource(plugin: 'my-app-name', dir: 'tpl', file: 'foo.html')}"/>
<g:external dir="tpl" file="foo.html" type="html" />
The file sits at web-app/tpl/foo.html.
The ultimate goal is to use the new HTML import syntax to access the file's contents via JavaScript.
Why is that file at web-app/tpl?
Here's what you can do to import that template:
Move it to grails-app/views/tpl/.
Change the file name to _foo.gsp.
Use <g:render template="/tpl/foo" /> in your view to pull in that HTML.
Read more about the render tag here.
Also you can use an meta tag.
<meta name="layout" content="main"/>
And in the main.gsp tha must be at the view/layout/main.gsp you can use grails tags:
<g:layoutHead/>
and
<g:layoutBody/>
By the name you can understand that layoutHead insert head of your page to this layout. layout body insert body of page to this layout.
The following worked for me, though I'm not sure if it's the best solution: In UrMappings.groovy: static excludes = ['tpl/foo.html']. This made the link tag work in page.gsp <link rel="import" href="${resource(plugin: 'my-app-name', dir: 'tpl', file: 'foo.html')}"/>.

How to specify, different JS file for different view page in play framework?

How do we define different javascript files for different view pages in play framework??
One way is to=>
#main(title, """
#*JS CODE*#
"""{
//Template Codes
}
And in main template, use it like=>
#(title,stringJS){
<script>
#Html(stringJS)
</script>
}
But what if the JS code is to be used in not all pages but selected few, the dev can't copy the JS code in every relative view page.In my case all the javascripts are loaded on the footer, which is a seperate template.
How do we solve this problem??
Any help is appreciated, thank you!
It's described in the Common templates use cases doc , section : 'moreScripts and moreStyles equivalents'
In very short it works like this (view)
#moreScripts = {
<script type="text/javascript">alert("hello !");</script>
}
#moreStyles = {
<style>background: pink;</style>
}
#main("Title", moreScripts, moreStyles){
Html content here ...
}
and in main.scala.html start with:
#(title: String, moreScripts: Html = Html(""), moreStyles: Html = Html(""))(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
#moreStyles
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
#moreScripts
</head>
<body>
#content
</body>
</html>
I came up with my solution,thanks to this Helpful SO post, what I did was:
#main(title, """
#*NO JS CODE, but declaration itself*#
<script src="/assets/javascripts/libs/main.js" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/libs/main.js")" type="text/javascript"></script>//Doing this gives out errors, so I had to hardcode the "src" location
"""{
//Template Codes
}
If there is more efficient way to solve this issue, ideas are welcome, because hard-coding src isn't an efficient way of dealing with this issue, imo.

is there anything like _VIewEnd?

I have a javascript file that I have included in _ViewStart.cshtml like below but I want it to append in the end of view.
#if (!Request.Browser.IsMobileDevice)
{
<script type="text/javascript" src="#Url.Content("~/scripts/example.js")"></script>
}
There is no layout to the view if its ajax call and there are alot of views which I will have to change if there is not simple way of appending this js file in the end of view.
If you don't currently have a layout for mobiles then you could introduce a new layout:
_Layout.Mobile.cshtml:
#RenderBody()
<script type="text/javascript" src="#Url.Content("~/scripts/example.js")"></script>
MVC4 will recognise the .Mobile part of the layout name and use that for mobile devices.
And then your _ViewStart.cshtml will simply be:
#{ Layout = "~/Views/Shared/_Layout.cshtml"; }

Write css for individual page in mvc3 project

i thing i put something wrong here sorry for that if you confused.
i want to put Javascript or Css in the Head of my page [who is render in browser].
when i try to put them then i found that he inside of Body not inside of head tag.
i know that i can easily put in head if i not inherit them from master page.
but how i can put on my page if i inherit them from master page.
i want a sollution for MVC 3 project and my page is written using Razor viewenzine.
In the head section of your layout page, add a
RenderSection("head")
call. Then, in your Razor view, add
#section head {
#myincludemarkup
}
Where "myincludemarkup" of course is the html markup of your script/stylesheet references.
edit:
The section in your layout page (master page) could look something like this:
<head>
#RenderSection("head")
</head>
This would force each and everyone of your views to define a section called "head" by writing the code at the top of my answer, #section etc.
If you want the section optional in your viewpages, you can write
<head>
#RenderSection("head", optional:true)
</head>
Use this page for reference:
http://weblogs.asp.net/scottgu/archive/2010/07/02/introducing-razor.aspx
edit: to use your own code:
#inherits System.Web.Mvc.WebViewPage<dynamic>
#using Razor
#using Razor.Models
#{
View.Title = "Index";
LayoutPage = "~/Views/Shared/_Layout.cshtml";
}
<h2>#View.Message</h2>
#{
UserManager.product prod = UserManager.getUserinfo();
}
#prod.Price
#prod.Title
#prod.ID
<h2></h2>
#section head {
#myincludemarkup
}
Place a content area in the head section. Then you can add code there in any content page.

Categories

Resources