I have an issue where icons are not displaying when publishing remotely. If I run the project within Visual Studio 2010 via http://localhost:62299/ I see everything perfectly in Firefox, but if I use the same browser to view the remote website, the icons do not show. Getting varied results across verions of IE too.
I have ensured the full /Contents and /Scripts folders have been copied across in their entirety to ensure no files have been omitted. But despite this, icons will still not show.
BundleConfig.cs
using System.Web.Optimization;
namespace WebApplication1
{
public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.IgnoreList.Clear();
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryold").Include(
"~/Scripts/Compatibility/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryuiold").Include(
"~/Scripts/Compatibility/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/ie9").Include(
"~/Scripts/html5shiv.js",
"~/Scripts/respond.min.js"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap*"));
bundles.Add(new ScriptBundle("~/bundles/freelanceold").Include(
"~/Scripts/jquery.easing.min.js",
"~/Scripts/classie.js",
"~/Scripts/freelancer.js"));
bundles.Add(new ScriptBundle("~/bundles/freelance").Include(
"~/Scripts/jquery.easing.min.js",
"~/Scripts/classie.js",
"~/Scripts/cbpAnimatedHeader.js",
"~/Scripts/freelancer.js"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.min.css",
"~/Content/Site.css"));
bundles.Add(new StyleBundle("~/Content/font-awesome").Include(
"~/Content/font-awesome/css/font-awesome.min.css"));
}
}
}
_layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="" />
<meta name="author" content="" />
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/font-awesome")
#Scripts.Render("~/bundles/modernizr")
<link href='http://fonts.googleapis.com/css?family=Montserrat:400' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css' />
</head>
<body id="page-top">
#RenderSection("featured", required: false)
#RenderBody()
<footer class="text-center">
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
Copyright © 2014 - MySite
</div>
</div>
</div>
</div>
</footer>
<div class="scroll-top page-scroll visible-xs visble-sm">
<a class="btn btn-primary" href="#page-top">
<i class="fa fa-chevron-up"></i>
</a>
</div>
<!--[if lt IE 9]>
#Scripts.Render("~/bundles/jqueryold")
<![endif]-->
<!--[if gte IE 9]><!-->
#Scripts.Render("~/bundles/jquery")
<!--<![endif]-->
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/freelance")
<!-- IE8 support for HTML5 elements and media queries -->
<!--[if lt IE 9 !IE]>
#Scripts.Render("~/bundles/ie9")
<![endif]-->
#RenderSection("scripts", required: false)
</body>
</html>
Any help would be be much appreciated :-)
I had this same issue with a set of css files, where the request to the combined style url would result in a 301, then the final destination resulted in a 403 (forbidden). It's because your style bundle url of "~/Content/font-awesome" matches an actual folder path. I think the virtual path resolution is matching it to an actual physical folder location first, and if that fails, then it matches to a virtual bundle url if possible. If you change it to what I have below and update your view to match, you should be fine:
bundles.Add(new StyleBundle("~/Content/font-awesome-bundle").Include(
"~/Content/font-awesome/css/font-awesome.min.css"));
#Styles.Render("~/Content/font-awesome-bundle")
I had this same issue with a project at work. What is happening is that some of the font-awesome files weren't included in the publish.
The .eot, .tff, and .woff were not included for me. I had to click on the files, and change the Build Action from "None" to "Content". At that point, they would output correctly.
For the record, that was in Visual Studio 2010, but in 2013, it appears that they are set to "Content" correctly.
I had a similar issue with font awesome below listed is my current bundle value and this solved the issue with additional references from Font-awesome.css file
bundles.Add(new StyleBundle("~/Framework/libs/vendor/font-awesome/4.4.0/css/font-awesome").Include( "~/Framework/libs/vendor/font-awesome/4.4.0/css/font-awesome.css"));
when the path is relative the to the actual font-awesome css file the relative path to the eot,tff and woff files will also become correct.
Related
I am very new to Bundling and minification, I try to implement it for the first time in my MVC project.
I have added a BundleConfig.cs file:
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
//libs scripts
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/libs/jquery/jquery-{version}.js",
"~/Scripts/libs/jquery/jquery-ui-{version}.js",
"~/Scripts/libs/jquery/jquery.mask*",
"~/Scripts/libs/jquery/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/ko").Include(
"~/Scripts/libs/ko/knockout-{version}.js"));
//site scripts
bundles.Add(new ScriptBundle("~/bundles/site").Include(
"~/Scripts/site/*.js"));
bundles.Add(new StyleBundle("~/Content/site/").Include("~/Content/site/*.css"));
}
}
And added in Global.asax:
BundleConfig.RegisterBundles(BundleTable.Bundles);
Then I rendered the scripts/css in my Layout page:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/site/Fonts.css")
#Styles.Render("~/Content/site/Site.css")
#RenderSection("styles", required: false)
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/ko")
#Scripts.Render("~/bundles/site")
#RenderSection("scripts", required: false)
</head>
But this is not working, I keep getting all kind of errors that indicate that the scripts and css are not being recognized.
For example:
Uncaught ReferenceError: jQuery is not defined
What am I doing wrong?
As per #BasantaMatia comment that gave me the idea, setting:
BundleTable.EnableOptimizations = true
In the Global.asax file, after:
BundleConfig.RegisterBundles(BundleTable.Bundles);
Solved the issue.
See here you are adding 2 times all the scripts files,
You already added reference your bundle jquery, ko and site.
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/ko")
#Scripts.Render("~/bundles/site")
Then there is no need to add again these files.
<script src="~/Scripts/Libs/jquery/jquery-3.1.1.min.js"></script>
<script src="~/scripts/libs/jquery/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/Libs/jquery-mask/jquery.mask.min.js"></script>
<script src="~/Scripts/Libs/knockout/knockout-3.4.1.js"></script>
<script src="~/Scripts/Site/Site.js"></script>
I have ASP.NET MVC application and im using Telerik's UI for ASP.NET MVC framework for few controls.
1> The application is using bootstrap 3.3.6
2> Telerik also provides bootstrap styling for their controls. so i have bundled those styles as well.
3> I also have my own site.css so i can override some of the styles.
Here is my BundleConfig.cs
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
// jQuery, bootstrap and kendo JavaScripts are bundled here
// kendo bootstrap-theme CSS
bundles.Add(new StyleBundle("~/Content/kendo-bootstrap/css").Include(
"~/Content/kendo/2016.1.412/kendo.common-bootstrap.min.css",
"~/Content/kendo/2016.1.412/kendo.bootstrap.min.css"));
// bootstrap CSS
bundles.Add(new StyleBundle("~/Content/bootstrap/css").Include(
"~/Content/bootstrap.min.css"));
// site CSS
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/site.css"));
}
}
This is how im referencing them in layout.cshtml
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#Styles.Render("~/Content/kendo-bootstrap/css")
#Styles.Render("~/Content/bootstrap/css")
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/kendo/2016.1.412")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
</body>
</html>
Do we need to refer CSS in particular order? Whats the recommended order?
This would be the order in your razor (cshtml) file:
// Generic bootstrap css
#Styles.Render("~/Content/bootstrap/css")
// Css that kendo overwrites or extends based on bootstrap
#Styles.Render("~/Content/kendo-bootstrap/css")
// Your own css that can override the previous css files
#Styles.Render("~/Content/css")
that way bootstrap doesn't overwrite the style that was set by the kendo-ui library.
i am trying to use this Date time Picker in MVC, its been hours but picker screen is not showing up, i also tried this
BundelConfig.cs
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/moment.js",
"~/Scripts/bootstrap.js",
"~/Scripts/bootstrap-datetimepicker.min.js"
));
// other bundles here
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/site.css",
"~/Content/bootstrap.css",
"~/Content/bootstrap-datetimepicker.min.css"
));
// other bundles here
My View:
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
_Layout:
<!DOCTYPE html>
<html>
<head>
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/css/boostrap.css")
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
</head>
<body>
<div>
// here other divs
#RenderBody()
</div>
<script src="js/jquery.js"></script>
<script src="js/boostrap.min.js"></script>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
Expected output
http://jsfiddle.net/RR4hw/7/
i am not able to figure out what i am doing wrong ?, Any help would be appreciated.
You are including jQuery multiple times. Your bundle already included it, so you can remove this line in your layout:
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
and these lines from your view:
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
This line in your Layout
#Scripts.Render("~/bundles/jquery")
is doing it all for you, because you added those scripts to that bundle.
Including the same script multiple times impacts negatively on performance, but wouldn't normally stop the code from working. However, in this case the different versions of jQuery that you've included are all different versions. I would check what is in your Scripts folder and see if it is up to date.
As an aside, it's also considered good practice to put styles (e.g. CSS) at the top of the page and scripts at the bottom, because that way the browser will load the page properly with styling, and not be slowed down by trying to load scripts halfway through (and if there's a problem with the script, the page still loads).
And as a final aside, you also look like you are a bit confused about the difference between .min.js and .js (I'm extrapolating from the fact you sometimes use the min version and sometimes don't; if you know all this already please excuse me!). The .min.js files are a minimised version (variable names as short as possible, comments deleted, whitespace reduced to minimum) that can be sent to the server. You may already have something like this
#if DEBUG
BundleTable.EnableOptimizations = false;
#else
// note: overrides compilation debug="true" in Web.config
BundleTable.EnableOptimizations = true;
#endif
in your Bundle.Config file. If not, it's handy to add because it means that the release version has the best performance (.min.js files) but the debug version is more human-readable (normal .js files) to help you debug it.
I am having a fair few issues using ASP.Net MVC 5 + Twitter Bootstrap 3.
Styling, that works, no issues - but the carousel I put in does not cycle, nor does it respond to the next/prev arrows or the navigation buttons.
I even gave in and pulled a carousel example from an article: (Bootstrap Carousel Tutorial to rule out errors in my code.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css") <!-- this is the bundle name -->
#Scripts.Render("~/Content/bundles/modernizr")
</head>
<body>
<!--------------------------- Carousel ------------------------------->
( Exact code from http://bootstrapbay.com/blog/bootstrap-3-carousel-tutorial/ )
<!-------------------------------------------------------------------->
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
But It doesn't work, as described at the start. Any clues? [I don't want to clutter up the question with my Site.less or BundleConfig code - but if you need it, ask.]
( for the record I also tried
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<script src="~/Content/Scripts/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Content/Scripts/respond.js"></script>
rather than bundling - but same result...)
Once pointed to look in the right direction I found that I moved the the files/renamed the bundle and hadn't updated the call.
instead of
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
I should have had
#Scripts.Render("~/Content/bundles/jquery")
#Scripts.Render("~/Content/bundles/bootstrap")
to match the bundle config
var jqueryBundle = new ScriptBundle("~/Content/bundles/jquery");
...
var bootstrapBundle = new ScriptBundle("~/Content/bundles/bootstrap");
I am trying to get Angular UI Directives for bootstrap working with ASP MVC.
I have created a new, basic project and have used Nuget to add Twitter Bootstrap, AngularJS and UI Bootstrap.
I am registering these as bundles like so:
bundles.Add(new StyleBundle("~/Content/bootstrap")
.Include("~/Content/bootstrap.css")
.Include("~/Content/bootstrap-theme.css"));
bundles.Add(new ScriptBundle("~/bundles/angular")
.Include("~/Scripts/angular.js"));
bundles.Add(new ScriptBundle("~/bundles/angularUiDirectives")
.Include("~/Scripts/ui-bootstrap-{version}.js"));
My shared _Layout.cshtml page looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Testing Angular - #ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/bootstrap")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/angular")
#Scripts.Render("~/bundles/angularUiDirectives")
#RenderSection("scripts", required: false)
</body>
</html>
So I have added the libraries for Angular UI directives, along with the dependencies listed here via Nuget, I am registering all of these libraries as bundles and then I am rendering these bundles on my shared master page.
So far so good, but then I get to the next instruction:
As soon as you've got all the files downloaded and included in your page you just need to declare a dependency on the ui.bootstrap module
What does 'declare a dependency' mean in regards to HTML and CSS? The page on github suggests I need to put the following somewhere:
angular.module('myModule', ['ui.bootstrap']);
Where do I put this, and when do I run it?
Thanks
I solve this by doing the following:
I added the following to the opening HTML tag of my master page (replacing appName with the name of your application):
ng-app="appName"
I created a seperate Javascript class which I called test.js, registered this as a bundle and added the following:
angular.module('appName', []);
angular.module('appName', ['ui.bootstrap']);
The first line defines the angular module, the second wires it up to the UI Bootstrap library, and you need both.
Updated code to register my bundles is below:
using System.Web.Optimization;
namespace MvcApplication2
{
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~/Content/bootstrap")
.Include("~/Content/bootstrap.css")
.Include("~/Content/bootstrap-theme.css"));
bundles.Add(new ScriptBundle("~/bundles/angular")
.Include("~/Scripts/angular.js"));
bundles.Add(new ScriptBundle("~/bundles/angularUiDirectives")
.Include("~/Scripts/ui-bootstrap-tpls-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/test").Include("~/Scripts/Test.js"));
}
}
}
Here is the code for Test.js:
angular.module('appName', []);
angular.module('appName', ['ui.bootstrap']);
Here is the code for my master page:
<!DOCTYPE html>
<html ng-app="appName">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Testing Angular - #ViewBag.Title</title>
#Scripts.Render("~/bundles/angular")
#Scripts.Render("~/bundles/angularUiDirectives")
#Scripts.Render("~/bundles/test")
#Styles.Render("~/Content/bootstrap")
</head>
<body>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
At this point we are fully setup with AngularJS, and Twitter Bootstrap and Angular Directives for Bootstrap in an ASP MVC application.