我已經閱讀了有關此主題的 StackOverflow 上的幾個不同問題，但我似乎找不到與我遇到的問題有關的問題。我使用 .NET Framework 創建了一個新的 MVC 解決方案，我想洗掉 Bootstrap 3.x 以替換為 Bootstrap 5.x。我能夠通過換出檔案并更新 BundleConfig 引導程式和 css 來完成此操作
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"));
bundles.Add(new ScriptBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
至
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 完美運行，但 jQuery 不再作業。我可以注意到，在 Bootstrap 的網站上，他們提到 Bootstrap 5 擺脫了 jQuery，但會識別瀏覽器何時使用 jQuery 并添加適當的專案以正確呈現它。但是，當我嘗試在我的 Index.cshtml 頁面上運行 jQuery 中的簡單命令時，例如
$(document).ready(function() {
console.log("ready!");
});
DOM 狀態“未捕獲的 ReferenceError：$ 未定義”
這是我的 Bundle Config 檔案的樣子：
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"));
}
}
和我的 Layout.cshtml 頁面：
<!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 class="navigation-section">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a>
@Html.ActionLink("Great Lakes Bible Church", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#NavItems" aria-controls="NavItems" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="NavItems">
<ul class="navbar-nav ms-md-auto">
<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 class="container body-content">
@RenderBody()
<hr />
<footer>
<a href="https://www.facebook.com/Great-Lakes-Bible-Church-565718963772258/?ref=page_internal"><span class="fa-brands fa-facebook-f footer-icon"></span></a>
<a><span class="fa-brands fa-instagram footer-icon"></span></a>
<a><span class="fa-solid fa-envelope footer-icon"></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>
我還將添加我的 Scripts js/bootstrap 腳本的圖片以供參考。
任何幫助都會很棒。
JS 腳本
引導專案
uj5u.com熱心網友回復：
您需要使用ScriptBoundle和StyleBoundle使用虛擬名稱而不是實際路徑。
ScriptBoundle與 javascript 檔案和StyleBoundlecss 檔案一起使用。
嘗試BundleConfig用這個更新：
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"));
}
}
然后Layout.cshtml改為@Styles.Render("~/Content/css")_@Styles.Render("~/bundles/css")
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/492106.html
標籤：C＃ jQuery asp.net-mvc 视觉工作室 引导程序 5
上一篇：ASP.NET應用程式啟動