1. MasterPage là gì?!
Trong một hệ thống website thường sẽ có nhiều trang con khác nhau, mỗi trang sẽ phụ trách một mảng nội dung nào đó, có thể kết cấu trang cũng có những điểm khác biệt nhất định nhưng tất cả sẽ được thiết kế theo một khuôn mẫu nào đó, và áp dụng chung cho tất cả các trang. Khuôn mẫu này thường chúng ta sẽ gọi là Theme hay Template, còn trong ASP.Net có khái niệm MasterPage. MasterPage là một trang dùng để tạo ra cấu trúc giao diện chung cho các trang web trong hệ thống, những trang thừa kế từ MasterPage sẽ áp dụng lại giao diện mẫu của nó. Trong một website của thể có 1 hoặc nhiều MasterPage.
Trong MasterPage được chia thành 2 phần:
- Phần chung: Đây là giao diện chung áp dụng cho những trang con kế thừa từ nó
- Phần riêng: Đây là nơi chứa nội dung riêng của từng trang.
2. Tạo MasterPage
Khởi động Visual Studio 2010 vào Menu: File -> New -> Website -> Chọn ngôn ngữ Csharp và project ASP.Net Web Site.
Sau khi Project mới được khởi tạo, chương trình sẽ tạo kèm theo một số trang mẫu đi kèm với MasterPage; Ở đây để tìm hiểu rõ về MasterPage một cách dễ dàng hơn ta sẽ xóa hết những file đó trong thẻ Solution (sẽ được tạo lại trong các bước tiếp theo).
Sau đó Right-Click vào project trong thẻ Solution explorer để tạo mới 1 Item như hình bên dưới. Sau khi chọn sẽ hiện ra một hộp thoại, tại đây ta nhấp chọn MasterPage, đặt tên tùy ý và sau đó nhấn OK để xác nhận.
MasterPage khi mới tạo sẽ là một trang trắng. Như đã nói ở trên, trong MasterPage sẽ có 2 phần, 1 phần dùng để định nghĩa giao diện chung cho tất cả các trang, phần còn lại là phần riêng se thực thi ở riêng từng trang. Về cơ bản MasterPage cũng là 1 trang thông thường nên cũng sẽ có cấu trúc như 1 trang html bình thường, việc sặp xếp, “bày trí” giao diện vẫn dùng css, js như thông thường. Nội dung của MasterPage sẽ được đặt trong 1 Form chứa bên trong 1 thẻ Body của HTML. Trong đó ta sẽ thấy đối tượng ContentPlaceHolder đây chính là phần dành riêng cho các trang con thừa kế MasterPage, còn những phần còn lại sẽ là phần chung.
Trước tiên ta sẽ chỉnh sửa một số phần nhỏ trong MasterPage như hình bên dưới. Trong hình, bên trên là phần Code, bên dưới là phần Design; Trong khung Design ta sẽ thấy 1 vùng có khung viền màu tím nhạt, đây chính là đối tượng ContentPlaceHolder.
3. Tạo trang kế thừa từ MasterPage
Tiếp theo, để thấy hoạt động của MasterPage ta sẽ tiến hành tạo một trang web kế thừa từ MasterPage để xem hoạt động của chúng như thế nào. Lần lượt Add new Item -> chọn webForm. Lưu ý: Nhớ check vào mục Select MasterPage ở bên dưới. Sau khi nhấn OK sẽ hiện ra một bảng để chọn MasterPage. Thông thường nếu có nhiều MasterPage thì sẽ có một danh sách, nhưng ở đây ta chỉ mới tạo 1 cái nên sẽ có duy nhất 1 MasterPage để chọn. Ta lần lượt tạo các trang là: Default, page1, page2. Sau khi tạo sẽ add thêm 1 số thông tin bên trong mỗi trang để phân biệt chúng khi chạy lên. Bên dưới minh họa cho trang Deafault.
Sau khi hoàn tất việc tạo các trang chúng ta có thể xem thử trên trình duyệt bằng cách vào thẻ solution, right click lên trang cần hiển thị và chọn chế độ xem bằng trình duyệt “view in browers”. Bên dưới là minh họa cho trang Deadault và page1. Những điểm chung của 2 trang chính là giao diện chung do MasterPage quy định, phần còn lại là nội dung riêng của trang đó.
4. Tìm hiểu về SiteMap
SiteMap là một file cấu trúc XML được tạo ra với mục đích lưu trữ các trang con bên trong hệ thống website. Ta thấy rằng trên các trang con cần phải có 1 menu để dy chuyển qua lại giữa các trang, menu này sẽ giống nhau cho tất cả các trang. Từ đây ta có thể áp dụng đặc điểm của MasterPage để tạo Menu trên MasterPage và áp dụng cho các trang trong hệ thống. Lưu ý: Bài viết ở đây chỉ dừng lại ở mức độ Demo chức năng chứ chưa có xây dựng trang với giao diện hoàn chỉnh.
Để tạo Sitemap tiến hành “Add new Item” và tạo 1 Sitemap mới.
Bên dưới là file Sitemap được tạo với đường dẫn của các trang con, đi kèm là title và description.
Tiếp đó vào MasterPage tạo 1 Menu và chọn dataSource là File Sitemap vừa tạo, như vậy Menu sẽ lấy dữ liệu từ các link bên trong Sitemap.
Và sau đó chạy thử trang Default để xem kết quả.
Kết thúc bài viết tại đây, hy vọng các bạn đã phần nào hình dung được quy trình hoạt động của MasterPage, hẹn gặp lại các bạn trong những bài viết tiếp theo.
very good
thank bạn đã đăng bài này.
bạn nào cho mình hỏi cách đăng ký thành viên với, mình đăng ký nói check mail để lấy password nhưng thấy có đâu.
Chào bạn!
Hiện tại do server đang gặp một số sự cố nên không thể tự động gửi mail được.
Bạn có thể dùng tài khoản: user_mst , pass: 123456 để đăng nhập.
Thân!
có ai giúp mình cách đăng ký thành viên trang này được không,mình đăng ký báo check mail để lấy mật khẩu mà có thấy gì đâu
Chào bạn!
Hiện tại do server đang gặp một số sự cố nên không thể tự động gửi mail được.
Bạn có thể dùng tài khoản: user_mst , pass: 123456 để đăng nhập.
Thân!