如何让 Bootstrap 下拉菜单在 ASP 母版页中工作答案

【问题标题】：How to get Bootstrap dropdown menu to work in ASP masterpage如何让 Bootstrap 下拉菜单在 ASP 母版页中工作
【发布时间】：2017-09-05 16:07:36
【问题描述】：

对 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 Masterpage 一起使用。

对于一个有几十页的网站，我该如何编写菜单栏？

评论者 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，但这没有帮助。

如何解决这个问题？

【问题讨论】：

打开浏览器的 javascript 控制台，然后再次尝试单击汉堡菜单。观察控制台以查看是否有任何 javascript 错误。我使用 ASPX 已经很久了，但我相信 HTML 元素的 ID 或名称会动态更改，因此 javascript 无法找到它们。
@JasonRoner 试过了，没有错误。我将尝试比较Firefox中两个aspx页面的视图源以更改ID名称
尝试将任何 js 脚本从移动到之前的末尾
将 ClientIDMode 设置为静态 msdn.microsoft.com/en-us/library/…
@WithMetta 好提示！我必须将网站升级到 .Net 4，明天早上我会试试这个。

标签： c# asp.net twitter-bootstrap drop-down-menu master-pages

【解决方案1】：

根据评论者的有用提示，我找到了两个简单的解决方案。

添加属性ClientMode="static" 的建议很有用。就我而言，.Net 3.5 版没有这样的属性，所以这意味着升级到 .Net 4 版。

但是，在 .Net 4 中，ClientMode 的默认值是 Predictable，这与静态一样有用。所以不需要添加这个属性。

总的来说，解决方案是升级到.Net 4，不添加ClientMode属性。

使用 .Net 4 项目中发布的未更改文件，Bootstrap Menu Dropdown 工作正常。

我测试过，即使使用第二个 MasterPage，.Net4 项目中的菜单下拉菜单在没有 ClientMode 属性的情况下也能正常工作。

当使用 .Net 3.5 时，另一个选项是 predict，即 id="navbar" 被 IIS/ASP 修改为 id="ctl01_navbar"，并在 data-target 属性中使用相同的前缀 id。我刚刚测试了这使得下拉菜单对我有用。

优点：短期内工作量少，无需升级到.Net4，如果网站的所有功能都可以正常工作，则无需进行测试。

缺点：长期存在问题：如果我们升级到 .Net4，我们可能会忘记解决方法，因此升级会破坏 Bootstrap 下拉菜单。但是，如果另一个 MasterPage 被添加到系统中或被删除，前缀中的数字可能会改变。

在我的例子中，将 MasterPage1 复制到 MasterPage2 后，两个母版页的前缀都从 ctl01_ 更改为 ctl00_。

【讨论】：