I have an ASP.Net MVC 5 project using Infragistics IgniteUI. When I load igniteui charts or grids using my bundled and minified infragistics scripts and stylesheets, I get errors. When I use the unbundled versions, I do not get the errors.
UPDATE I also tried bundling with minification disabled, which still produces the errors.
Why is it looking for images in the /bundles/ path when I use the bundled files?
What can I do differently, to prevent these errors while using bundling?
Errors
The controller for path '/bundles/images/ui-icons_888888_256x240.png' was not found or does not implement IController.
The controller for path '/bundles/images/igLoadingSmall.gif' was not found or does not implement IController.
BundleConfig
#region Scripts
...
bundles.Add(new ScriptBundle("~/bundles/igniteui_full_js").Include(
"~/Scripts/IgniteUI/js/infragistics.core.js",
"~/Scripts/IgniteUI/js/infragistics.dv.js",
"~/Scripts/IgniteUI/js/infragistics.lob.js",
"~/Scripts/IgniteUI/js/infragistics.loader.js"
));
#endregion
#region Styles
...
bundles.Add(new StyleBundle("~/bundles/igniteui_full_css").Include(
"~/Content/IgniteUI/css/themes/infragistics/infragistics.theme.css",
"~/Content/IgniteUI/css/structure/infragistics.css"
));
#endregion
Layout Head Razor Code
<!-- Header Styles-->
#Styles.Render(
"~/bundles/css",
"~/bundles/igniteui_full_css"
)
<!-- Header Scripts-->
#Scripts.Render(
"~/bundles/jquery",
"~/bundles/ajax",
"~/bundles/modernizr",
"~/bundles/bootstrap",
"~/bundles/site",
"~/bundles/igniteui_full_js"
)
Unbundled Head - Doesn't produce Errors
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Header Styles-->
<link href="/Content/bootstrap-multiselect.css" rel="stylesheet"/>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/Dashboard.css" rel="stylesheet"/>
<link href="/Content/IgniteUI/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"/>
<link href="/Content/IgniteUI/css/structure/infragistics.css" rel="stylesheet"/>
<!-- Header Scripts-->
<script src="/Scripts/jquery-2.2.0.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/validator.js"></script>
<script src="/Scripts/jquery.browser.mobile.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/bootstrap-multiselect.js"></script>
<script src="/Scripts/site.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.core.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.dv.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.lob.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.loader.js"></script>
</head>
Bundled Head - Produces Errors
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Header Styles-->
<link href="/bundles/css?v=DOErVhQffVVJij5tRivXIDYvvea9XjXYoWkD6iph4yo1" rel="stylesheet"/>
<link href="/bundles/igniteui_full_css?v=oMN-4N9H6hCThCn7D6WHIiusJgqj7Qk9KfeKje7iGdI1" rel="stylesheet"/>
<!-- Header Scripts-->
<script src="/bundles/jquery?v=3wcNYlWV3nKyr3gSm0Ry9LrwfpXaysXErYMcQN9fkcw1"></script>
<script src="/bundles/ajax?v=jmjhTWiGrUMlGQS2hayanNTeGVZ9FC7i0HnCBpQ4IZ81"></script>
<script src="/bundles/modernizr?v="></script>
<script src="/bundles/bootstrap?v=kNIhecyepPMk8f_DFvoGkBz2T4zIItHFFHq2488ZHwY1"></script>
<script src="/bundles/site?v=stk1SwAEJZvoHt7p5QZ9202zmQ1IeBvXWmqmxFpIXI01"></script>
<script src="/bundles/igniteui_full_js?v=6y5k9Wl7x2PlzNsRN0azCfVIh1oR8SLPZohqnlbLrNo1"></script>
</head>
View
#using Infragistics.Web.Mvc
#using MyProject.Web.Website.ViewModels
#model ReportViewModel
#(Html.Infragistics()
.Grid(Model.ReportData.AsQueryable())
.ID("grid")
.AutoGenerateColumns(true)
.AutoGenerateLayouts(true)
.DataBind()
.Render()
)
I believe the issue is that you need a CssRewriteUrlTransform because the bundling changes where the resources should be referenced from.
bundles.Add(new StyleBundle("~/bundles/igniteui_full_css")
.Include("~/Content/IgniteUI/themes/infragistics/infragistics.theme.css", new CssRewriteUrlTransform())
.Include("~/Content/IgniteUI/structure/infragistics.css", new CssRewriteUrlTransform()));
On a side note, you can remove the infragistics.loader.js from your script bundle as you're bundling all of the combines script files, thus the loader is not needed.
Related
I have a ASP.NET MVC solution in .NET 5 with a simple _Layout.chhtml:
<!DOCTYPE html>
<html>
<head>
<environment include="Development">
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true"/>
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true"/>
</environment>
</head>
<body>
#RenderBody()
<environment include="Development">
<script type="text/javascript" src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
<script type="text/javascript" src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
#RenderSection("Scripts", required: false)
</body>
</html>
I expect that in Development mode (running from VS 2019) minimized versions of JavaScript and CSS are NOT loaded.
However every time I start the application from Visual Studio all variants both not minimized and minimized (both JavaScript and CSS) are loaded into pages. Why?
Do I misunderstand the concept of <environment exclude="Development"> tag?
<environment exclude="Development"> is a so called Razor tag helper.
In order to activate Razor tag helpers a special directive needs to be used on a Razor page:
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Tag helpers do not work without this.
Or better to add a list of # directives in a separate file named _ViewImports.cshtml
For example:
#using MyApp
#namespace MyApp.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
I am setting up my application to bundle css and js files when not in development, and not bundle when in development.
To do that I first have a bundleconfig.json file:
[
{
"outputFileName": "wwwroot/css/bundle.min.css",
"inputFiles": [
"wwwroot/lib/bootstrap/bootstrap.min.css",
"wwwroot/lib/jqueryui.jquery-ui.min.css"
]
},
{
"outputFileName": "wwwroot/js/bundle.min.js",
"inputFiles": [
"wwwroot/lib/jquery/jquery.min.js",
"wwwroot/lib/jqueryui/jquery-ui.min.js",
"wwwroot/lib/bootstrap/dist/js/bootstrap.bundle.js"
]
}
]
Then in my page I have a head tag:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewBag.Title</title>
<environment exclude="development">
<link rel="stylesheet" href="~/css/bundle.min.css" asp-append-version="true" />
<script type="text/javascript" src="~/js/bundle.min.js" asp-append-version="true"></script>
</environment>
<environment include="development">
<link rel="stylesheet" href="~/lib/bootstrap/bootstrap.css" asp-append-version="true" />
<link rel="stylesheet" href="~/lib/jqueryui/jquery-ui.css" asp-append-version="true" />
<script type="text/javascript" src="~/lib/jquery/jquery.js" asp-append-version="true"></script>
<script type="text/javascript" src="~/lib/jqueryui/jquery-ui.js" asp-append-version="true"></script>
<script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.bundle.js" asp-append-version="true"></script>
</environment>
</head>
This all works fine. I'm just not a fan of the fact that I have to duplicate the list of files in the budingconfig.json and in the development environment tag in the header.
In WebForms project I can use <%: Scripts.Render("...") %> and it will generate links for each item in the bundle if in development mode, and it will generate 1 link for the bundle if not in development mode. Is something like this available in .net core MVC projects as well?
There is no build-in way to do this in ASP.NET Core. However it is pretty straight forward to roll your own.
Mad Christensen has build an unpacker for MVC5 and here is a gist that adapts it to .NET Core.
You use it like this:
<environment names="Development">
#Bundler.Unpack(HostingEnvironment.ContentRootPath, "/js/site.min.js")
</environment>
However, if you have no specific reason to include each file other than debugging you can also rely an sourcemaps. There is a flag in the bundleconfig for this. ( "sourceMap": true )
You can try a TagHelper like the following
https://github.com/meziantou/Meziantou.AspNetCore.BundleTagHelpers
That will help you what you want to achieve. Instead of writing following type of code
<environment names="Development">
<link rel="stylesheet" href="~/css/site1.css" />
<link rel="stylesheet" href="~/css/site2.css" />
<link rel="stylesheet" href="~/css/site3.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
You can only write this:
<bundle name="wwwroot/css/site.min.css" />
In production, it uses the minified file and appends the version in
the query string (same behavior as asp-append-version).
In development, it uses all input files and does not append version.
Trying to learn webix (and javascript at all). Usually the common practice is loading javascript libraries at the end of the body.
The webix quick start doc says:
<!DOCTYPE HTML>// specifies document type
<html>
<head>
<link rel="stylesheet" href="../../codebase/webix.css" type="text/css">
<script src="../../codebase/webix.js" type="text/javascript"></script>
</head>
<body>
e.g. it loads the library in the head.
Questions:
the webix lib should be loaded in the <head>?
if yes, where should be loaded jQuery and twitter bootstrap?
and in what order?
You can place webix.js anywhere on the page. Just be sure that JS code that uses Webix API is used after webix.js loading
Normally scripts are placed at the end of HTML file as they only add some interactivity to the page. In case of Webix UI, without webix.js you will not see any content on page at all, so there is no benefits from putting webix.js at the end of page.
As for jQuery - if you plan to use webix-jquery integration you need to load webix.js AFTER loading the jQuery ( at the head, or at the end of file, doesn't matter )
You need to follow the below syntax or process for using the webix.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans:300|Raleway|Roboto" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css">
<link rel="stylesheet" type="text/css" href="assets/css/app.css" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdn.webix.com/edge/webix.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" >
webix.ui({
view:"calendar",
id:"calendar1"
})
</script>
</body>
</html>
Any dependencies must load on top webix.js, so that you can use them in your JS file.
I am having problems setting up the Jasmine Test Framework from nuget in my MVC 5 project in VS2013.
I always get an error message when I run the SpecRunner.cshtml file. It keeps saying that the resource cannot be found but it doesn't specify which one.
Anyone know how to properly setup a standalone SpecRunner.cshtml (without needing to go through the index page)?
Here is what I currently have in my SpecRunner.cshtml
#{
Layout = null;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Toolkit - Tests</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="/Content/jasmine/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="/Content/jasmine/jasmine.css">
<script type="text/javascript" src="/Scripts/jasmine/jasmine.js"></script>
<script type="text/javascript" src="/Scripts/jasmine/jasmine-html.js"></script>
<script type="text/javascript" src="/Scripts/jasmine/boot.js"></script>
<script src="~/Scripts/AngularJS/angular.js"></script>
<script src="~/Scripts/AngularJS/angular-mocks.js"></script>
<script src="~/Scripts/AngularJS/angular-ui-router.js"></script>
<!-- include source files here... -->
<!--<script type="text/javascript" src="/Scripts/jasmine-samples/SpecHelper.js"></script>
<script type="text/javascript" src="/Scripts/jasmine-samples/PlayerSpec.js"></script>-->
<script src="~/Scripts/MyAngularJS/app.js"></script>
<script src="~/Scripts/MyAngularJS/controllers.js"></script>
<!-- include spec files here... -->
<!--<script type="text/javascript" src="/Scripts/jasmine-samples/Player.js"></script>
<script type="text/javascript" src="/Scripts/jasmine-samples/Song.js"></script>-->
<script src="~/Scripts/MyAngularJS/controllersTest.js"></script>
<script>
(function () {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
var htmlReporter = new jasmine.HtmlReporter();
jasmineEnv.addReporter(htmlReporter);
jasmineEnv.specFilter = function (spec) {
return htmlReporter.specFilter(spec);
};
var currentWindowOnload = window.onload;
window.onload = function () {
if (currentWindowOnload) {
currentWindowOnload();
}
execJasmine();
};
function execJasmine() {
jasmineEnv.execute();
}
})();
</script>
</head>
<body>
</body>
</html>
You could use Chutzpah. It is a JavaScript test runner which works fine with Jasmine. It is available as a plug-in for Visual Studio and is easy to setup. It also integrates with the Test Explorer of Visual Studio. The wiki explains the features and how it works.
I am pushing my static files to a CND for my web application. To do so I've used OmniFaces CDNResourceHandler that works fine. Except, my styles do not follow.
I am mapped as so :
javax.faces:jsf.js=http://.../jsf.js,
primefaces:primefaces.js=http://.../primefaces.js,
primefaces:jquery/jquery.js=http://.../jquery.js,
primefaces:jquery/jquery-plugins.js=http://.../jquery-plugins.js,
primefaces:idlemonitor/idlemonitor.js=http://.../idlemonitor.js,
primefaces-smoothness:theme.css=http://.../theme.css,
primefaces:primefaces.css=http://.../primefaces.css,
styles:main04.css=http://.../main04.css,
This works fine, except that my styles are all off. The rendered result is the same as when theme.css AND primefaces.css are not loaded.
If I remove these resources as being handled by the CDNResourceHandler, the page loads as desired. I can confirm that these files are being loaded by on the page (Inspect Element-> resources in web browser show that these are there and loaded).
Has anyone experienced PrimeFaces styles not working through CDN? Is there a way to get this to work?
My application runs on :
OmniFaces 1.6
Primefaces 3.5
Majorra 2.2
Glassfish 3.1.2.2 (also tried on Glassfish 4)
Edit 1
I have looked into this a bit further and it seems that the css files are not process : something with #{resources[]} within the CSS remains as such. This would be due to the file not meeting the Faces Servlet url-pattern. This leads me to believe to achieve what I am looking for I will need the CND resources to be processed...?
Edit 2
The weird thing is that the generated HTML has all the loaded resources. It just seems that the resources (Primefaces styles) are not processed if loaded via CDN.
This is the resources loaded when the page DOES NOT WORK. Everything is functional, except for the basic styles provided by Primefaces.
<link type="text/css" rel="stylesheet" href="http://.../theme.css" />
<link type="text/css" rel="stylesheet" href="http://.../primefaces.css" />
<link type="text/css" rel="stylesheet" href="http://.../main04.css" />
<link type="text/css" rel="stylesheet" href="http://.../main_compact.css" />
<link type="text/css" rel="stylesheet" href="http://.../ironmanCompact.css" />
<script type="text/javascript" src="http://.../jquery.js"></script>
<script type="text/javascript" src="http://.../primefaces.js"></script>
<script type="text/javascript" src="http://.../idlemonitor.js"></script>
<script type="text/javascript" src="http://.../jquery-plugins.js"></script>
<script type="text/javascript" src="http://.../jsf.js"></script>
<script type="text/javascript" src="http://.../jquery.ba-postmessage.js"></script>
<script type="text/javascript" src="http://.../tracker.js"></script>
<script type="text/javascript" src="http://.../socialMedia.js"></script>
By removing the Primefaces styles from the CDN, this following generated HTML works perfectly and generates the page as it should.
<link type="text/css" rel="stylesheet" href="/myapp/javax.faces.resource/theme.css.xhtml?ln=primefaces-smoothness" />
<link type="text/css" rel="stylesheet" href="/myapp/javax.faces.resource/primefaces.css.xhtml?ln=primefaces" />
<link type="text/css" rel="stylesheet" href="http://.../main04.css" />
<link type="text/css" rel="stylesheet" href="http://.../main_compact.css" />
<link type="text/css" rel="stylesheet" href="http://.../ironmanCompact.css" />
<script type="text/javascript" src="http://.../jquery.js"></script>
<script type="text/javascript" src="http://.../primefaces.js"></script>
<script type="text/javascript" src="http://.../idlemonitor.js"></script>
<script type="text/javascript" src="http://.../jquery-plugins.js"></script>
<script type="text/javascript" src="http://.../jsf.js"></script>
<script type="text/javascript" src="http://.../jquery.ba-postmessage.js"></script>
<script type="text/javascript" src="http://.../tracker.js"></script>
<script type="text/javascript" src="http://.../socialMedia.js"></script>
Just replace the jsf resource lookup by a classic css lookup.
When i externalized my themes this were just two mass-replacements in my ide.
Instead of:
background:url("#{resource['primefaces:colorpicker/images/colorpicker_select.gif']}");
Use:
background:url("images/colorpicker_select.gif");
Or download changed resource and mapping from here:
http://forum.primefaces.org/viewtopic.php?t=38421