Bootstrap 4升级后ASP.NET MVC隐式调用JS函数提示未定义求助
Hey there! Let's break down why your JS functions are throwing "undefined" errors when called implicitly in your CSHTML, even though they're properly included in your bundle. I've run into similar MVC bundle loading issues before, so here's what to check:
1. Your Inline Script Runs Before the Bundle Finishes Loading
The most common culprit here is timing: your CSHTML inline script is executing before the bundle's JS files have fully loaded.
When you use onclick or explicit script references, those actions happen after the page is fully rendered (or after the explicit script is fetched), so the functions exist. But inline scripts placed early in the page (like in the <head> or before your bundle reference) fire immediately—before the bundle's functions are defined.
Fix: Wrap your inline code in a DOM-ready handler to ensure it runs only after all bundle scripts are loaded:
<script> $(document).ready(function() { ShowDropdownMenu(); if ('@TempData["Message"]' != null && '@TempData["Message"]' != "") { if ('@TempData["pc_result"]' == '0') { } else { alertMessagePrompt("Registration Error", "@TempData["Message"]", 1, [["Ok", "btnOkCloseId", 2, "closeMsgPrompt()"]]); } changeValue("pc_firstname"); changeValue("pc_middlename"); changeValue("pc_lastname"); validateMobile("pc_mobile"); changeValue("pc_bdate"); validateEmail('pc_youremail'); changeValue("pc_cardName"); changeValue("pc_cityResidence"); changeValue("pc_cityWork"); } }); </script>
If you prefer native JS over jQuery, use this instead:
<script> document.addEventListener('DOMContentLoaded', function() { // Your existing code here }); </script>
2. Duplicate jQuery References Are Causing Conflicts
Looking at your Bundle.config, you're including both jquery-3.4.1.min.js and jquery-{version}.js. Loading jQuery twice can overwrite plugin bindings or reset the jQuery namespace—this might not be the direct cause of your current issue, but it's a critical fix to prevent other bugs down the line.
Fix: Remove one of the jQuery references. Stick to either the explicit version or the wildcard, not both:
bundles.Add(new ScriptBundle("~/Scripts/js").Include( "~/Scripts/jquery-3.4.1.min.js", // Remove this line: "~/Scripts/jquery-{version}.js", "~/Scripts/jquery.cookie.js", "~/Scripts/login.js", "~/Scripts/jquery-ui-1.12.1.min.js", "~/Scripts/umd/popper.min.js", "~/Scripts/bootstrap-submenu-min.js", "~/Scripts/loyalty-members.js", "~/Scripts/prepaid-card.js", "~/Scripts/contactus.js", "~/Scripts/loading.js", "~/Scripts/jquery.flexslider.js", "~/Scripts/home.js", "~/Scripts/myprofile.js", "~/Scripts/alertmsg.js", "~/Scripts/merchants.js", "~/Scripts/flipclock/flipclock.js", "~/Scripts/bootstrap.min.js", "~/scripts/adjustmentbs4/navbar-customize.js" ));
3. Ensure Your Bundle Renders in the Correct Location
In your MVC layout (_Layout.cshtml), make sure your bundle reference is placed right before the closing </body> tag. This ensures all page content loads first, and scripts are loaded last. Then, place your inline scripts in a @section Scripts block so they render after the bundle:
In _Layout.cshtml:
<body> @RenderBody() <!-- Bundle loads last to avoid timing issues --> @Scripts.Render("~/Scripts/js") @RenderSection("Scripts", required: false) </body>
In your CSHTML:
@section Scripts { <script> // Your inline code here (no DOM-ready wrapper needed if it's after the bundle) ShowDropdownMenu(); // ... rest of your code </script> }
This guarantees your inline code runs after all bundle scripts are loaded, so your functions will be defined when they're called.
These fixes should resolve the "undefined function" errors you're seeing. Let me know if you hit any snags!
内容的提问来源于stack exchange，提问作者John A-Z-2
