Bootstrap Dropdown not Working with ASP.NET
10,949
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
Author by
user2998990
Updated on June 05, 2022Comments
-
user2998990 almost 2 years
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 »</a> </p> </div> </asp:Content> <asp:Content ID="Content3" ContentPlaceHolderID="ScriptSection" runat="server"> </asp:Content>