CODEWITHSUNDEEP
jqueryasp.netasp.net-mvc-3jquery-pluginstwitter-bootstrap
vikramjb
vikramjb

Reputation: 1365

Dropdown issues with Twitter Bootstrap when used in Asp.Net MVC3

I was playing with MVC3 Asp.Net and trying to implement the Twitter Bootstrap into the project. I got the basic thing working but not the dropdown. I have the following html code

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap.js" type="text/javascript"></script>
<link href="../../Content/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../../Content/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
</head>
 <body>
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
       <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Test Project</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Main Menu</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Main Menu with SubMenu<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li>First Menu</li>
                <li>Second Menu</li>
                <li>Third Menu</li>
            </ul>
          </li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>
<script type="text/javascript">
    jQuery(function ($) {
        alert("Starting Dropdown");
        $('.dropdown-toggle').dropdown();
    });
</script>
<asp:ContentPlaceHolder runat="server" ID="MainContent" ></asp:ContentPlaceHolder>
 </body>
 </html>

For some reason the dropdown is not showing up, I have tried couple of things but it's not working. I am not sure if its related to the versions I use. They are

ASP.NET MVC3

jQuery 1.5.1 Bootstrap CSS - v2.1.1 Bootstrap Download JS - v2.1.1

I would appreciate any help on this

Upvotes: 1

Views: 1738

Answers (2)

merv
merv

Reputation: 76700

Twitter Bootstrap uses the jQuery on() function for delegating events, which was introduced in version 1.7. You need to upgrade to at least that version for the jQuery plugins, like bootstrap-collapse.js, to function.

Upvotes: 2

albertedevigo
albertedevigo

Reputation: 18411

You are ommiting the dropdown for collapsed state:

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</a>

And you are forcing that collapsed state with class collapse, delete it:

<div class="nav-collapse">

Upvotes: 0

Related Questions