Ch ng 5 Thi t k Website v i MasterPageươ ế ế ớ
B n đang g p v n đ thi t k layout chung cho website c a mình? MasterPage có th làạ ặ ấ ề ế ế ủ ể
m t đáp án t t cho b n gi i quy t bài toán trên.ộ ố ạ ả ế
V i MasterPage đ t o m t giao di n chung nh t cho Website c a mình. Ví d website c aớ ể ạ ộ ệ ấ ủ ụ ủ
b n có layout g m 5 ph n banner, footer, left, right ạ ồ ầ
Và content(ph n ch a n i dung hi n th cho các tin). Nh v y b n có th th y trên trangầ ứ ộ ể ị ư ậ ạ ể ấ
web có các ph n có cách trình b y không thay đ i trong quá trình duy t tin. banner, footer,ầ ầ ổ ệ
left, right: b n có th đ các ph n này vào m t MasterPage và t t các trang web trongạ ể ể ầ ộ ấ
website c a b n s áp d ng layout này thông qua contentpageủ ạ ẽ ụ
I. T o MasterPageạ
Các b c t o MasterPage gi ng v i t o các trang aspx bình th ng nh ng trên h p Addướ ạ ố ớ ạ ườ ư ộ
New Item b n ch n MasterPage b n th y d i ô đ t tên ph n m r ng c a nó s làạ ọ ạ ấ ướ ặ ầ ở ộ ủ ẽ
Master. B n có th t o nhi u MasterPage cho ng d ng web c a mình.ạ ể ạ ề ứ ụ ủ
Ví d :ụ
Code 1.
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs"
Inherits="MasterPage" %>
<!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>MasterPage</title>
<style type="text/css">
html{ background-color:#e5e5e5; font-family:Verdana;}
.content{ background-color:White; border:black 1px solid; width:700px; margin:auto;}
.leftcolumm{ float:left; border-right:black 1px solid; width:200px; padding:5px;
height:300px}
.rightcolumm{ float:left; padding:5px; height:300px}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<div class="leftcolumm">
<asp:ContentPlaceHolder ID="contentplace1"
runat="server"></asp:ContentPlaceHolder>
</div>
<div class="rightcolumm">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
</html>
Đ s d ng MasterPage cho các trang aspx b n c n khai báo trên ch d n <%@ Page %>ể ử ụ ạ ầ ỉ ẫ
v i thu c tính MasterPageFile=”Tên _MasterPage c a b n”ớ ộ ủ ạ
ví dụ
code 2
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" %>
<asp:Content ID="contentleft" ContentPlaceHolderID="contentplace1" runat="server">
Trinh bay menu Left<br />
Trinh bay menu Left<br />
Trinh bay menu Left<br />
Trinh bay menu Left<br />
</asp:Content>
<asp:Content ID="content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
Trinh bay noidung<br />
Trinh bay noidung<br />
Trinh bay noidung<br />
Trinh bay noidung<br />
</asp:Content>
Trên trang aspx b n khai báo 2 đi u khi n asp:content và trong thu c tính c a nó b n thi tạ ề ể ộ ủ ạ ế
l p ContentPlaceHolderID=”Ten_Placeholder trong trang masterPage”.ậ
T o m t Content m c đ nhạ ộ ặ ị
B n không th k t h p m t đi u khi n Content v i t t c các đi u khi nạ ể ế ợ ộ ề ể ớ ấ ả ề ể
ContentPlaceHolder. Khi trên trang MasterPage c a b n có 3 ContentPlaceHolder mà trongủ ạ
trang aspx c a b n ch s d ng hai đi u khi n aspContent và ch đ n 2 ContentPlaceHolderủ ạ ỉ ử ụ ề ể ỉ ế
trên trang MasterPage khi đó m c đ nh ContentPlaceHolder th 3 v n đ c hi n th .ặ ị ứ ẫ ượ ể ị
Đăng ký Master Page trong WebConfiguration
B n có th áp d ng MasterPage cho t t c các trang trong m t Folder hay t t c cácạ ể ụ ấ ả ộ ấ ả
Content trong ng d ng web c a mình. ứ ụ ủ
Thay vì vi c trong m i trang aspx b n ph i g i l i ch d n trang th ch d n <%@ Pageệ ỗ ạ ả ọ ờ ỉ ẫ ẻ ỉ ẫ
%> thì b n có th thêm nó vào trong file webconfigurationạ ể
Trong ví d d i đây là cách b n s đăng ký m t trang SimpleMasterPage vào ng d ngụ ướ ạ ẽ ộ ứ ụ
web c a mình đ có th áp d ng cho t t c các trang trong foder(Sub Folder) ch aủ ể ể ụ ấ ả ứ
Chú ý r ng file web.config này ph i cùng n m trong foleder đó:ằ ả ằ
<system.web>
<pages masterPageFile="~/SimpleMasterPage.master" />
</system.web>
S d ng FindControl trong MasterPage.ử ụ
Khi b n c n ch nh s a hay l y thông tin c a 1 đi u khi n t MasterPage b n có th sạ ầ ỉ ử ấ ủ ề ể ừ ạ ể ử
d ng ph ng th c FindControl() trong m t Content Pageụ ươ ứ ộ
Ví dụ
Trang Findcontrol.master
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Findcontrol.master.cs"
Inherits="Findcontrol" %>
<!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>Findcontrol</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblTitle" runat="server" /><br />
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Trang Findcontrol.aspx
<%@ Page Language="C#" MasterPageFile="~/Findcontrol.master"%>
<script runat="server">
void Page_Load(object sender, EventArgs e)
{
Label lbl = (Label)Master.FindControl("lblTitle");
lbl.Text = "Trung tam dao tao cong nghe cao iTechPro";
}
</script>
<asp:Content ID="content" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
Lay gia tri tu masterpage<br />
Lay gia tri tu masterpage<br />
Lay gia tri tu masterpage<br />
Lay gia tri tu masterpage<br />
Lay gia tri tu masterpage<br />
</asp:Content>
Trình bày thu c tính MasterPageộ
B n có th trình bày thu c tính , ph ng th c t MasterPage và có th ch nh s a thu c tínhạ ể ộ ươ ứ ừ ể ỉ ử ộ
hay ph ng th c t trang Content.ươ ứ ừ
Ví dụ
Trang Expose.master
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Expose.master.cs"
Inherits="Expose" %>
<script runat="server">
public string BodyTitle
{
get { return lblBody.Text; }
set { lblBody.Text = value; }
}