对Bootstrap感到兴奋我正在替换我们网站的MasterPage中的菜单。我在test.aspx页面上有一个很好的菜单，但是当把它放在母版页中时，我发现小屏幕的汉堡包图标没有显示下拉菜单。这是Bootstrap到Asp.Net组合的主要限制，还是我在这里做错了什么？
这是仅包含Bootstrap菜单基本版本的母版页：
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage1.master.cs" Inherits="MasterPage1" %>
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Test with Bootstrap menu</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<asp:ContentPlaceHolder ID="ContentPlaceHolder_Header" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="container-fluid">
<nav id="menu_projects">
<div class="navbar navbar-default">
<div id="menubar" class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse" runat="server">
<ul id="ul_menu" class="nav navbar-nav navbar-right" runat="server">
<li><a id="a_menu_1" href="#"></a>Menu 1</li>
<li><a id="a_menu_2" href="#"></a>Menu 2</li>
<li><a id="a_menu_3" href="#"></a>Menu 3</li>
<li><a id="a_menu_4" href="#"></a>Menu 4</li>
<li><a id="a_menu_5" href="#"></a>Menu 5</li>
<li><a id="a_menu_6" href="#"></a>Menu 6</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder_Body" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
这里是使用母版页的实际页面：
<%@ Page Title="" Language="C#" MasterPageFile="~/Dev/MasterPage1.master" AutoEventWireup="true" CodeFile="MP1_menu_test.aspx.cs" Inherits="Dev_MP1_menu_test" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder_Header" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder_Body" Runat="Server">
<h1>This is a test with master age</h1>
</asp:Content>
上述组合确实显示了菜单，但仅限于大屏幕。当屏幕变小时，汉堡包图标会替换菜单项，但汉堡包不会显示菜单项的下拉列表。
我还在常规的非母版页面的aspx页面中使用相同的引导程序菜单代码进行了测试，该页面工作正常，工作下拉：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NoMP_menu_test.aspx.cs" Inherits="Dev_NoMP_menu_test" %>
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Test with Bootstrap menu</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<form id="form1" runat="server">
<div class="container-fluid">
<nav id="menu_projects">
<div class="navbar navbar-default">
<div id="menubar" class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse" runat="server">
<ul id="ul_menu" class="nav navbar-nav navbar-right" runat="server">
<li><a id="a_menu_1" href="#"></a>Menu 1</li>
<li><a id="a_menu_2" href="#"></a>Menu 2</li>
<li><a id="a_menu_3" href="#"></a>Menu 3</li>
<li><a id="a_menu_4" href="#"></a>Menu 4</li>
<li><a id="a_menu_5" href="#"></a>Menu 5</li>
<li><a id="a_menu_6" href="#"></a>Menu 6</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<h1>Test without masterpage</h1>
</form>
</body>
</html>
对于所有文件，我将代码隐藏页面完全留空，只留下那些由VisualStudio创建的文件。
.Net的版本是3.5。
基于此测试，看起来MasterPage中断了Bootstrap。但我发现很难相信像Bootstrap这样有用的软件包无法与Asp母版页一起使用。
如何为具有数十页的网站编写菜单栏？
评论者Jason是对的：MasterPage中的ID值以Asp系统为前缀，类似ctl100_，这肯定是Bootstrap中的javascript无法找到的原因。
以下是浏览器看到的相关部分：
<div class="navbar navbar-default">
<div id="menubar" class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="ctl00_navbar" class="navbar-collapse collapse">
<ul id="ctl00_ul_menu" class="nav navbar-nav navbar-right">
<li><a id="a_menu_1" href="#"></a>Menu 1</li>
<li><a id="a_menu_2" href="#"></a>Menu 2</li>
<li><a id="a_menu_3" href="#"></a>Menu 3</li>
<li><a id="a_menu_4" href="#"></a>Menu 4</li>
<li><a id="a_menu_5" href="#"></a>Menu 5</li>
<li><a id="a_menu_6" href="#"></a>Menu 6</li>
</ul>
</div>
</div>
</div>
IIS / ASP将两个ID修改为ctl100_navbar和ctl100_ul_menu。
我尝试将数据目标更改为#ctl100_navbar，但这没有帮助。
如何解决这个问题？
答案 0 :(得分：0)
根据评论者的有用提示，我找到了两个简单的解决方案。
添加属性ClientMode="static"的建议很有用。在我的情况下，使用.Net版本3.5，没有这样的属性，所以这意味着升级到.Net版本4.
但是，在.Net 4中，ClientMode的默认值是Predictable，它与static一样有用。因此无需添加此属性。
总之，解决方案是升级到.Net 4，而不添加ClientMode属性。
使用.Net 4项目中发布的未更改文件，Bootstrap菜单下拉工作正常。
我测试了即使使用第二个MasterPage，.Net4项目中的菜单下拉列表也可以在没有ClientMode属性的情况下正常工作。
另一个选项，当与.Net 3.5一起使用时，predict将id="navbar"由IIS / ASP修改为id="ctl01_navbar"并在data-target中使用相同的前缀ID {1}}属性。我刚刚测试了那个使下拉列表适合我。
优点：短期内工作量减少，无需升级到.Net4，如果网站的所有功能都能正常运行，那么测试会遇到各种麻烦。
缺点：从长远来看问题：如果我们升级到.Net4，我们可能会忘记解决方法，因此升级会破坏Bootstrap下拉列表。但是，如果将另一个MasterPage添加到系统或删除，前缀中的数字可能会更改。
就我而言，在将MasterPage1复制到MasterPage2之后，两个主页的前缀从ctl01_更改为ctl00_。