使用Master Pages 建立風格統一的Site(Master Pages 系列之一)

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本篇為Master Pages 系列的第一篇.所以激動無比,因為剛開始寫Blog,所以錯誤有可能在所難免,請各位達人批評指正,在下悉心接受並改正.

介紹:

設計良好的網站LayOut有兩個很好的特性.一個就是整個網站保持統一的網站風格,我們可以看下Http://www.asp.met (圖1),基本上每個頁面都的Top,Bottom,這樣能保證網站看起來有統一的風格.

(圖1)

另一個就是很容易的去改變網站的外觀,也就是可以很容易,很快速的改變頁面的顏色,字型,以及頁面內容的擺放,而不是每改變一種風格,要去修改成千上萬的頁面和代碼.

那麼如何才能建立風格統一的網站呢?.NET Master Pages就是我們要使用的控制項了.使用Master Pages ,我們很容易的建立一個通用的模板頁,這樣我們只要改變模板頁面的樣式,就可以很輕鬆的改變整個網站的外觀.

好了.廢話不說了.我們先來看看Master Pages 是怎樣工作的.

我們通常的WebSite除了內容頁面的不用之外,其他的諸如Top,Bottom,Left等部分,我們需要顯示基本一樣的內容,就像Http://www.asp.net網站一樣,Top是頁面的Logo和一系列的連結,Bottom是廣告或者一些CopyRight資訊.這些內容是每個頁面都需要的.

那麼我們怎樣建立這種風格的網站? 現在有很多技術可以這樣做比如用Frame,UserControl等等.然而最快速的,最容易的方法是通過master Pages去建立.Master Pages既可以建立通用的部分,又可以建立顯示不用內容的自訂部分.

Step1:建立Master Page

首先建立一個網站(圖2)

(圖2)

緊接著Add一個MasterPage(圖3)

(圖3)

看一下Site.Master的Html代碼

Site.Master Html
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Master Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

我們可以看到Site.Master的Html代碼

.Web Form(<form runat="server"> )跟我們建立.apx頁面一樣.

.Contentplaceholder 這個就是顯示自訂內容的控制項.

建立一個簡單的布局.

開啟我們Site.Master,建立一個通用的版面設計:Header,Left (導航),News(內容),Footer.(圖4)

(圖4)

Step2: 增加內容Pages

一切準備就緒了.我們就可以開始建立內容頁面了.增加內容頁面很簡單,就跟平常建立ASPx頁面一樣.唯一的區別就是在彈出的頁面建立視窗選擇Master Page.(圖5)

新增內容,我們可以在我們建立的頁面上建立任何內容,因為它就跟ASPX一樣.可以添加webcontrols,text,Html 代碼等等.在我們的執行個體中,我只是添加了一些Text文本.(4)

到這兒我們就講完了簡單的建立MasterPages頁面.如果你想知道到底一個Master Pages 頁面是如何產生代碼的,你可以直接在頁面上右鍵查看源碼就可以了.

但是我們在建立網站的過程中.怎麼可以把一個Master Page 應用到一個已經存在的ASPX 頁面??

Follow me:

1: 給已存在頁面的@Page指令增加MasterPageFile 屬性,並指向Master頁.(MasterPageFile="~/Site.master" )

2:增加於Master Pages 中ContentPlaceHolder 控制項相對應的Content控制項<asp:Content id="content1" ContentPlaceHolderID="MainContent" runat="server"></asp:Content>

3:去掉Html以及Form的相關代碼,因為在Master Page中已經存在了相應的代碼.

這樣我們就可以給一個已經建立的ASPX頁面綁定Master Page .但是我們可以看到.很費時費力.而建立新的ASPX頁面.直接可以選擇Master Page 就相對簡單.因此我們建議無論在怎麼的網站中.我們首先建立一個Master Page ,不管你用到還是不用到.

Step 3:更新Master Page

由於一個Master Page我們在整個網站中通用.所以我們要更新一些公用的部分.只要更新Master Page 模板.下面列舉一個簡單的執行個體:在Left 顯示時間.我們只需要在Master Left中添加一個Label ,在後台代碼的Page_Load事件中賦值就可以了

顯示時間
<div id="divLeftContnet">
     <asp:Label ID="lblTime" runat="server"></asp:Label>
      <h3>課程</h3>
        <ul>
            <li>Master Pages</li>
        </ul>
         <h3>新聞</h3>
        <ul>
            <li>言行一</li>
        </ul>
    </div>

後台

Code
protected void Page_Load(object sender, EventArgs e)
    {
        this.lblTime.Text = DateTime.Now.ToString();
    }

看下效果

至此我們Master Page 系列的第一講就結束了.更多內容請關注下一講<<多個ContentPlaceHolders>>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

使用Master Pages 建立風格統一的Site(Master Pages 系列之一)

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support