您好,登錄后才能下訂單哦!
本篇內容介紹了“HTML怎么在web窗體調用操作母版頁內容元素”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠學有所成!
標準化網站布局的格式只是整個過程的一部分,你還需要保證通用的元素,如網站的標題、網站的導航控件等在每個頁面里都出現在相同的位置。解決這一問題的關鍵在于創建一個可以重復應用到整個網站的簡單而靈活的布局。有 3 個基本辦法可以選擇:
用戶控件。用戶控件時標準化通用頁面元素的優秀方式,但是,它們自身并不能解決頁面布局的問題,因為沒有辦法保證用戶控件在所有頁面中都被放到同樣的位置。HTML 框架。框架是在一個瀏覽器窗口中同時顯示多個頁面的 HTML 基本工具。它的主要缺點是它里面的每個頁面必須通過單獨請求服務器進行檢索,這些頁面的代碼不得不完全獨立。這同時意味著一個框架里的頁面不能和其他框架中的頁面交互,也不能影響其他框架中的頁面。(至少不能通過服務器端代碼)母版頁。母版頁是 ASP.NET 的一個特性,它專門設計用于標準化 Web 頁面布局。它可定義固定的內容并聲明 Web 頁面里可插入自定義內容的部分。如果在整個網站中使用同一個母版頁,就可以確保獲得同樣的布局。最妙的是,如果修改了母版頁的定義,應用它的所有頁面都會自動變化。
要為頁面模版提供一個可操作且靈活的解決方案,必須滿足以下幾個條件。
要能夠單獨定義頁面的某個部分并在多個頁面里重用它。要能夠創建一個定義了可編輯區域的封閉布局。重用這個模版的頁面只能夠在許可的區域內添加或修改內容。頁面能夠對重用的元素做一些自定義。可以聲明性的綁定頁面倒頁面模版(不使用代碼)或者能夠在運行時動態綁定到頁面。可以用工具(如 VS)設計一個使用頁面模版的頁面。
為了實現這一切,ASP.NET 定義了兩種新的頁面類型:母版頁和內容頁。
母版頁和普通的 Web 頁面一樣,它可以包含任何 HTML、Web 控件甚至代碼的組合。母版頁還可以包含內容占位符(定義的可修改區域)。
內容頁引用一個母版頁并獲得它的布局和內容。此外,內容頁可以在任意的占位符里加入頁面特定的內容。換句話說,內容頁將母版頁沒有定義的缺失了的內容填入母版頁。
母版頁和一般Web窗體的區別是:
母版頁由 Master 指令開始,并提供和 Page 指令相同的信息。而所有 Web 窗體都由 Page 指令開始。只有母版頁才可以使用 ContentPlaceHolder 控件,這個控件是內容頁可以插入內容的部分。
創建一個母版頁后,會得到一個只包含 2 個 ContentPlaceHolder 控件的空白頁。第一個是在 <head> 區域定義的,它讓內容頁面能夠增加頁面元數據,比如搜索關鍵字和樣式表鏈接。第二個也是更重要的 ContentPlaceHolder 被定義在 <body> 區域,它代表頁面顯示的內容。
另外,母版頁不能被直接請求,要使用母版頁,必須創建一個關聯的內容頁。
下面是個簡單的母版頁示例,它有一個靜態的橫幅,其后跟著一個 ContentPlaceHolder 控件,然后是一個頁腳:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="SiteTemplate.master.cs"
Inherits="Chapter16_SiteTemplate" %>
<html xmlns="">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style="background: black; height: 87px; font-weight: bold; font-size: 20px;
color: white; font-family: Verdana">
<img align="left" src="headerleft.jpg" />
<img align="right" src="headerright.jpg" />
<br />
<asp:ContentPlaceHolder ID="TitleContent" runat="server">
My Site
</asp:ContentPlaceHolder>
</div>
<br />
<br />
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<br />
<em>Copyright ? 2008.</em>
</div>
</form>
</body>
</html>
要在其他頁面里使用母版頁,必須在 Page 指令里加入 MasterPageFile 特性:
<%@ Page Title="" Language="C#" MasterPageFile="——/Chapter16/SiteTemplate.master" … %>
只設置 MasterPageFile 特性還不足以把普通的頁面轉變成內容頁。內容頁必須定義要插入一個或多個 ContentPlaceHolder 控件的內容(并編寫這些控件需要的代碼)。由于母版頁已經提供了外殼,因此,試圖在內容頁中加入 <html>、<head>、<body> 之類的元素,則會產生一個錯誤。
要為 ContentPlaceHolder 提供內容,要用到另一個叫 Content 的特殊控件。ContentPlaceHolder 和 Content 控件具有一對一的關系。對于母版頁里的每個 ContentPlaceHolder ,內容頁會提供一個對應的 Content 控件(除非不準備為那個區域提供任何內容)。ASP.NET 通過匹配 ContentPlaceHolder 的 ID 和對應的 Content控件的 Content.ContentPlaceHolderID 屬性將它們對應起來。
<%@ Page Title="" Language="C#" MasterPageFile="——/Chapter16/SiteTemplate.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Chapter16_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<p class="Code" style="margin: 0in 0.1in 0pt 0in">
<span style="font-size: 10pt; font-family: TheSansMonoConNormal">Far out in the uncharted
backwaters of the unfashionable end of the western spiral arm of the Galaxy lies
a small unregarded yellow sun.</span></p>
</asp:Content>
<asp:Content ContentPlaceHolderID="TitleContent" ID="Content2" runat="server">
Custom Title</asp:Content>
為了更好的理解母版頁是如何工作的,值得通過跟蹤(在 Page 指令里加入 Trace=true)來看看內容頁。借助這種方式可以了解控件的層次。你會發現 ASP.NET 首先為母版頁創建控件對象,包括 ContentPlaceHolder(它充當一個容器),接著它會把內容頁的控件加入 ContentPlaceHolder 。
如果需要動態配置母版頁或內容頁,可以響應任意一個類中的 Page.Load 事件。有時你可能會同時在母版頁和內容頁中使用初始化代碼。這種情況下,理解每個事件發生的順序就很重要。ASP.NET 首先創建母版頁控件,然后添加內容頁的子控件。然后它觸發母版頁的 Page.Init 事件,隨后是內容頁的 Page.Init 事件。對于 Page.Load 事件,也是相同的步驟。(如果有沖突,那么內容頁的自定義會覆蓋在母版頁相同階段所做的修改)
母版頁定義 ContentPlaceHolder 時可以包含默認的內容(內容頁沒有提供相應的 Content 控件時才會使用的內容)。
內容頁不能只使用母版頁默認內容的一部分或只編輯這一部分。這是不可能的,因為默認內容是保存在母版頁里面而不是內容頁中。所有,要么完全使用,要么就全部替換它。
HTML 使用基于流的布局。這意味著隨著內容的增加,頁面會被重新組織,其他一些內容會被擠到一邊。這樣的布局會使得難以獲得母版頁預期的結果。如果你不小心,就會破壞原本完美的布局,插入到 <Content> 標簽的大量信息會把頁面結構弄得亂七八糟。
為了控制這些問題,大部分母版頁使用 HTML 表格或者 CSS 定位來控制布局。
使用表格時,基本原則是把整個頁面或頁面的部分分解到行和列里。然后你就可以把 ContentPlaceHolder 加入到某個單元格里,從而保證其他內容多少會按照預期的那樣對齊。
使用 CSS 定位時,基本思想是把內容放入 <div> 標簽,然后使用絕對坐標控制 <div> 的位置或者讓它們浮動在頁面的某一邊,最后你可以把 ContentPlaceHolder 放入 <div> 標簽。
“HTML怎么在web窗體調用操作母版頁內容元素”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站,小編將為大家輸出更多高質量的實用文章!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。