Upgrading ASP.Net MVC Web Application with the latest Bootstrap version 5

After updating Bootstrap from version 3.4.1 to 5.1.3, I encountered a similar issue as the original poster in this question. Thankfully, I was able to resolve it thanks to the provided answers. Now, when I click on the hamburger icon, the Navbar expands but then it refuses to shrink back when clicked again.

I simply copied the Navbar example from the official Bootstrap site.

This is my _Layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    <script src="~/Scripts/bootstrap.min.js"></script>
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
                <a class="navbar-brand" href="#">Hidden brand</a>
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled">Disabled</a>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>

    <div class="container body-content">
        <br />
        @RenderBody()
    </div>
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Below is my BundleConfig:

public static void RegisterBundles(BundleCollection bundles)
        {

            // 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 Bundle("~/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"));
        }

https://i.sstatic.net/Mjbhi.jpg

Answer №1

Well, it turns out my BoundleConfig.cs file was incorrect. Here's the corrected version:

public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new Bundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new Bundle("~/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 Bundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new Bundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.min.js"
                      ));

            bundles.Add(new Bundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/bootstrap.min.css",
                      "~/Content/site.css"));
        }

Turns out, my head tag in _Layout.cshtml was also wrong. This is the correct version:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/bootstrap")
    <script src="~/Scripts/jquery-3.6.0.min.js"></script>
    @Scripts.Render("~/bundles/modernizr")
</head>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating Tab-Focused Accessibility in HTML Fragment (Modal Window)

I'm currently working on an Angular App with a custom Modal Dialog implementation. I'm trying to figure out how to restrict tabbing to just the elements within the Modal, rather than allowing users to tab through everything in the background. I ...

Should all pages in React be rendered on the server side?

Currently, I rely on Next.js for implementing server-side rendering on my React website. At the moment, I have implemented server-side rendering across almost all pages of the site, including profile information and other content that requires a login to ...

Trouble updating document with MongoDB updateOne when using ID as filter

I need to update a property value of a specific document by sending a request to my NextJs API using fetch. // Update items in state when the pending time in queue has passed, set allowed: true items.map((item) => { const itemDate = new Date(item.adde ...

Tips for managing image uploads while incorporating pre-set error detection into a form

I'm facing a challenge with integrating an optional image upload feature into my express app. The issue seems to be related to the way I've structured the app, as it appears to be trying to pass the image name from the body instead of utilizing t ...

Customize your Material-UI theme with a unique hover effect for contained buttons

Currently, I am in the process of setting up a theme for Material-Ui on my React application. Within the app, there are two types of buttons that I utilize - contained and outlined. The issue lies with the hover effect on the contained button (while the ou ...

Troubleshooting: AngularJS not displaying $scope variables

I have a question that has already been answered, but the suggested solutions did not work for me. Everything seems to be fine, but the content within curly brackets is not displaying on screen. <div ng-controller="Hello"> <p>The I ...

Passing an array of integer arrays to a controller method in ASP MVC using Ajax

I am encountering an issue with my AJAX call when trying to post data entered by the user on the webpage to a controller method. Unfortunately, the data never reaches the controller and always results in an error. I suspect that the problem lies in the typ ...

The GitHub-hosted package encounters a failure during the npm publish process

Last week everything was running smoothly, but now I am encountering an error and not sure what went wrong. (Apologies for the formatting as there are many lines of log) Running Node version: v10.15.3 Using npm version: 6.4.1 After executing npm publish ...

After the completion of the initial scenario in Specflow, the browser automatically shuts down

In my Specflow project, I came across an issue where the browser closes after executing the first scenario in my feature file. This results in a failed test as there is no connection with the remote server. What steps can I take to resolve this problem? ...

The Vue html2pdf library seems to be generating an incorrect HTML element in the resulting PDF file

I am working on developing an app in Vue and I am encountering an issue while trying to use vue-html2pdf for generating PDF files from an HTML element. The problem is that the PDF generated seems to be cut off. You can view a screenshot of the HTML element ...

Guide to transmitting a variable using the JavaScript formData API

Having trouble getting AJAX file (picture) upload functionality to work because of issues with sending variables via the formData API: Here is the code for formData: var data = new FormData(); data.append('SelectedFile', _file.files[0]); data.a ...

Managing numerous post requests with Angular

Dealing with a large form containing HTML input elements, I have implemented a functionality where a POST request is made to a WebAPI whenever there is a change in the input value. Sometimes, multiple POST requests are triggered within seconds, causing da ...

Is there a way to make a <div> load automatically when the page starts loading?

I'm having an issue with my code where both <div> elements run together when I refresh the page. I want them to display separately when each radio button is clicked. <input type="radio" name="cardType" id="one" class="css-checkbox" value="db ...

Convert a portion of an object into a string to send in a server request

I have customized the fetch method of a Backbone Collection to make a request to a different URL under certain conditions, and I need to include some data with it. The modified fetch method (which I obtained from another solution on Stack Overflow) is as f ...

Get the child element in order to make a query to the database

I need help with searching MongoDB using findOne (or find). I am having trouble accessing a value from within the record, possibly because it's a child object? Specifically, I am trying to retrieve the order_number field which returns null. However, ...

Project Polymer, the magic of touch interactions

I'm feeling a bit lost here, struggling to find the information I need. When it comes to attaching a JavaScript function to a mouse up event, my code looks like this: <div id="div1" on-mouseup={{menuMouseUp}}></div> But what about touch ...

Issues with UA PhoneGap 2.0 plugin failing to initialize properly on iOS device

In my attempt to integrate push notifications into my iOS PhoneGap 2.0 app using the recently released Urban Airship plugin, I encountered an issue. Everything functions perfectly when I load the index.html from the provided sample application into my proj ...

Vue throwing ReferenceError when accessing uninitialized variable in Safari browser

Recently, I've encountered a perplexing error message that has me scratching my head. The error message reads as follows: ReferenceError: Cannot access uninitialized variable. This error specifically points to the line of code: const app = createApp(A ...

JavaScript click event not triggering on ASP.NET button

Currently, I am attempting to invoke a C# function from JS without using ajax. One approach I have tried is creating an ASP.NET button that, when clicked, calls the C# function and triggers the click event from JS: In the HTML section: <asp:Button run ...

Angular: An excessively large number of dynamically generated FormGroups within a FormArray is causing the webpage to become unresponsive

In my project, I have implemented a dynamic FormArray generation process which is triggered by the following code snippet. this.priceListForm.addControl('priceListLines', this.formBuilder.array(this.priceListDetails.priceListLines.map(item => ...