I have already read through several different questions on StackOverflow regarding this topic, but I cannot seem to find the question pertaining to the issue I am having. I have created a new MVC Solution using .NET Framework and I wanted to rip out Bootstrap 3.x to replace with Bootstrap 5.x. I was able to complete this by swapping out the files and updating the BundleConfig bootstrap and css from
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"));
bundles.Add(new ScriptBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
to
bundles.Add(new Bundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"));
bundles.Add(new Bundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
Bootstrap 5 works flawlessly, but jQuery does not work anymore. I can note that on Bootstrap's website they mention that Bootstrap 5 gets away from jQuery but will recognize when the browser is utilizing jQuery and will add the proper items to render it correctly. However, when I try to run simple commands in jQuery on my Index.cshtml page such as
$(document).ready(function() {
console.log("ready!");
});
The DOM states "Uncaught ReferenceError: $ is not defined"
Here is what my Bundle Config file looks like:
public class BundleConfig
{
// For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
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 https://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new Bundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"));
bundles.Add(new Bundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
}
}
and my Layout.cshtml page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Great Lakes Bible Church</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script src="https://kit.fontawesome.com/341cefdc07.js" crossorigin="anonymous"></script>
</head>
<body>
<div >
<nav >
<div >
<a>
@Html.ActionLink("Great Lakes Bible Church", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#NavItems" aria-controls="NavItems" aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="NavItems">
<ul >
<li>
<a>
@Html.ActionLink("What We Believe", "WhatWeBelieve", "Home", new { area = "" }, new { @class = "nav-link" })
</a>
</li>
<li>
<a>
@Html.ActionLink("Map & Directions", "MapAndDirections", "Home", new { area = "" }, new { @class = "nav-link" })
</a>
</li>
<li>
<a>
@Html.ActionLink("Ministries", "Ministries", "Home", new { area = "" }, new { @class = "nav-link" })
</a>
</li>
<li>
<a>
@Html.ActionLink("Sermons and Notes", "SermonsAndNotes", "Home", new { area = "" }, new { @class = "nav-link" })
</a>
</li>
<li>
<a>
@Html.ActionLink("Meet Our Team", "MeetOutTeam", "Home", new { area = "" }, new { @class = "nav-link" })
</a>
</li>
<li>
<a>
@Html.ActionLink("Connect With Us", "ConnectWithUs", "Home", new { area = "" }, new { @class = "nav-link" })
</a>
</li>
<li>
<a>
@Html.ActionLink("Give Online", "GiveOnline", "Home", new { area = "" }, new { @class = "nav-link" })
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div >
@RenderBody()
<hr />
<footer>
<a href="https://www.facebook.com/Great-Lakes-Bible-Church-565718963772258/?ref=page_internal"><span ></span></a>
<a><span ></span></a>
<a><span ></span></a>
<p>© Copywrite @DateTime.Now.Year Great Lakes Bible Church</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
I am also going to add pictures of my Scripts js/bootstrap scripts for reference.
Any help would be great.
CodePudding user response：
you need to use ScriptBoundle and StyleBoundle and use a virtual name and not an actual path.
Use ScriptBoundle with javascript files, and StyleBoundle with css files.
try to update BundleConfig with this :
public class BundleConfig
{
// For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
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 https://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"));
bundles.Add(new StyleBundle("~/bundles/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
}
}
then in Layout.cshtml change @Styles.Render("~/Content/css") to @Styles.Render("~/bundles/css")