0
ブートストラップについて興奮しています私たちのサイトのマスターページのメニューを置き換えています。 test.aspxページで作業するにはいいメニューがありますが、これをマスターページに入れると、小さな画面用のハンバーガーアイコンにはドロップダウンメニューが表示されません。これはBootstrap to Asp.Netの組み合わせの主な制限ですか、私はここで何か間違っていますか？マスターページを使用して、実際のページBootstrapドロップダウンメニューをASPマスターページで使用するには
<%@ 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>
、私はコード - を残しましたビジュアルスタジオで作成されたページだけが残っています。
.Netのバージョンは3.5です。
このテストに基づいて、MasterPageがブートストラップを破損しているように見えます。しかし、Bootstrapのような便利なパッケージはAsp Masterpageで利用できないと信じるのは難しいです。
他にどのように数十ページのサイト用のメニューバーをコーディングしますか？
コメンタージェイソンは右です：マスターページでのID値が確実にブートストラップではJavaScriptがそれらを見つけることができないという理由でctl100_のようなもの、とのAspシステムによって始まります。
ここブラウザから見た要部である：
<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>
2つのIDがctl100_navbarとctl100_ul_menuするIIS/ASPによって修飾されます。
データターゲットを#ctl100_navbarに変更しようとしましたが、それが役に立たなかった。
この問題を回避するには？
ブラウザのJavaScriptコンソールを開いてから、ハンバーガーメニューをもう一度クリックしてみてください。コンソールにJavaスクリプトエラーが発生していないかどうか確認してください。私はASPXを使用している年月が経ちましたが、HTML要素のIDまたは名前が動的に変更されて、JavaScriptがそれらを見つけることができないと考えられます。 –
@JasonRonerはそれを試しましたが、エラーはありません。私は@JasonRonerがあまりにもこれをしようとしましたが、ない改善 – Roland
変更されたID名をFirefoxで両方のaspxページのビュー・ソースを比較しようとします。 –