CH

NG IV:

ƯƠ MASTER PAGE

Lý thuyết 3 tiết Thực hành 6 tiết

ớ

ệ

ề

Gi

i thi u v  Master Page

ơ

ộ ề ả ấ ả

ể ấ  ASP.Net  2.0  cung  c p  m t  cách  đ n  gi n  đ   ỳ ạ t o  trang  template  làm  n n  t ng  cho  b t  k   trang  web  nào  trong  website.  Các  template  này g i là Master Page.

ự ệ

ễ ở ơ

ả ơ ọ ử ụ  S  d ng master page giúp cho vi c xây d ng  ễ ụ ứ các  ng  d ng  tr   nên  d   dàng  h n  và  d   qu n lý h n

ớ

ệ

ề

Gi

i thi u v  Master Page

ệ ạ ớ

ế ộ ậ  Khi làm vi c v i master Pages ta t o ra m t t p  ở c  tham  chi u  b i

 T p tin Master page có ph n m  r ng

ượ tin  master  –  template  đ subpage ho c ặ content page ầ ậ

ở ộ ầ ở ộ .master,  content  page  có  ph n  m   r ng  là

ậ và  t p  tin  .aspx

ớ

ề

ệ

Gi

i thi u v  Master Page

Master page .master Content page .aspx

M C

MC

Combined Page

ế ế

Thi

t k  trang Master Page

 Đ t t

ặ ấ ả ộ ẻ ố

ườ t c  n i dung mu n chia s  (dùng chung)  ng

ồ ầ

ề

 Trang n i dung (Content page) ch a t

trong trang master (MasterPage), thông th g m các ph n:  Header section (Tiêu đ  trang)  Navigation (Menu ­ )  Footer section  ộ ứ ấ ả

ộ ạ ừ ủ ầ ử ủ t c  các   c a

n i dung c a trang ngo i tr  các ph n t trang master

ế ế

Thi

t k  trang Master Page

ụ ộ ể  Ví d  m t ki u trang master

Header Navigation

Content

Footer

Ví d :ụ

my.master my.master my.master my.master my.master my.master

default.aspx (content­page) default.aspx (content­page) default.aspx (content­page) default.aspx (content­page) default.aspx (content­page)

<%@ master %> <%@ master %> <%@ master %> <%@ master %> <%@ master %> <%@ master %>

<%@ page masterpagefile=“~/my.master” %> <%@ page masterpagefile=“~/my.master” %> <%@ page masterpagefile=“~/my.master” %> <%@ page masterpagefile=“~/my.master” %> <%@ page masterpagefile=“~/my.master” %>

Header Header

Header Header Header Header

Navigation Navigation Navigation

Navigation Navigation Navigation

Here is the content Here is the content Here is the content Here is the content that replaces … that replaces … that replaces … that replaces …

Id=“MainContent”> Id=“MainContent”> Id=“MainContent”> Id=“MainContent”> Here is my basic Here is my basic Here is my basic Here is my basic Here is my basic default content default content default content default content default content

contentplaceholderid=“MainContent”> contentplaceholderid=“MainContent”> contentplaceholderid=“MainContent”> Id=“MainContent”> Here is the content that replaces … /asp:content> /asp:content> /asp:content> /asp:content>

Footer Footer Footer Footer

Footer Footer

ế ế

t k  1 trang Master Page

Thi Master­page: design­time

ở ộ ầ ạ ớ 1. T o a master page v i ph n m  r ng .master

2. Đ nh nghĩa a master trong 

o <%@ master .. %>

1. Thêm Content:

ị

o Có th  là trang .html  control page content ầ o Thay th  ph n place­holder:

ể

ế ử ụ

 S  d ng     Thêm n i dung m c đ nh c a trang

ủ ặ ộ ị

ế ế

t k  1 trang Master Page

Thi Master­page: design­time

<%@ master language=“C#"%> <%@ master language=“C#"%>

Default content!!! Default content!!!

ế ế

t k  1 trang Web Server

Thi dùng Master­page: design­time

1.

2.

ỉ

ạ ề

ỉ ế

ộ

ạ

3.

ủ

ế

ộ

T o 1trang ASP.NET page (.aspx) ị Ti n ch  th : 1. <%@ page masterpagefile= %> ch  đ n Master Page 2. T o thu c tính <%@ Page title=“scott” %> ầ Thêm n i dung thay th  ph n content c a Master Page: 1. Tag  or server­side script allowed 2.  controls replace regions in the master: ộ 1. contentplaceholderid n i dung c a MasterPage ộ 2.  ch a n i dung c a t ng trang web

ủ ủ ừ ứ

con

master­page

ử ụ Cách s  d ng a

default.aspx

masterpagefile="~/site.master" title=“Home” %>

<%@ page language=“C#" masterpagefile="~/site.master" title=“Home”

Navigation

Support section

login.aspx

masterpagefile="~/mysite.master" title=“Login” %>

<%@ page language=“C#" masterpagefile="~/mysite.master" title=“Login”

Programatic master  selection

Dynamic selection of master-page

Master­pages Nested master­pages

 Master­pages can be nested

 Enables a master to master relationship  Useful when a site enforces an overall layout

and defines sub­layouts within

ASPX

MASTER (ASPX Content­page)

MASTER (ASPX Content­page)

MASTER (MASTER)

Master­pages Nested master­pages

mysite.master

productsection.master

Content Place Holder  ‘Main’

Content Place Holder  ‘Sub’

Master­pages Nested master­pages: Conceptual

mysite.master

productsection.master

<%@ master masterpagefile=“~/mySite.Master” %>

<%@ master %>

Header

// Menu provided default

Footer

Master­pages Nested master­pages

partners.aspx

howtobuy.aspx

ậ

ạ

ẫ

ề

Bài t p: T o 1 Website theo m u:  Đ  tài nhóm. ậ  Bài t p 9:  BT_WebTintuc (Design)  BT_WebBank(Design)