Giáo trình Lập trình web ASP.NET - Nghề: Lập trình máy tính - CĐ Kỹ Thuật Công Nghệ Bà Rịa-Vũng Tàu

(NB) Giáo trình “Lập trình web ASP.NET” được biên soạn dành cho học sinh trung cấp và sinh viên cao đẳng nghề Lập trình máy tính với mục tiêu cung cấp cho người học các kiến thức và kỹ năng cần thiết để có thể hoàn thành ứng dụng web quảng cáo sản phẩm, thương mại điện tử,...

Bà R a – Vũng Tàu, năm 2016 ị

TUYÊN B  B N QUY NỐ Ả Ề

Tài li u này thu c lo i sách giáo trình nên các ngu n thông tin có thệ ộ ạ ồ ể 

được phép dùng nguyên b n ho c trích dùng cho các m c đích v  đào t o vàả ặ ụ ề ạ  tham kh o.ả

M i m c đích khác mang tính l ch l c ho c s  d ng v i m c đích kinhọ ụ ệ ạ ặ ử ụ ớ ụ  doanh thi u lành m nh s  b  nghiêm c m.ế ạ ẽ ị ấ

L I GI I THI UỜ Ớ Ệ

Giáo trình “L p trình web ASP.NET” đậ ược biên so n dành cho h c sinhạ ọ  trung c p và sinh viên cao đ ng ngh  L p trình máy tính v i m c tiêu cungấ ẳ ề ậ ớ ụ  

c p cho ngấ ườ ọi h c các ki n th c và k  năng c n thi t đ  có th  hoàn thànhế ứ ỹ ầ ế ể ể  

ng d ng web qu ng cáo s n ph m, th ng m i đi n t , …

Tác gi  đã nghiên c u m t s  tài li u, công ngh  hi n đ i k t h p v iả ứ ộ ố ệ ệ ệ ạ ế ợ ớ  kinh nghi m làm vi c th c t  đ  vi t nên giáo trình này. N i dung đệ ệ ự ế ể ế ộ ược tác 

gi  trình bày cô đ ng, d  hi u kèm theo các bả ộ ễ ể ước hướng d n th c hành chiẫ ự  

ti t giúp cho ngế ười h c d  ti p thu các ki n th c c n thi t và hình thànhọ ễ ế ế ứ ầ ế  

được k  năng ngh ỹ ề

Trong quá trình biên so n, ch c ch n giáo trình còn nhi u thi u sót. Tácạ ắ ắ ề ế  

gi  r t mong nh n đả ấ ậ ược ý ki n đóng góp c a quý th y/cô và các em h c sinh,ế ủ ầ ọ  sinh viên đ  ti p t c hoàn thi n h n.ể ế ụ ệ ơ

Xin chân thành c m  n quý đ ng nghi p, b n bè đã có nh ng ý ki nả ơ ồ ệ ạ ữ ế  đóng góp trong quá trình xây d ng giáo trình này.ự

Bà R a – Vũng Tàu, ngày …… tháng …… năm 2015ị

Tham gia biên so nạ

1 Phan H u Phữ ước – Ch  biênủ

M C L CỤ Ụ

Xây d ng c  s  v ng ch c, t o ti n đ  cho vi c tìm hi u các ki n th cự ơ ở ữ ắ ạ ề ề ệ ể ế ứ  

12 T ng quan v  liên k t d  li u v i controlổ ề ế ữ ệ ớ 5 Tích h pợ

13 Liên k t d  li u v i các list controlế ữ ệ ớ 4 Tích h pợ

14 Liên k t d  li u v i EntityDataSource controlế ữ ệ ớ 6 Tích h pợ

T NG QUAN V  L P TRÌNH WEBỔ Ề Ậ

Gi i thi u:ớ ệ

Bài này cung c p cho HSSV nh ng ki n th c t ng quát liên quan đ nấ ữ ế ứ ổ ế  

m t trang web trên Internet,  ng d ng web ASP.NET và môi trộ ứ ụ ường phát tri n.ể

M c tiêu:ụ

Trình bày khái ni m v  HTTP, URL, HTMLệ ề

Phân bi t đệ ược web tĩnh và web đ ngộ

Trình bày quá trình x  lý yêu c u c a  ng d ng web ASP.NETử ầ ủ ứ ụ

N i dung:ộ

Tìm hi u m t s  khái ni mể ộ ố ệ

1.1 Gi i thi u v  Internetớ ệ ề

Là m t m ng máy tính toàn c u. Các máy tính trong m ng trao đ i thông tinộ ạ ầ ạ ổ  

v i   nhau   thông   qua   giao   th c   TCP/IP   (Transmission   Controlớ ứ  Protocol/Internet Protocol)

Mang l i nhi u ti n ích cho ngạ ể ệ ườ ử ụi s  d ng, n i b t nh t là d ch v  thổ ậ ấ ị ụ ư 

đi n t  (email), trò chuy n tr c tuy n (chat) và truy tìm d  li u (searchệ ử ệ ự ế ữ ệ  engine), …

D ch v  đị ụ ược dùng ph  bi n nh t trên Internet là World Wide Web (WWW,ổ ế ấ  

thường được g i t t là Web) thông qua giao th c HTTP (Hyper Textọ ắ ứ  Transfer Protocol)

1.3 Gi i thi u v  m t s  trình duy t webớ ệ ề ộ ố ệ

Trình duy t Web (Web Browser) là ph n m m dùng đ  xem các tài li uệ ầ ề ể ệ  

ho c tìm ki m tài nguyên trên World Wide Web.ặ ế

M t s  trinh duy t Web thông d ng hi n nay:ộ ố ệ ụ ệ

1 Internet Explorer (IE) được cài đ t s n khi cài đ t h  đi u hànhặ ẵ ặ ệ ề  Microsoft Windows

Là giao th c truy n t i siêu văn b nứ ề ả ả

T p h p các quy đ nh dùng đ  trao đ i các tài li u (văn b n, hình  nh,ậ ợ ị ể ổ ệ ả ả  

âm thanh, video, các t p tin đa truy n thông, …) gi a Web Server vàậ ề ữ  Web Browser

URL (Uniform Resource Locator)

Đường d n đ n m t trang web (ho c m t t p tin) c  th  trên Internetẫ ế ộ ặ ộ ậ ụ ể

Cú pháp đ y đ : scheme://<hostt>[:port][<path>][?<querystring>]ầ ủ

Trong đó:

scheme: lo i d ch v  Internet (http, https, ftp)ạ ị ụ

host: đ a ch  máy ch  ch a tài nguyênị ỉ ủ ứ

port: c ng d ch v  giao ti pổ ị ụ ế

path: đường d n và tên t p tin tài nguyên trên máy chẫ ậ ủ

querystring: các tham s  đố ược g i kèm theo (khi s  d ng http, https)ử ử ụ

6.Ngôn ng  dùng đ  xây d ng các trang webữ ể ự

7 G m các tag giúp Web Browser bi t cách đ nh d ng thông tin hi nồ ế ị ạ ể  thị

Hình 1.1. Quá trình x  lý và hi n th  trang web tĩnh ử ể ị

Đ c đi mặ ể

Nhanh, không m t nhi u th i gian hi n th  k t qu  trang web trên Webấ ề ờ ể ị ế ả  Browser

Ch  có th  th c hi n nh ng x  lý đ n gi n và đ c l pỉ ể ự ệ ữ ử ơ ả ộ ậ

Không c n ph i cài đ t ph n m m t i Web Serverầ ả ặ ầ ề ạ

Web ngày càng phát tri n thì trong m t website:ể ộ

Hình 1.2. Quá trình x  lý và hi n th  trang web đ ng ử ể ị ộ

Đ c đi m:ặ ể

Ch m, m t th i gian đ  hi n th  k t quậ ấ ờ ể ể ị ế ả

Có kh  năng th c hi n nh ng x  lý ph c t p và truy c p CSDLả ự ệ ữ ử ứ ạ ậ

Trang web linh đ ng, ph c v  nhi u yêu c uộ ụ ụ ề ầ

Ph i cài đ t ph n m m t i Web Serverả ặ ầ ề ạ

Gi i thi u v  ASP.NETớ ệ ề

3.1 Khái ni m ASP.NET?ệ

Active Server Pages .NET Framework

Công ngh  dùng đ  phát tri n các  ng d ng web đ ng và d ch v  webệ ể ể ứ ụ ộ ị ụ

K  thu t l p trình và phát tri n  ng d ng web phía Server (Server – Side)ỹ ậ ậ ể ứ ụ  

d a trên .NET Frameworkự

Server – Side: các đo n mã l nh (VB.NET, C#, …) đã đạ ệ ược biên d ch s  x  lýị ẽ ử  

t i Server và tr  k t qu  HTML, Javascript, CSS, … sau đó g i v  cho Webạ ả ế ả ử ề  Browser phía Client

3.2 Tìm hi u m t s  đ c đi m c a ASP.NETể ộ ố ặ ể ủ

H  tr  thi t k  nhanh Web Form hay Services theo phỗ ợ ế ế ương pháp Kéo – 

Th  ­ Click đôi quen thu c trên h  đi u hành Windowsả ộ ệ ề

H  tr  vi c phát hi n và lo i b  các l i sai trong quá trình phát tri n  ngỗ ợ ệ ệ ạ ỏ ỗ ể ứ  

d ng webụ

Mô hình Code – Behind: cho phép tách riêng giao di n HTML và các đo nệ ạ  

mã Server – Side

ASP.NET được Compiled ch  không ph i Interpretedứ ả

Trang ASP.NET được biên d ch trị ước thành các t p tin DLL nh  phân ậ ị  Server có th  thi hành m t cách nhanh chóngể ộ

ASP.NET được biên d ch dị ướ ại d ng Common Language Runtime (CLR) nên cho phép nh ng ngữ ườ ậi l p trình vi t mã ASP.NET b ng b t kế ằ ấ ỳ ngôn ng  nào c a .NET Frameworkữ ủ

3.3 Gi i thi u m t s  website đớ ệ ộ ố ượ ạc t o b ng ASP.NETằ

http://tuyensinh.brtvc.edu.vn

http://t3h.vn

4.2 Tìm hi u quá trình x  lý t p tin ASP.NETể ử ậ

người khác có bi t đế ược mã ngu n không? T i sao?ồ ạ

YÊU C U KI M TRA, ĐÁNH GIÁ K T QU  H C T PẦ Ể Ế Ả Ọ Ậ

Bi t đế ược tên 2 ngôn ng  l p trình khác ASP.NETữ ậ

Bi t tên m t s  Web Browser thông d ngế ộ ố ụ

Bi t k t qu  có đế ế ả ược sau khi biên d ch website asp.net.ị

T O  NG D NG ASP.NETẠ Ứ Ụ

Gi i thi u:ớ ệ

M t website asp.net bao g m nhi u thành ph n bên trong. Vi c t  ch cộ ồ ề ầ ệ ổ ứ  

l u tr  các trang giúp website tr  nên rõ ràng, ti n l i cho ngư ữ ở ệ ợ ườ ậi l p trình và 

người truy c p cũng d  dàng nh  đ a ch  các trang bên trong.ậ ễ ớ ị ỉ

M c tiêu:ụ

Bi t đế ược công d ng và t  ch c các th  m c l u tr  trong  ng d ng webụ ổ ứ ư ụ ư ữ ứ ụ

T o đạ ượ ức  ng d ng webụ

T o đạ ược Web Form

Bi t s  d ng thu c tính IsPostBack trong s  ki n Page_Load c a Webế ử ụ ộ ự ệ ủ  Form

C n th n ch n đẩ ậ ọ ường d n an toàn khi t o website đ  d  qu n lý và tránhẫ ạ ể ễ ả  ghi ch ng lên website cũ.ồ

Hình 2.1. C a s  t o website ASP.NET ử ổ ạ

Gi i thi u v  Web location:ớ ệ ề

File System (ch n m c đ nh): Không c n cài đ t IIS, Visual Studio sọ ặ ị ầ ặ ẽ cung c p web server riêng khi ta thi hành  ng d ng web.ấ ứ ụ

Local HTTP: Ph i cài đ t IIS và khai báo URL đã đả ặ ược ánh xạ

FTP:  S   d ng  giao  th c   truy n  file  đ  qu n  lý   các  t p  tin  trongử ụ ứ ề ể ả ậ  website

T  ch c th  m c l u trổ ứ ư ụ ư ữ

App_Data: l u tr  các t p tin d  li u .mdb, mdf, xml, …ư ữ ậ ữ ệ

App_Code: l u tr  các t p tin ch c source code .cs, .vb, …ư ữ ậ ứ

Theme: l u tr  các t p tin dùng đ  t o giao di n chung theo ch   đ ,ư ữ ậ ể ạ ệ ủ ề  

thường có ph n m  r ng .skin, .css ho c các t p tin hình  nhầ ở ộ ặ ậ ả

Các bước đ  t o các th  m c trên:ể ạ ư ụ

Hình 2.2. Các b ướ ạ c t o các thu m c c a ASP.NET ụ ủ

Ngoài ra, chúng ta có th  t o thêm các th  m c cho m c đích khác:ể ạ ư ụ ụClick chu t ph i lên Website, ch n Add ộ ả ọ  New Folder

Scripts: ch a các t p tin th c thi Client – Side (.js)ứ ậ ự

Styles: ch a các t p tin đ nh d ng giao di n (.css)ứ ậ ị ạ ệ

Images: ch a các t p tin hình  nhứ ậ ả

T o Web Formạ

Th c hi n theo trình t  sau:ự ệ ự

Click chu t ph i, ch n Add ộ ả ọ  Web Form. Đ t tên cho Web Formặ

Hình 2.3. Đ t tên cho web form ặ

M t Web Form có 2 t p tinộ ậ

T p tin giao di n: có ph n m  r ng .aspxậ ệ ầ ở ộ

T p tin th c thi Code – Behind: có ph n m  r ng .aspx.csậ ự ầ ở ộ

Ch  đ nh trang m ng đ nh cho Website: click chu t ph i lên Web Form ỉ ị ạ ị ộ ả 

ch n Set As Start Pageọ

Thi hành  ng d ng web: b m phím F5ứ ụ ấ

Thi hành trang ch  đ nh: Click chu t ph i lên Web Form ỉ ị ộ ả  ch n View inọ  Browser

Đ i tố ượng Page

Hình 2.4. Các s  ki n trong vòng đ i c a m t Web Form ự ệ ờ ủ ộ

4.1 X  lý s  ki n Page_Loadử ự ệ

Theo vòng đ i s  ki n   trên, s  ki n Page_Load thờ ự ệ ở ự ệ ường ch a các l nh đứ ệ ể 

n p d  li u ban đ u cho các Server Control.ạ ữ ệ ầ

Th c hành kh o sát x  lý s  ki n Page_Loadự ả ử ự ệ

M  web form Default.aspxở

Ch n vùng nhìn Design  ọ

Kéo Label control vào theo hình bên dưới và đ t thu c tính ID là lbl1ặ ộ

Biên d ch và xem k t qu  trang Default.aspx trên trình duy tị ế ả ệ

Đóng trình duy t, quay tr  l i Visual Studio, ch n web form Default.aspxệ ở ạ ọClick chu t lên bi u tộ ể ượng View Code đ  biên t p Code – Behindể ậ

Hình 2.5. V  trí bi u t ị ể ượ ng View Code

Nh p dòng l nh sau trong s  ki n Page_Loadậ ệ ự ệ

Biên d ch, xem k t qu  trang Default.aspx và so sánh v i k t qu  l nị ế ả ớ ế ả ầ  

trước

4.2 Tìm hi u thu c tính IsPostBackể ộ

IsPostBack tr  v  tr ng thái PostBack c a trangả ề ạ ủ

False: trang đượ ả ầc t i l n đ uầ

True: trang đượ ảc t i khi được submit b i m t Server Controlở ộ

Th c hi n các bự ệ ước sau đ  hi u rõ h n v  IsPostBackể ể ơ ề

Kéo control ListBox vào web form Default.aspx và đ t ID là lsb1ặ

Biên d ch, xem k t qu  trang Default.aspx trên trình duy tị ế ả ệ

Đóng trình duy t, biên t p l i s  ki n Page_Load nh  bên dệ ậ ạ ự ệ ư ưới

Biên d ch, xem k t qu  trang Default.aspx trên trình duy tị ế ả ệ

Biên d ch, xem l i k t qu  trang Default.aspxị ạ ế ả

Click chu t lên Button  ộ   Nh n xét?  ậ   T i  u web form Default.aspxố ư  

T o các th  m c images, scripts, styles trong th  m c administrator.ạ ư ụ ư ụ

T o m i web form Default.aspx trong th  m c administrator:ạ ớ ư ụ

Đ nh d ng b ng t p tin .css trong th  m c administrator/stylesị ạ ằ ậ ư ụ

Ngoài ra, n i dung bài cũng gi i thi u đ n m t CSDL m u đ n gi n choộ ớ ệ ế ộ ẫ ơ ả  

ng d ng th ng m i đi n t  CSDL này s  đ c s  d ng xuyên su t   các

bài sau trong giáo trình

M c tiêu:ụ

Bi t t o Entity Data Modelế ạ

Bi t truy v n d  li u b ng eSQLế ấ ữ ệ ằ

T o đạ ược các l p x  lý nghi p vớ ử ệ ụ

Bi t t  ch c l u tr  cho  ng d ng webế ổ ứ ư ữ ứ ụ

1.2. Yêu c u c a  ng d ngầ ủ ứ ụ

Người dùng có th  tra c u, tìm ki m, … s n ph m theo tiêu chí đa d ngể ứ ế ả ẩ ạ

Đ t hàng qua m ngặ ạ

C a hàng có th  đăng tin t c, s  ki n lên websiteử ể ứ ự ệ

…

1.3. Gi i thi u c  s  d  li u (CSDL)ớ ệ ơ ở ữ ệ

Hình 3.1. Mô hình quan h  đ n gi n CSDL  ng d ng Th ệ ơ ả ứ ụ ươ ng m i đi n t ạ ệ ử

T  ch c CSDLổ ứ

2.1. T o Entity Data Modelạ

Trong website ThuongMaiDienTu, click chu t ph i lên App_Code, ch n Addộ ả ọ  

 Add New Item

Hình 3.3. Ch n thông tin k t n i đ n ngu n d  li u cho model ọ ế ố ế ồ ữ ệ

Trong hình trên, Click chu t lên ộ New Connection.

Hình 3.4. Cung c p các thông tin t o k t n i đ n ngu n d  li u ấ ạ ế ố ế ồ ữ ệ

Nh p các thông tin k t n i đ n CSDL nh  hình trên r i click OK đ  quay l iậ ế ố ế ư ồ ể ạ  

h p tho i trộ ạ ước

Ch n  ọ Yes, include the sensitive data …, đánh d u ch n  ấ ọ Save connection  setting … r i ch n Next.ồ ọ

Hình 3.5. Ch n version Entity Framework ọ

Trong hình trên, ch n Entity Framework có version cao nh t có th  r i ch nọ ấ ể ồ ọ  Next

Hình 3.6. Ch n các đ i t ọ ố ượ ng d  li u đ  t o các l p đ i t ữ ệ ể ạ ớ ố ượ ng cho model

Trong hình trên, đánh d u ch n các đ i tấ ọ ố ượng, đ t tên cho Model Namespaceặ  

r i ch n Finish.ồ ọ

Quá trình Visual Studio t o các l p c a model s  xu t hi n h p tho i c nhạ ớ ủ ẽ ấ ệ ộ ạ ả  báo Security thì đánh d u ch n “Do not show this message again” r i ch nấ ọ ồ ọ  OK

Hình 3.7. Xác nh n cho phép Entity Framework t o các t p tin model cho  ng ậ ạ ậ ứ  

d ng ụ

2.2. T o các l p x  lý nghi p v  Business Logic Layer (BLL)ạ ớ ử ệ ụ

Sau khi hoàn t t các bấ ướ ạc t o Entity Data Model   trên, Visual Studio cũng đãở  hoàn t t vi c t o các l p x  lý nghi p v ấ ệ ạ ớ ử ệ ụ

Hình 3.8. Các t p tin l p đ i t ậ ớ ố ượ ng c a model đã đ ủ ượ ạ c t o

MyDataModel.Context.cs: đ nh nghĩa l p đ i tị ớ ố ượng giúp k t n i CSDL, cácế ố  

bi n thành viên tế ượng  ng v i các table, view, … trong CSDL.ứ ớ

MyDataModel.cs: đ nh nghĩa các l p đ i tị ớ ố ượng tương  ng v i các table, viewứ ớ  trong CSDL

2.3. Truy v n d  li uấ ữ ệ

Chu n b  d  li u m uẩ ị ữ ệ ẫ

Chèn label và đ t thu c tính ID là lbldanhsachphanloaiặ ộ

M  t p tin code­behind c a web form PhanLoai, khai báo using th  vi nở ậ ủ ư ệ  

System.Data.Entity

Phân tích

Hi n th  ngay sau khi trang để ị ượ ả  x  lý trong s  ki n c t i  ử ự ệ Page_Load

C n truy c p danh sách phân lo i ầ ậ ạ  d  li u b ng ữ ệ ả PhanLoai  thu cộ  tính  PhanLoais  trong l p  ớ cuahangthoitrangEntities  đ c đ nh nghĩaượ ị  trong t p tin ậ MyDataModel.Context.cs

Hi n th  tên phân lo i  ể ị ạ  thu c tính  ộ TenPhanLoai trong l p ớ PhanLoai 

được đ nh nghĩa trong t p tin ị ậ MyDataModel.cs

X  lý s  ki n Page_Load c a web form PhanLoaiử ự ệ ủ

Biên d ch, xem k t qu  web form PhanLoai trên trình duy tị ế ả ệ

S a l i s  ki n Page_Loadử ạ ự ệ

Biên d ch, xem k t qu  trên trình duy t ị ế ả ệ  Nh n xétậ

Ví d  2:ụ  T o web form hi n th  danh sách tên nhóm s n ph m có PhanLoaiIDạ ể ị ả ẩ  

b ng 1 (m i nhóm s n ph m hi n th  trên m t dòng)ằ ỗ ả ẩ ể ị ộ

T o web form NhomSanPhanạ

Chèn label và đ t thu c tính ID là lbldanhsachnhomspặ ộ

M  t p tin code­behind c a web form NhomSanPham, khai báo using thở ậ ủ ư 

vi n ệ System.Data.Entity

Phân tích

Hi n th  ngay sau khi trang để ị ượ ả  x  lý trong s  ki n c t i  ử ự ệ Page_Load

C n truy c p danh sách nhóm s n ph m  ầ ậ ả ẩ  d  li u b ng ữ ệ ả NhomSP 

thu c   tính  ộ Nhomsps  trong l p  ớ cuahangthoitrangEntities  đ c  đ nhượ ị  nghĩa trong t p tin ậ MyDataModel.Context.cs

Ch  truy c p các nhóm s n ph m có PhanLoaiID b ng 1 ỉ ậ ả ẩ ằ  Đi u ki nề ệ  

l c: PhanLoaiID==1ọ

Hi n   th   tên   nhóm   s n   ph m  ể ị ả ẩ   thu c   tính  ộ TenNhomsp  trong   l pớ  

Nhomsp đ c đ nh nghĩa trong t p tin ượ ị ậ MyDataModel.cs

X  lý s  ki n Page_Load c a web form NhomSanPhamử ự ệ ủ

T  ch c l u tr   ng d ng webổ ứ ư ữ ứ ụ

T o các th  m c l u tr  cho website ThuongMaiDienTu theo c u trúc bênạ ư ụ ư ữ ấ  

dưới

* Th  m c Bin, t p tin packages.config và vwd.webinfo do Visual Studio tư ụ ậ ự 

t o đ  ch a các th  vi n bên ngoài đạ ể ứ ư ệ ược thêm vào website, ví d : Entityụ  Framework và các thông tin l u v t cài đ t.ư ế ặ

CÂU H I, BÀI T PỎ Ậ

3.1. T o web form NhomSanPham2 có giao di n và yêu c u bên dạ ệ ầ ưới:

TextBox có thu c tính ID là ộ txtphanloaiID.

Button bên ph i TextBox, có thu c tính ID là  ả ộ btnok, thu c tính Text làộ  

Danh sách nhóm.

Label bên dưới TextBox và Button, có thu c tính ID là ộ lbldanhsachnhomsp.

Khi trang đượ ả ầc t i l n đ u thì TextBox và Label không có giá tr ầ ị

Người dùng nh p mã phân lo i vào TextBox (ví d : 1) và click chu t lênậ ạ ụ ộ  Button thì hi n th  danh sách tên nhóm s n ph m trong Label (m i nhómể ị ả ẩ ỗ  

s n ph m hi n th  trên m t dòng, đả ẩ ể ị ộ ượ ắc s p x p tăng d n theo tên).ế ầ

YÊU C U KI M TRA, ĐÁNH GIÁ K T QU  H C T PẦ Ể Ế Ả Ọ Ậ

XÂY D NG B  C C CHUNG CHO WEBSITEỰ Ố Ụ

Gi i thi u:ớ ệ

M t website có nhi u trang. H u h t các trang đ u có b  c c, đ nh d ngộ ề ầ ế ề ố ụ ị ạ  

và m t s  n i dung gi ng nhau. ASP.NET cho phép chúng ta t o m t l n choộ ố ộ ố ạ ộ ầ  

b  c c, đ nh d ng, n i dung gi ng nhau t i m t s  v  trí c a các trang sau đóố ụ ị ạ ộ ố ạ ộ ố ị ủ  

t o các trang d a trên b  c c chung đó.ạ ự ố ụ

Tránh làm m t khai báo s  d ng MasterPage khi t o các ContentPage, đ tấ ử ụ ạ ặ  

n i dung h p lý t i các v  trí Contentộ ợ ạ ị

N i dung:ộ

1 S  d ng MasterPageử ụ

1.1. Gi i thi uớ ệ

M t website có nhi u trang. H u h t các trang s  có các vùng có giao di nộ ề ầ ế ẽ ệ  

và n i dung hi n th  gi ng nhau ộ ể ị ố  Có gi i pháp nào đ  thi t k  và l pả ể ế ế ậ  trình m t l n và s  d ng cho nhi u trang, không c n ph i thi t k  và l pộ ầ ử ụ ề ầ ả ế ế ậ  trình các thành ph n đó   m i trang giúp ti t ki m th i gian?ầ ở ỗ ế ệ ờ

MasterPage là m t b  c c chung cho các trang khác trong cùng m t website.ộ ố ụ ộMasterPage được thi t k  và l p trình đ  ch a các ch c năng chung cho cácế ế ậ ể ứ ứ  trang khác

Trang s  d ng MasterPage đử ụ ược g i là ContentPage.ọ

ContentPage là trang ch a các thành ph n n i dung riêng bi t cho t ngứ ầ ộ ệ ừ  trang

N i dung hi n th  trên trình duy t chính là s  k t h p c a MasterPage vàộ ể ị ệ ự ế ợ ủ  ContentPage tương  ng v i ContentPlaceHolder.ứ ớ

Hình 4.1. Công d ng c a Master Page ụ ủ

1.2. T o MasterPageạ

Gi i thi u b  c c chung c a các trang trong website:ớ ệ ố ụ ủ

HEADER, BANNERTrang chủ Gi i thi uớ ệ Ch  đ  1ủ ề Ch  đ  2ủ ề Liên hệ

Th c hi n các bự ệ ước nh  sau:ư

Hình 4.2. Các b ướ ạ c t o MasterPage

Thi t k  b  c c Layout1.master nh  sau:ế ế ố ụ ư

Biên t p n i dung default.css nh  sau:ậ ộ ư

1.3. T o ContentPageạ

Xoá h t các trang .aspx   các bài th c hành trế ở ự ước

Click chu t ph i lên website, ch n Add ộ ả ọ  Add New Item …

Th c hi n các bự ệ ước nh  hình sau:ư