[VB]ASP.NET建立Master Page 頁簽
網頁上方頁簽(Tab)做法有幾多種
可利用CSS與JS或JQUER就可以做出動態頁簽
這次範例，會用Bootstrap與asp.net
Master Page設定:
首先，在專案右鍵，建立一個新的master page
開啟後，設計畫面上，
<head>裡會有兩段程式碼
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
與<body>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</body>
將要顯示在master page的tag寫在 <body>asp:ContentPlaceHolder 裡。
另外，在 </asp:ContentPlaceHolder>下方
需加上
<div class="container-fluid">
<asp:ContentPlaceHolder runat="server" ID="home" /> ←顯示於頁簽下在的網頁
</div>
原則上，若需要每個子網頁上方都有頁簽，那每個子網頁都必需在這註冊，才能正常顯示。
子網頁設定:
開啟新網頁，畫面如下
網頁上<%@ Page 處，增加 MasterPageFile="~/Tab.Master" ，
然後 <!DOCTYPE html>到</html>程式碼刪除
增加
<asp:Content runat="server" ID="about" ContentPlaceHolderID="about">
...內容
</asp:Content>
以上，子網頁設定完成，
記得要在master page 註冊子網頁的ID。
頁簽的部份，則由用bootstrap套件來達成。
利用Nu Get來下載bootstrap套件。
並在master page <head>裡，引入css
</body>上方，引入JS
(參考範例圖)
相關樣式可到 Bootstrap官網 的 導覽列 (Navbar)
參考程式
可利用CSS與JS或JQUER就可以做出動態頁簽
這次範例，會用Bootstrap與asp.net
Master Page設定:
首先，在專案右鍵，建立一個新的master page
開啟後，設計畫面上，
<head>裡會有兩段程式碼
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
與<body>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</body>
將要顯示在master page的tag寫在 <body>asp:ContentPlaceHolder 裡。
另外，在 </asp:ContentPlaceHolder>下方
需加上
<div class="container-fluid">
<asp:ContentPlaceHolder runat="server" ID="home" /> ←顯示於頁簽下在的網頁
</div>
原則上，若需要每個子網頁上方都有頁簽，那每個子網頁都必需在這註冊，才能正常顯示。
子網頁設定:
開啟新網頁，畫面如下
網頁上<%@ Page 處，增加 MasterPageFile="~/Tab.Master" ，
然後 <!DOCTYPE html>到</html>程式碼刪除
增加
<asp:Content runat="server" ID="about" ContentPlaceHolderID="about">
...內容
</asp:Content>
以上，子網頁設定完成，
記得要在master page 註冊子網頁的ID。
頁簽的部份，則由用bootstrap套件來達成。
利用Nu Get來下載bootstrap套件。
並在master page <head>裡，引入css
</body>上方，引入JS
(參考範例圖)
相關樣式可到 Bootstrap官網 的 導覽列 (Navbar)
參考程式
<%--
--%>
--%>
留言
張貼留言