I'm having an issue with the bundling and minification feature of ASP.NET MVC 4 Basically I have the following bundle setup:
bundles.Add(new StyleBundle("~/backendcss").Include(
"~/backendContent/bootstrap/css/bootstrap.min.css",
"~/backendContent/assets/jui/css/jquery-ui.css",
"~/backendContent/assets/jui/jquery-ui.custom.css",
"~/backendContent/plugins/uniform/css/uniform.default.css",
"~/backendContent/plugins/fullcalendar/fullcalendar.css",
"~/backendContent/plugins/fullcalendar/fullcalendar.print.css",
"~/backendContent/assets/css/fonts/icomoon/style.css",
"~/backendContent/assets/css/main-style.css",
"~/backendContent/plugins/pnotify/jquery.pnotify.css",
"~/backendContent/plugins/msgbox/jquery.msgbox.css",
"~/backendContent/IntroJS/css/introjs.css"));
when they are placed on the page they come out like so:
<link href="/backendContent/assets/jui/css/jquery-ui.css" rel="stylesheet"/>
<link href="/backendContent/assets/jui/jquery-ui.custom.css" rel="stylesheet"/>
<link href="/backendContent/plugins/uniform/css/uniform.default.css" rel="stylesheet"/>
<link href="/backendContent/plugins/fullcalendar/fullcalendar.css" rel="stylesheet"/>
<link href="/backendContent/plugins/fullcalendar/fullcalendar.print.css" rel="stylesheet"/>
<link href="/backendContent/assets/css/fonts/icomoon/style.css" rel="stylesheet"/>
<link href="/backendContent/assets/css/main-style.css" rel="stylesheet"/>
<link href="/backendContent/plugins/pnotify/jquery.pnotify.css" rel="stylesheet"/>
<link href="/backendContent/plugins/msgbox/jquery.msgbox.css" rel="stylesheet"/>
<link href="/backendContent/IntroJS/css/introjs.css" rel="stylesheet"/>
First problem is that the Tilda ~ is not coming in the beginning of the link and I think that's one of the problems (site not rendering properly) now all of the above css stylesheets are resolving but there are a lot of imports and relative urls (images) and I think those are getting messed up (without the bundles, if I just point to ~/backendContent/.... everything is working just fine
Second problem is that when I set BundleTable.EnableOptimizations = true; there are a lot more problems and digging deeper I get a huge list of
(4368,1): run-time error CSS1019: Unexpected token, found '#import'
(4368,9): run-time error CSS1019: Unexpected token, found 'url("layout.css")'
I don't know if this is important but the minified and rendered style link produced by #Styles.Render("~/backendcss") is:
<link href="/backendcss?v=eMX6YcVB78xPWZV9Dw6seHqsT742J8_M1irfUC0IdaQ1" rel="stylesheet"/>
Any Ideas? I'm sorry but this is the first time I'm using this feature and with this site having so many css and js it would save a lot of bandwidth and speed up the whole site. Plus its just plain cool (that is if I can get it to work)!!!
The ~ is not supposed to be rendered. That's a special character in asp.net which means the root of the application
I'm not sure why you are having issues with the actual minification, but that'd be pretty hard to diagnose without the source.
The link when optimized should look like that. the ?v=xxx at the end is for cache busting so that people get the updated css when you change the css files.
I think for minification to work you need to add in global.asax file
BundleTable.EnableOptimizations = true;
Also can you try to create different groups of for example keeping jqueryui separate from bootstrap and so on.
Darren Kopp is right "The ~ is not supposed to be rendered. That's a special character in asp.net which means the root of the application"..
And don't use ".min" because when you set BundleTable.EnableOptimizations = true; it will be minimize your files.. So it should be like this;
bundles.Add(new StyleBundle("~/backendcss").Include(
"~/backendContent/bootstrap/css/bootstrap.css",
"~/backendContent/assets/jui/css/jquery-ui.css",
"~/backendContent/assets/jui/jquery-ui.custom.css",
"~/backendContent/plugins/uniform/css/uniform.default.css",
"~/backendContent/plugins/fullcalendar/fullcalendar.css",
"~/backendContent/plugins/fullcalendar/fullcalendar.print.css",
"~/backendContent/assets/css/fonts/icomoon/style.css",
"~/backendContent/assets/css/main-style.css",
"~/backendContent/plugins/pnotify/jquery.pnotify.css",
"~/backendContent/plugins/msgbox/jquery.msgbox.css",
"~/backendContent/IntroJS/css/introjs.css"));
Related
I'm experiencing a peculiar issue and I'm having trouble diagnosing it.
I am using LessJs in an ASP.NET MVC web application and the less file is not being processed and I am seeing my variables in the "F12" debug tools -- and the style is not applied as expected as a bi-product.
The markup looks like this.
#Scripts.Render("~/bundles/modernizr")
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/site.less" rel="stylesheet" />
<script src="~/Scripts/less-1.5.1.min.js" type="text/javascript"></script>
I am seeing the files correctly delivered to the browser (from Network tab)
There are NO errors in the console.
but when I inspect my element, I see this:
The styles from bootstrap.css are applied as expected.
Am I missing a step? I've used less with ASP.NET before, this one's got me stumped.
Thanks!
Solved. This issue was that the link tag that references the less files had an incorrect rel attribute. For less it should be stylesheet/less as opposed to just stylesheet, which is used for CSS.
<link href="~/Content/site.less" rel="stylesheet/less" type="text/css" />
It's been a nightmare to me before I came to know that in order to get jquery ui working in ASP.NET MVC I need to add #Scripts.Render("~/bundles/jqueryui"). Before doing so I kept getting Uncaught error: Undefined is not a function. What I did not understand was why on earth this would happen when I could see the jquery ui file in the sources when inspecting the html source. This is the _Layout.cshtml file:
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.plugins.js"></script>
<script src="~/Scripts/Helpers.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")//Added later to get it working
#RenderSection("scripts", required: false)
</body>
</html>
In my Helper.js file I have some helper functions that I usually use. One of them is applyDatetimePickerAndFormat that is called on $(document).ready(). Inside that function I have the following code:
$('.txt-date').datepicker({
showAnim: "drop",
changeMonth: true,
changeYear: true,
dateFormat: "dd.mm.yy"
});
If I omit #Scripts.Render("~/bundles/jqueryui") in the _Layout.cshtml I will get the aforementioned error. This code works perfectly with any plain html or web form. So it seems that somehow the document can't see the contents of the jquery-ui file. To make my question concrete:
When I look at the Sources of the the web page I can see jquery-ui-1.8.24.js and it's referenced in the html source. Then why can't the code find jquery-ui functions?
If every java script file has to be specified in the #Scripts.Render then why isn't there any problem with my Helper.js file?
And finally where does this ~/bundles/jqueryui path refer to?
jquery-ui depends on jquery (i.e. it must be defined after jquery) but you have duplicated your files. In the head you have included <script src="~/Scripts/jquery-1.8.2.js"></script> followed by jquery-ui. You then reload jquery at the end of the file using #Scripts.Render("~/bundles/jquery") (Its now after jquery-ui).
Delete the script in the head and it should work. I addition, I recommend you delete jquery.validate and jquery.validate.unobtrusive from the head and use #Scripts.Render("~/bundles/jqueryval") at the end of the file (before #RenderSection..). You can examine these bundles in App_Start\BundleConfig.cs file. There are numerous advantages to using bundles (see Bundling and Minification).
If you are using all these files in every page based on _Layout, you can define your own bundle to includes all files.
You need to define the strategy for your js. I recomend you ot organize your js first and after that separate it to smaller parts. One should be common for all the pages(jQuery in your case) and other scripts for validation should be included only on pages that have some editing fileds etc.
Use DRY principle and read some information about how js works. It helps me a lot some time ago and won't take a lot of time.
So I created a 16x16 favicon.ico file and placed it in my public/assets area. I also double downed and put it in my app/assets/image section.
I added and the image will not load up in Chrome, but it seems to load up in Firefox and Safari for me. That said, it won't load up in any of my friend's browsers. I also tried with or without the /.
<%= favicon_link_tag '/favicon.ico' %>
So I tried
<link rel="shortcut icon" href="cameronswiggett.com/favicon.ico" />
and same results.
I went to config/enviroments/production and made
config.serve_static_assets = true
the thing that confuses is me when I go to www.mysite.com/favicon.ico I see a broken image. So, obviously something is wrong but I am at a loss. Any suggestions?
Thanks!
Here is how I did it on my apps :
<link rel="shortcut icon" href="/img/favicon.png" type="image/png">
<link rel="icon" href="/img/favicon.png" type="image/png">
Here my favicon is in /public/img folder, it works for me so it may works for you, I added the two tags to make sure it works everywhere
I'm trying to get my css files bundling with the new MVC4 bundling.
I've added this to my _Layout.cshtml:
<link href="#Url.Content("~/Content/css")" rel="stylesheet" type="text/css" />
When my page renders I see the style being loaded, but nothing is in the request: http://localhost/Content/css
In Global.asax, I've enabled:
BundleTable.Bundles.EnableDefaultBundles();
Instead of EnableDefaultBundles, have you tried this?
BundleTable.Bundles.RegisterTemplateBundles();
Also, I don't think you're supposed to use #Url.Content. I have this and it works:
<link href="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
I had an error in my page which was causing this not to work. A partial view was getting called from jQuery and returned a 500 error. Fixing that resolved this problem, now all works well.
I started integrating jquery ui datepicker in my page.
I included the js files:
jquery-1.5.1.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.datepicker.js
and CSS Files:
jquery.ui.datepicker.css
But it resulted out datepicker without the background...
what am i missing on it?
After i manually add :
.ui-datepicker{background-color: silver;}
it shows like:
http://outsourcingnepal.com/general-images/shot1.jpg
Check the datepicker.css if there is style definition for the element with missing background. If not..just check the element in firebug (or similar tool) and add your own style. There probably will be already a class, so just add your style in your stylesheet, or add it into detepicker.css.
Got it solved unpackaing all the files once more... i hope some files were missing
For styling only the DatePicker, these are the necessary stylesheet files:
~/Content/themes/base/jquery.ui.core.css
~/Content/themes/base/jquery.ui.datepicker.css
~/Content/themes/base/jquery.ui.theme.css
or the minified ones:
<link rel="stylesheet" href="../Content/themes/base/minified/jquery.ui.core.min.css" />
<link rel="stylesheet" href="../Content/themes/base/minified/jquery.ui.theme.min.css" />
<link rel="stylesheet" href="../Content/themes/base/minified/jquery.ui.datepicker.min.css" />