When I try to bundle my CSS and javascript, my javascript and CSS effects do not seem to work. I am using the js files and CSS files normally as in ASP.NET Web Forms.
I have kept my CSS and js files only in below code
<link rel="stylesheet" href="~/plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="~/dist/css/adminlte.min.css">
<!-- REQUIRED SCRIPTS -->
<script src="~/plugins/jquery/jquery.min.js"></script>
<script src="~/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="~/dist/js/adminlte.js"></script>
<script src="~/plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="~/dist/js/pages/dashboard3.js"></script>
#RenderSection("scripts", required: false)
Here is the bundle config class
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
}
How can I bundle my js files and CSS files?
Also, I have referenced the jquery validate js file, still validation is not working in my pages. What is the problem?
Please see the attached image for file structure.
This is is how I would do it for your setup.
Make sure you have installed the nuget package Microsoft.AspNet.Web.Optimization.
Here is the edited BundleConfig
public static class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~/bundles/allcss")
.Include("~/plugins/fontawesome-free/css/all.min.css")
.Include("~/dist/css/adminlte.min.css"));
bundles.Add(new ScriptBundle("~/bundles/alljs")
.Include("~/plugins/jquery/jquery.min.js")
.Include("~/plugins/bootstrap/js/bootstrap.bundle.min.js")
.Include("~/dist/js/adminlte.js")
.Include("~/plugins/jquery-validation/jquery.validate.min.js")
.Include("~/dist/js/pages/dashboard3.js"));
}
}
The global.asax
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
BundleConfig.RegisterBundles(BundleTable.Bundles);
//other unrelated code
}
}
Relevant parts of _Layout.cshtml
Note you don't have to put the Render calls in the _layout.cshtml but this is the standard place for most apps.
#using System.Web.Optimization
<!DOCTYPE html>
<html>
<head>
#Styles.Render("~/bundles/allcss")
</head>
<body>
#Scripts.Render("~/bundles/alljs")
#RenderSection("scripts", required: false)
</body>
I believe you also need to put jquery.validate.unobtrusive.js after jquery.validate.js. Ensure you have added the correct settings in your web.config
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
<!--other settings-->
</appSettings>
See this for more explanation
Related
I'm using ASP.NET Web Forms with master pages. There are so many moving parts to this that I cannot figure it out. Different tutorials use different parts of it and omit others, that I cannot determine what is needed and what is fluff.
Different Parts:
Master Pages: In the head section for my CSS I have:
<link href="Content/css" rel="stylesheet" />
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
Before closing body tag, I have:
<script src="<%= ResolveUrl("~") %>Scripts/jquery-2.1.1.js"></script>
<script src="<%= ResolveUrl("~") %>Scripts/bootstrap.min.js"></script>
<script src="<%= ResolveUrl("~") %>Scripts/jquery.reject.js"></script>
<script src="<%= ResolveUrl("~") %>Scripts/general.js"></script>
Looks like the min one is not needed, but do I need any of these and instead use
<script src="Scripts/js"></script> ?
Global.asax.cs: this seems simple enough, registering the bundles in Application_Start method.
void Application_Start(object sender, EventArgs e)
{
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
Web.config:
I added the System.Web.Optimization namespace and the Microsoft.AspNet.Web.Optimization.WebForms assembly.
Bundle.config: I have no idea what this is for; many tutorials don't even mention it?
BundleConfig.cs: As well as the standard WebFormsJs, MsAjaxJs and modernizr custom bundles, I have the following for CSS:
bundles.Add(new StyleBundle("~/bundles/css").Include(
"~/Content*"));
This is not working. I was about to add something similar for my JS files but got confused as to why I am doing this at all when according to this tutorial, all I needed for the CSS was:
<link href="Content/css" rel="stylesheet" />
Presumably, all I needed for my JS files was:
<script src="Scripts/js"></script>
In some tutorials I have seen ScriptManager.ScriptResourceMapping.AddDefinition - what is this for?
Here is the current state of my CSS and Scripts folders - I need all the non-minifed versions of these:
http://imgur.com/XwqIOKl
http://imgur.com/q8IdhmB
Can someone help me piece this together? I am running locally with debug set to false.
Below is a list of each of the sections that need to be configured for Bundling and Minification in WebForms.
This is taken from a production code base which is running Bundling and Minification.
Libraries:
Microsoft.AspNet.Web.Optimization
Dependencies:
WebGrease
Microsoft.Web.Infrastructure (depending on version)
Global.asax
void Application_Start(object sender, EventArgs e)
{
BundleConfig.RegisterBundles(BundleTable.Bundles);
//Use this if you want to force/test bundling in debug.
BundleTable.EnableOptimizations = true;
}
BundleConfig class
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/sitejs")
//Add as many JS libraries you would like to the bundle...
.Include("~/Scripts/jquery-3.1.1.js")
.Include("~/Scripts/jquery-migrate-3.0.0.js")
);
bundles.Add(new StyleBundle("~/bundles/sitecss")
//Add as many CSS files that you would like to the bundle...
.Include("~/css/jquery-ui.css")
);
}
}
Master Page:
<!-- At the top of the Master Page -->
<%# Import Namespace="System.Web.Optimization" %>
<!-- Just after the closing `</form>` tag -->
<asp:PlaceHolder runat="server">
<%: Styles.Render("~/bundles/sitecss") %
<%: Scripts.Render("~/bundles/sitejs") %
</asp:PlaceHolder>
I have an MVC application that gives the above error. the application defaulted to referencing jquery-1.8.2.js in the Scripts folder. With NuGet, I added jquery-ui-1.11.4.js.
Here are the relevant code sections:
BundleConfig.cs:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{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*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
}
}
}
_Layout.cshmtl:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/themes/base/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
<script src="#Url.Content("~/Scripts/FloatingDiv.js")"></script>
And the view where the datepicker lives:
#using (Html.BeginForm())
{
<div class="container">
<div class="left-third">
<label for="Company">Company:</label>
#Html.DropDownList("Company")
</div>
<div class="middle-third" style="padding-left:20px">
<label for="StartDate">Start Date:</label>
#Html.TextBox("StartDate", null, new { #class = "datefield input-box" })
</div>
<div class="right-third" style="padding-left:20px">
<label for="EndDate">End Date:</label>
#Html.TextBox("EndDate", null, new { #class = "datefield input-box" })
</div>
</div>
<br />
<br />
<br />
<div style="width:100%;text-align:center">
<input class="button" type="submit" value="Generate Report" />
</div>
}
<script type="text/javascript">
$(function () {
$('.datefield').datepicker();
});
I have tried referencing the scripts with a script tag and using the #Url.Content function for all the various scripts, for example:
<script src="#Url.Content("~/Scripts/jquery-ui-1.11.4.js")"></script>
I have tried the "Networking" tab of the developer tools (F12) in IE to ensure that the scripts were loaded, and they are with a result of 200. I did notice that the
#Styles.Render("~/Content/themes/base/css")
didn't render in the networking tab. I don't know if that is relevant, but I think it just comes with the
#Styles.Render("~/Content/css")
I tried moving the script references around and the datepicker method around to no avail.
I sincerely hope one of you smart guys or gals will know what to do about this.
As nearly all of you surmised, I was doing something wrong.
I made a new project and used the #Scripts.Render to add the appropriate jquery-1.8.2.js and jquery-ui.1.8.24.js that are included with the MVC4 project and they worked fine. I did have to move the Render to the top underneath #Scripts.Render("~/bundles/modernizr").
I then went back to the original project, uninstalled jquery-ui-1.11.4.js with the NuGet Package Manager that I had mistakenly installed earlier, and manually copied the jquery-ui-1.8.24.js files and CSS sheets from the new test project to the old solution. Then, knowing that multiple copies of the script would bollix things up, I searched in the master page for 'jquery.' To nobody's surprise, there was the reference to the original file just above the </body> tag. I removed it, made sure all the bundles were referencing the correct files, that the files were there and there were no duplicates again, and everything works fine.
Thanks for putting up with my idiocy.
I am trying to launch simple example of collapse but it do not work. Nothing happens when i am clicking on button "Toggle collapse". In console i have no errors. But in visual studio i have only one warning. What is wrong how to fix it?
_Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
#* Here ng-app="MyApp" is used for auto-bootstrap an AngularJS application. here ng-app="MyApp" means <body> element is the owner
of AngularJS application*#
<body ng-app="MyApp">
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#* Add Angular Library Here *#
#Scripts.Render("~/bundles/angular")
<script src="~/Scripts/MyApp.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
BundleConfig.cs
using System.Web;
using System.Web.Optimization;
namespace AngularJs2
{
public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/angular").Include(
"~/Scripts/angular.js",
"~/Scripts/angular-route.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*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
}
}
}
MyApp.js
(function () {
//Create a Module
var app = angular.module('MyApp', ['ngRoute']); // Will use ['ng-Route'] when we will implement routing
//Create a Controller
app.controller('CollapseDemoCtrl', function ($scope) {
$scope.isCollapsed = false;
});
})();
Index.cshtml
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<div ng-controller="CollapseDemoCtrl">
<button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr>
<div uib-collapse="isCollapsed">
<div class="well well-lg">Some content</div>
</div>
</div>
Might you have forgotten ui.bootstrap dependency
var app = angular.module('MyApp', ['ngRoute', 'ui.bootstrap']);
It looks like you haven't loaded the ui.bootstrap and loaded the proper files.
Try installing angular-ui using bower or npm and make sure too add ui.bootstrap as a dependency to your app (in MyApp.js, in the same way as you added ngRoute as a dependency). Add the installed library to your bundle-config (angular). Check in your console that all the required javascript files and css files are loded (
Then the uib-collapse will work.
If you don't want to do all the hazzle of adding this library to your project; you can always make your own "collapsable" (in this case) by changing the uib-collapse="collapsed" to ng-show="collapsed". Which will behave the same way for this case.
Your module is missing these statement and make sure your javascript references are correct:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
I am implementing tooltip using bootstrap. My code looks like:
View:
<div class="CompleteRegistrationHeadingText glyphicon glyphicon-question-sign" data-toggle="tooltip" title="Test!"></div>
Script:
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
I am rendering js file and css from layout:
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/css/bootstrap")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/bootstrap")
My bundles are as below:
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css",
"~/Content/DocThemes/*Layout.css", "~/Content/DocThemes/Utility.css"));
bundles.Add(new StyleBundle("~/Content/css/bootstrap").Include("~/Content/bootstrap.*", "~/Content/bootstrap-theme.*"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.*"));
But when I run my website, I get below error:
And tooltip functionality does not work.
Am I doing anything wrong in implementation?
I wonder why my js file work when I call it in the view:
#section Scripts {
<script>
function myFunction() {
alert("Hello1");
}
</script>
}
but does not work when I call it:
#section Scripts {
<script type="text/javascript" src="~/Views/Home/script.js"></script>
<script>
myFunction();
</script>
}
It's because .js files are not accessible in the ~/Views/ folder. You have to enable it.
To enable access to .js files in the Views folder, you can add the following to your Views' folder's web.config directly under the handlers tag:
<add name="JavaScriptHandler"
path="*.js"
verb="*"
preCondition="integratedMode"
type="System.Web.StaticFileHandler" />
Alternatively put your script into the ~/Scripts/ folder and reference it like such:
#Scripts.Render("~/Scripts/script.js")
Its better practice to place your Js file in Script folder and access it from there. You could write this code in view's head to use the js file
#Scripts.Render("~/Scripts/script.js")
you have to add your script in the Bundle config :
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js", "~/Views/Home/script.js"));
this worked for me
You should Add rendersection to your Layout Page which your view using.
#RenderSection("scripts", required: false)