母版頁允許開發人員創建具有指定的可編輯區域的站點級模板。隨后，此模板可應用到網站中的 ASP.NET 頁面上。這些 ASP.NET 頁面只需為母版頁中指定的可編輯區域提供相應內容 – 在使用母版頁的所有 ASP.NET 頁面中，母版頁中的所有其它標記都相同。此模型允許開發人員定義並集中實現站點級頁面布局。 因此，開發人員可以方便地為所有頁面創建一致的外觀，並進行輕松的更新。
簡而言之：在一個網站上會有很多頁面，並且有可能有的頁面都有相同的部分，這樣的話我們就可以將相同的部分制作成一個母版頁，在多個頁面進行調用，節省了代碼的重復使用和開發效率。
開發過程：
新建兩個html文件HtmlPage1.html，HtmlPage2.html，一個web窗體WebForm.aspx,一個web窗體用戶控件WebUserControl1.ascx
第一種方式，利用純html制作
1.首先我們先用靜態html制作一個母版頁，再利用iframe來顯示母版頁
HtmlPage1.html為母版頁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
margin:0px;
}
#top{
width:100%;
height:100px;
background-color:#6f5e5e;
}
.left{
float:left;
margin-top:12px;
margin-left:25px;
}
.logo{
margin-left:auto;
margin-right:auto;
margin-top:25px;
}
img{
vertical-align:middle;
}
.right{
float:right;
}
</style>
</head>
<body>
<div id="top">
<img src="img/leftcloud.png" class="left" />
<img src="img/logo.png" class="logo" />
<img src="img/rightcloud.png" class="right" />
</div>
</body>
</html>
HtmlPage2.html來調用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body style="margin:0px">
<iframe src="HtmlPage1.html" width="100%" height="100px"></iframe>
//利用iframe框架標簽來顯示
</body>
</html>
第二種方式利用ASP.NET制作
分別利用iframe框架標簽和調用web用戶控件來顯示
用web用戶控件制作母版頁，因為測試所以代碼跟HtmlPage1.html基本一樣
web窗體用戶控件WebUserControl1.ascx代碼
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="WebApplication3.WebUserControl1" %> <style> body{ margin:0px; } #top{ width:100%; height:100px; background-color:#6f5e5e; } .left{ float:left; margin-top:12px; margin-left:25px; } .logo{ margin-left:auto; margin-right:auto; margin-top:25px; } img{ vertical-align:middle; } .right{ float:right; } </style> <div id="top"> <img src="img/leftcloud.png" class="left" /> <img src="img/logo.png" class="logo" /> <img src="img/rightcloud.png" class="right" /> </div>
web窗體WebForm1.aspx調用代碼
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %> 2 3 <%@ Register Src="~/WebUserControl1.ascx" TagPrefix="uc1" TagName="WebUserControl1" %> 4 5 6 <!DOCTYPE html> 7 8 <html xmlns="http://www.w3.org/1999/xhtml"> 9 <head runat="server"> 10 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 11 <title></title> 12 </head> 13 <body style="margin:0px"> 14 <!--兩種方式嵌入不需要改變的網頁顯示部分--> 15 <iframe src="HtmlPage1.html" width="100%" height="100px"></iframe> <!--iframe 框架標簽--> 16 17 <form id="form1" runat="server"> 18 <uc1:WebUserControl1 runat="server" id="WebUserControl1" /> 19 <!--web窗體用戶控件--> 20 </form> 21 </body> 22 </html>
asp調用web窗體用戶控件很簡單，你着需要從解決方案那里把用戶控件拖到代碼區就行了，厲害吧