iT邦幫忙

第 11 屆 iThome 鐵人賽
DAY 30
2
Modern Web

ASP.NET Web Form 入門30天系列 第 30 篇

[ASP.NET] Master Pages 主版頁面 (下) + 範例

11th鐵人賽 asp.net masterpage contentpage hiddenfield隱藏欄位應用
15174 瀏覽

  • 分享至 

  • xImage
    •  

本篇擷取重點：

  1. ContentPage及 MasterPage 如何讀取對方的相關控制項
  • 由 ContentPage 讀取 MasterPage 的控制項
  • 由 MasterPage 讀取 ContentPage 的控制項
  1. Master Pages 主版頁面的應用範例

一、ContentPage及 MasterPage 如何讀取對方的相關控制項

參考資料：
http://vito-note.blogspot.com/2012/10/master-page.html (大推薦)

1. 由 ContentPage 讀取 MasterPage 的控制項

在內容頁，除了可以讀取主版頁的屬性之外，也可以呼叫 Master.FindControl 方法，利用控制項的名稱找出控制項。

在ContentPage中：

protected void Page_PreRender(object sender, EventArgs e)
{
    //reference Control
    Label Label1 = (Label)Master.FindControl("Label1");
    Page.Header.Title = Label1.Text;
}

ContentPage的控制項類別 ContentPage的控制項名稱 = (MasterPage的控制項類別)Master.FindControl("MasterPage控制項ID");

其中，ContentPage的控制項是為了與MasterPage的控制項接口而建立的。

2. 由 MasterPage 讀取 ContentPage 的控制項

叫用 ContentPlaceHolder.FindControl 以取得內容頁的控制項。

在MasterPage中：

Button button1 = ContentPlaceHolder1.FindControl("btnTest") as Button;
    if (button1 != null)
    {
        myMessage.Show(button1.Text + " button exist");
    }

MasterPage的控制項類別 MasterPage的控制項名稱 = ContentPlaceHolder1.FindControl("ContentPage控制項ID") as (ContentPage的控制項類別);

其中，

  • MasterPage的控制項是為了與 ContentPage的控制項接口而建立的。
  • ContentPlaceHolder1為ContentPlaceHolder控制項的ID名稱。

二、Master Pages 主版頁面的應用範例

我們先來看看下面照張圖片，頁面由上至下分成4個DIV，其中第1.2.4個div都是在寫在MasterPage中(用水藍色表示)，唯有第3個div是寫在ContentPage中(用鵝黃色表示)。

觀看重點，如下：

  • 左上角的分頁名稱會隨分頁的轉換改變(在ContentPage使用Master.Page.Title來做變更title)
  • 第1個DIV顯示的Label不會隨著分頁的轉換而改變(因為是寫在MasterPage中)
  • 第2個DIV顯示的button會隨所在分頁將其button反紅表示
  • 第4個DIV顯示的Label，示範如何在 ContentPage讀取 MasterPage的控制項。
  • 第3個DIV的內容，是依照其所在不同的ContentPage而有不同的顯示，但此例上方Label的內容，示範如何在MasterPage讀取 ContentPage的控制項。

頁面顯示(mainPage.aspx)：
https://ithelp.ithome.com.tw/upload/images/20191001/20120056ZEb0MesAUb.jpg

頁面顯示(WebForm1.aspx)：
https://ithelp.ithome.com.tw/upload/images/20191001/20120056CKSGB0yrH8.jpg

==================================================================
貼心小補充

其中，較特別的是如第2個DIV顯示的button，要如何依所在分頁做差異性的顯示

  1. 在MasterPage的設計頁面中，放一個隱藏欄位
< asp:HiddenField ID="HiddenField1" runat="server" />)。
  1. 在各個ContentPage後置程式碼中，建立一個控制項物件作為連接MasterPage控制項的接口，在對其賦值(本題賦予的值為該分頁的檔案名稱)，意即將"該ContentPage的檔案名稱"存至"MasterPage的隱藏欄位中"。
HiddenField HiddenField1 = (HiddenField)Master.FindControl("HiddenField1");
HiddenField1.Value = System.IO.Path.GetFileName(Request.PhysicalPath);
  1. 在MasterPage的後置程式碼中，針對隱藏欄位的內容來判斷，做出差異性顯示(如本題將Button改為紅色)。
if (HiddenField1.Value == "mainPage.aspx")
    {
        Button2.BackColor = Color.Red;
    }
if (HiddenField1.Value == "WebForm1.aspx")
    {
        Button1.BackColor = Color.Red;
    }

==================================================================

程式碼全文開始：

1. 新增一個MasterPage，本例取名為Site1.master

Site1.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="masterpage_test.Site1" %>

<!DOCTYPE html>

<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div style="background-color: darkturquoise">
            <h1><asp:Label ID="Label1" runat="server" Text="2019夏季日劇 凪的新生活( MasterPage 讀取 MasterPage 的 Controls)" ></asp:Label></h1>
        </div>
        <div style="background-color: darkturquoise">
            <asp:HiddenField ID="HiddenField1" runat="server" />
        <asp:Button ID="Button2" BackColor="darkturquoise" runat="server" Text="全圖" OnClick="Button2_Click" />
            <asp:Button ID="Button1" BackColor="darkturquoise" runat="server" Text="局部放大" OnClick="Button1_Click" />
        </div>
        <div style="background-color: palegoldenrod;  ">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div style="background-color: darkturquoise">
            <h1><asp:Label ID="Label2" runat="server" Text="MasterPage_Labe2" ></asp:Label></h1>
        </div>
    </form>
</body>
</html>

Site1.Master.cs

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace masterpage_test
{
    public partial class Site1 : System.Web.UI.MasterPage
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                if (HiddenField1.Value == "mainPage.aspx")
                {
                    Button2.BackColor = Color.Red;
                }
                if (HiddenField1.Value == "WebForm1.aspx")
                {
                    Button1.BackColor = Color.Red;
                }
                Label Label_contentPage = ContentPlaceHolder1.FindControl("Label_contentPage") as Label;
                Label_contentPage.Text = "2019夏季日劇 凪的新生活(由 MasterPage 讀取 ContentPage 的 Controls)";
            }

        }
        protected void Button1_Click(object sender, EventArgs e)
        {
            Response.Redirect("WebForm1.aspx");
        }
        protected void Button2_Click(object sender, EventArgs e)
        {
            Response.Redirect("mainPage.aspx");
        }
    }
}

2. 新增，第一個ContentPage，取名為mainPage.aspx

mainPage.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="mainPage.aspx.cs" Inherits="masterpage_test.mainPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:Label ID="Label_contentPage" runat="server" Text="ContentPage_Label"></asp:Label><br/>
    <img alt="" src="https://i.ytimg.com/vi/ZodCFTlUiW0/maxresdefault.jpg" style="  object-fit: scale-down ; width: 100%; height: 300px;" /><br/>
</asp:Content>

mainPage.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace masterpage_test
{
    public partial class mainPage : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                // 寫至 MasterPage 的 Head 的 Tittle。
                Master.Page.Title = "凪的新生活-全圖(ContentPage 讀取 MasterPage 的title)";

                HiddenField HiddenField1 = (HiddenField)Master.FindControl("HiddenField1");
                HiddenField1.Value = System.IO.Path.GetFileName(Request.PhysicalPath);

                Label Label2 = (Label)Master.FindControl("Label2");
                Label2.Text = "(ContentPage 讀取 MasterPage 的 Controls)-全圖";
            }
        }
    }
}

3. 新增，第二個ContentPage，取名為WebForm1.aspx

WebForm1.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="masterpage_test.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:Label ID="Label_contentPage" runat="server" Text="ContentPage_Label"></asp:Label><br/>
    <img alt="" src="https://i.ytimg.com/vi/ZodCFTlUiW0/maxresdefault.jpg" style="  object-fit: cover ; width: 100%; height: 300px;" /><br/>
</asp:Content>

WebForm1.aspx.cs

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace masterpage_test
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                // 寫至 MasterPage 的 Head 的 Tittle。
                Master.Page.Title = "凪的新生活-局部放大(ContentPage 讀取 MasterPage 的title)";

                HiddenField HiddenField1 = (HiddenField)Master.FindControl("HiddenField1");
                HiddenField1.Value = System.IO.Path.GetFileName(Request.PhysicalPath);

                Label Label2 = (Label)Master.FindControl("Label2");
                Label2.Text = "(ContentPage 讀取 MasterPage 的 Controls)-局部放大";
            }
        }

    }
}

頁面顯示(mainPage.aspx)：
https://ithelp.ithome.com.tw/upload/images/20191001/20120056ZEb0MesAUb.jpg

頁面顯示(WebForm1.aspx)：
https://ithelp.ithome.com.tw/upload/images/20191001/20120056CKSGB0yrH8.jpg

完成，終於結束三十天三十篇惹，開心 >////<

較深刻的體悟，如下：

  1. 事先安排好探討內容主題並掌握好進度，以免寫到後面越來越空泛。
  2. 資料來源的正確度要掌握，而通常書本的精確度會比未經篩選的網路文章來的準確。
  3. 寫文章前，覺得自己已經了解的東西，在企圖以文字敘述出來時，會發現自己的"知道"是不精確的，距離能以文字精確表達出來有很大的差距，尤其有牽涉到底層的學理的內容，學習初期的我們通常不太有感覺，所以我會建議先求有(會用)再求好(較精確的學理)，等累積到一定經驗後再回頭看，一定會有不一樣的體悟。

p.s 特別感謝 @小朱 朱大的提醒及建議，感謝學習的路上有你 XDD

此篇內容整理自多篇網路文章、PPT及自己的理解，但筆者也仍處在初階的學習過程，對程式概念的理解及判斷都尚不足，若有錯誤的地方，也煩請各位大大提點，先謝謝大家惹！！


上一篇
[ASP.NET] Master Pages 主版頁面 (上)
系列文
ASP.NET Web Form 入門30天 共 30 篇
  1. 26
    [ASP.NET] 工具箱常用的伺服器控制項 - Textbox (補充 HTML 5 密碼驗證)
  2. 27
    [ASP.NET] 工具箱常用的伺服器控制項 - CheckBox (全選的JS?)
  3. 28
    [ASP.NET] 新增泛型處理常式(.ashx)及瀏覽上傳圖片的範例
  4. 29
    [ASP.NET] Master Pages 主版頁面 (上)
  5. 30
    [ASP.NET] Master Pages 主版頁面 (下) + 範例
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2020-02-29 12:42:34

恭喜完賽!!

登入發表回應

我要留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙