Bootstrap Dropdown not Working with ASP.NET

Question

Master page of my asp.net. I have added what is necessary for creating a submenu dropdown for my menu. Somehow it is not working.

<%@ Import Namespace="System.Web.Optimization" %>
<!DOCTYPE html>
<html lang="en">
<head id="Head1" runat="server">
    <title>Navbar Template for Bootstrap</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Sample page to include Bootstrap and Web API to Asp.Net forms application.">
    <meta name="author" content="Sree">
    <link href="Content/bootstrap-theme.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/jquery-2.1.1.intellisense.js"></script>
    <script src="Scripts/jquery-2.1.1.js"></script>


    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">



    <asp:ContentPlaceHolder ID="StyleSection" runat="server" />


    <script>
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
    </script>
</head>
<body>
    <%--<form id="form1" runat="server">--%>
    <div class="container">
        <!-- Static navbar -->
        <div class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Project name</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="ContentPage.aspx">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li class="dropdown-submenu">Nav header</li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="./">Default</a></li>
                        <li><a href="../navbar-static-top/">Static top</a></li>
                        <li><a href="../navbar-fixed-top/">Fixed top</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
            <!--/.container-fluid -->
        </div>
        <!-- Content Page Section -->
        <div class="container">
            <asp:ContentPlaceHolder ID="ContentSection" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </div>
    <!-- /container -->
    <%-- Script Section --%>
    <%: Scripts.Render("~/bundles/jQuery")  %>
    <asp:ContentPlaceHolder ID="ScriptSection" runat="server" />
    <%--</form>--%>
</body>
</html>

The following is my child page. When I refer all the css and jquery and exclude them from master page it works. If I remove the web references then it doesn't work. Please help - how can I do it by using local references?

<%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="ContentPage.aspx.cs" Inherits="Sample.ContentPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="StyleSection" runat="server">

    <link href="Content/bootstrap-theme.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/jquery-2.1.1.intellisense.js"></script>
    <script src="Scripts/jquery-2.1.1.js"></script>


    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentSection" runat="server">
    <!-- Main component for a primary marketing message or call to action -->
    <div class="jumbotron">
        <h1>Navbar example</h1>
        <p>
            This example is a quick exercise to illustrate how the default, static navbar and
            fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts
            to your viewport and device.
        </p>
        <p>
            <a class="btn btn-lg btn-primary" href="#" role="button">View navbar docs &raquo;</a>
        </p>
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ScriptSection" runat="server">
</asp:Content>

Win · Accepted Answer · 2014-12-10 21:11:18Z

6

You need to add jQuery before bootstrap.js.

<script src="Scripts/jquery-2.1.1.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/bootstrap.min.js"></script>

FYI: Do not add jquery-2.1.1.intellisense.js to the master page; instead, use _references.js

answered Dec 10, 2014 at 21:11

Win

62.4k13 gold badges106 silver badges190 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Win Over a year ago

TODO: You need to uncomment form tag. ASP.Net server controls won't work without form tag.

Chris Marisic Over a year ago

Also OP needs to remove his duplicated usages of bootstrap.js. There's the debug version and min version locally and a 3rd min version from the cdn.

Tyler2P · Accepted Answer · 2022-11-14 17:17:22Z

3

Hi Guys To Solve This error if your using BootStrap 5 Please Follow this steps In Bootstrap 5 We have to use data-bs-toggle instead of data-toggle.

I'm attaching the reference below

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  Management
</a>

In case of script files(make sure u had this in the same order)

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />

edited Nov 14, 2022 at 17:17

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Nov 10, 2022 at 17:46

Nidhi Anandan

412 bronze badges

Comments

Wai Ha Lee · Accepted Answer · 2016-04-20 21:17:13Z

0

After Searching a lot I found the solution. For asp.net c# Master page with Ajax controls you need to add the following in the head. Tested and Working.

<script type="text/javascript" src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>

More info - http://www.aspsnippets.com/Articles/Bootstrap-Responsive-ASPNet-Menu-control-for-Mobile-Phone-Tablet-and-Desktop-display.aspx

edited Apr 20, 2016 at 21:17

Wai Ha Lee

8,856102 gold badges61 silver badges100 bronze badges

answered Apr 20, 2016 at 20:55

Harish Buhari

1

1 Comment

Olivier De Meulder Over a year ago

Please edit your answer and add 4 spaces before your code, otherwise it will be hidden.

CharaD7 · Accepted Answer · 2020-08-07 10:15:55Z

0

Make sure make sure you have popper.min.js in your imported JavaScript files.

answered Aug 7, 2020 at 10:15

CharaD7

113 bronze badges

1 Comment

cloned Over a year ago

Please elaborate on why this works and how to do this exactly with a code example.

Mahendra Verma · Accepted Answer · 2017-02-10 07:47:56Z

-4

Also use these scripts

 <!-- THIS PAGE PLUGINS -->
    <script type='text/javascript' src='js/plugins/icheck/icheck.min.js'></script>
    <script type="text/javascript" src="js/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js"></script>

    <script type="text/javascript" src="js/plugins/bootstrap/bootstrap-datepicker.js"></script>                
    <script type="text/javascript" src="js/plugins/bootstrap/bootstrap-file-input.js"></script>
    <script type="text/javascript" src="js/plugins/bootstrap/bootstrap-select.js"></script>
    <script type="text/javascript" src="js/plugins/tagsinput/jquery.tagsinput.min.js"></script>
    <!-- END THIS PAGE PLUGINS -->

answered Feb 10, 2017 at 7:47

Mahendra Verma

1

Collectives™ on Stack Overflow

Bootstrap Dropdown not Working with ASP.NET

5 Answers 5

2 Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related