ASP.NET CORE SelectPdf - Load external css - asp.net-core

I'me using Selectpdf to generate and save PDF files by HTML page.
I'm also using bootsrap in my page. I'm loading via https, and I want load locally.
I have this:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
I want this:
<link rel="stylesheet" media="all" href="lib/bootstrap-5.1.3-dist/css/bootstrap.min.css" crossorigin="anonymous"/>
<script src="lib/bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
But when I try load locally, files are not load.
Someone can help me?

Related

Kendo Vue Charts Native CDN Install Errors

According to documentation these are the files that need to be added
<script src="https://unpkg.com/#progress/kendo-vue-charts#latest/dist/cdn/js/kendo-vue-charts.js"></script>
<script src="https://unpkg.com/#progress/kendo-vue-intl#latest/dist/cdn/js/kendo-vue-intl.js"></script>
<script src="https://unpkg.com/#progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
// Load the Kendo Default Theme
<link rel="stylesheet" href="https://unpkg.com/#progress/kendo-theme-default#latest/dist/all.css">
// Load the Kendo Bootstrap Theme
<link rel="stylesheet" href="https://unpkg.com/#progress/kendo-theme-bootstrap#latest/dist/all.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/#progress/kendo-theme-default#latest/dist/all.css">
<link rel="stylesheet" href="https://unpkg.com/#progress/kendo-theme-bootstrap#latest/dist/all.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://unpkg.com/#progress/kendo-vue-charts#latest/dist/cdn/js/kendo-vue-charts.js"></script>
<script src="https://unpkg.com/#progress/kendo-vue-intl#latest/dist/cdn/js/kendo-vue-intl.js"></script>
<script src="https://unpkg.com/#progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
The Error is
Cannot read properties of undefined (reading 'support') at Module. (kendo-vue-charts.js:1:28556)
The order of the script tags is wrong - we need to put the drawing script tag first, then the intl and last but not least the charts script.

Vue app works when served via npm's serve function, but blank page when served via golang net/http package

I have a Vuejs app that I'm trying to serve via a Golang backend that will also serve the app's API.
When I build and run the Vuejs via "npm run build" and "serve -s dist" and go to the static server's location, everything loads up fine. But when I try to load it through the Golang backend, even though the index.html loads (as verified by checking the source in the browser), I just get a blank white page.
Is this approach not possible? Am I going about this all wrong?
Here is how I am serving the "dist" folder via Golang.
http.Handle("/", http.StripPrefix("/", http.FileServer(http.Dir(htmlFolder+"/dist/"))))
My index.html file:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=/favicon.ico>
<title>TestApp</title>
<link href=/css/app.52c62e82.css rel=preload as=style>
<link href=/css/chunk-vendors.7724753e.css rel=preload as=style>
<link href=/js/app.9a3ab992.js rel=preload as=script>
<link href=/js/chunk-vendors.6808fe3a.js rel=preload as=script>
<link href=/css/chunk-vendors.7724753e.css rel=stylesheet>
<link href=/css/app.52c62e82.css rel=stylesheet>
</head>
<body>
<noscript>
<strong>We're sorry but TestApp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id=app></div>
<script src=/js/chunk-vendors.6808fe3a.js></script>
<script src=/js/app.9a3ab992.js></script>
</body>
</html>
Edit:
I also tried using gorilla/mux example here:
https://blog.questionable.services/article/vue-react-ember-server-golang/
And here is my "dist"'s folder structure.
press F12 on your browser and go to console tab to view the error
Turns out I just needed to empty my caches. I was using FN5 when refreshing assuming that that would reload it.

NonFactors.Grid.Mvc6 click not fires

I am attempting to implement paging in my simple ASP.NET Core 2.2 application.
I executed the command Install-Package NonFactors.Grid.Mvc6 to install the package and followed all the installation steps described in this page.
I can see the data displayed in grid but when I click to show the next records the paging in not moving to show the other records.
I am missing any scripts?
I made the test followed the tutorial that you provided , but it worked well. Make sure your styles and scripts are saved as follows:
Then include grid styling sheet and grid scripts to _Layout.cshtml like below:
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link href="~/Content/MvcGrid/mvc-grid.css" rel="stylesheet">
</environment>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/MvcGrid/mvc-grid.js"></script>
<script>
[].forEach.call(document.getElementsByClassName('mvc-grid'), function (element) {
new MvcGrid(element);
});
</script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>

angularjs routing is not working no error found

what seems to be wrong here i dont get any error but at the same time no progress in routing. .
index.html
<!DOCTYPE html>
<html>
<head>
<title>My Angular App</title>
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/style.css">
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="/myAngularApp/css/angular/angular.min.js"></script>
<script src="/myAngularApp/css/mainpage.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/bootstrap/ui-bootstrap-tpls-2.2.0.min.js"></script>
</head>
<body ng-app="myApp">
<h1> this is index.html </h1>
<div ng-view></div>
</body>
</html>
mainpage.js // where my controller is
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'ngResource', 'ui.bootstrap']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'index.html'
})
.when('/home', {
templateUrl : 'homepage.html'
})
.otherwise({
templateUrl : 'index.html'
});
});
when i load '/' in my browser nothins is happening same with /home i dont know where did i get wrong since there is no error in my console
The template for a route should be a partial view. Here index.html is the root of the single page app , this page should never reload (unless you want to destroy and rebootstrap the app). Try changing the templateUrl for / to a file that just has <h2> HELLO WORLD!</h2> and monitor the console (dev tools) for any 404 errors related to fetching the template
I think problem is with your javascript file name. In index you mentioned mainpage.js and in description its homepage.js.
Edit : Okay. Then try arranging files list like
<script type="text/javascript" src="/myAngularApp/css/angular/angular.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/bootstrap/ui-bootstrap-tpls-2.2.0.min.js"></script>
<script src="/myAngularApp/css/mainpage.js"></script>
As mentioned in the answer by user Priyanka, the filename can be the issue. But that should produce an error on the console and according to you there was no error on the console.
The other possible reason can be the sequence in which you've imported your files. I generally sequence my files this way -
<head>
<!-- 1. External CSS Libraries likes bootstrap, jquery -->
<!-- 2. My Application specific CSS files -->
<!-- 3. External JS libraries like Angular, bootstrap, JQuery -->
<!-- 4. My Application specific JS files like my controllers, services, directives etc.
</head>
Again the sequence in which you import the external JS libraries may also cause problems.

ReferenceError: dhtmlXCellObject is not defined / TypeError: this._hdrInit is not a function

I have a map with google maps api, and a table, which I want to connect to the map with dHTMLx Layout. (I'm a beginner, so sorry about the question, but I haven't found any solution yet, and I already checked the references in the code) I have this code:
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<title>Map</title>
<link rel="stylesheet" type="text/css" href="dhtmlxlayout_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="dhtmlxlayout.css">
<script type="text/javascript" src="dhtmlxlayout.js"></script>
<script type="text/javascript" src="dhtmlxcommon.js"></script>
<script type="text/javascript" src="dhtmlxcontainer.js"></script>
<script type="text/javascript" src="dhtmlxlayout_deprecated.js"></script>
</head>
<body>
<script>
var dhxLayout = new dhtmlXLayoutObject(document.body, "2U");
dhxLayout.cells("a").setText("Térkép");
dhxLayout.cells("a").attachURL("googleapi.html");
dhxLayout.cells("b").setText("Táblázat");
dhxLayout.cells("b").setWidth(500);
dhxLayout.cells("b").attachURL("list.html");
</script>
</body>
What does the 2 error means? ReferenceError: dhtmlxCellObject is not defined & TypeError: this._hdrInit is not a function both in dhtmlxlayout.js
What should I correct? The googleapi.html and list.html are working fine separate.
Thanks!
There is a special option for using google maps in dhtmlx layout - attachMap
Online sample
and
Documentation
will help you
By the way Google doesn't allow to use its servise in iframes
Plus if you don't use deprecated dhtmlx methods, you don't need to include this file in the page