Xem mẫu
- Bài 4:
Template & điều hướng trang Web
- Hệ thống bài cũ
Các nội dung đã học trong bài trước
Kiểm tra tính hợp lệ của dữ liệu
Quản lý trạng thái
Template & Điều hướng trang Web 2
- Mục tiêu bài học
1. Trang Master
2. Điều hướng trang Web
3. Sử dụng Theme
Template & Điều hướng trang Web 3
- Kiểm tra tính hợp lệ của dữ liệu & Quản lý trạng thái 4
- Trang Master
Các trang trong một ứng
dụng, thường có các thành
phần giống nhau như:
Barner quảng cáo ở đầu trang
Menu ở phía bên trái trang
Phần Footer của trang Web
ASP.NET cung cấp một
phương pháp để tạo các
trang có các thành phần
giống nhau mà không cần
viết các đoạn mã giống nhau
trên từng trang Web đó là sử Hai trang khác nhau trong cùng một ứng dụng chỉ
dụng trang Master có phần nội dung hiển thị ở giữa khác nhau, còn
các thành phần khác giống nhau
Template & Điều hướng trang Web 5
- Trang Master/Trang nội dung
Trang master cung cấp các
thành phần giống nhau cho các
trang trong một ứng dụng Web
Trang nội dung: chứa phần nội
dung hiển thị trên trang master.
Vùng chứa nội dung: Vùng
không gian hiển thị trang nội
dung
Kết hợp giữa trang master và
trang nội dung tạo nên giao diện
của từng trang đơn lẻ trong ứng
dụng Web
Template & Điều hướng trang Web 6
- Trang Master
Ví dụ: Mã nguồn của trang master được tạo bởi Visual
Studio
Untitled Page
Template & Điều hướng trang Web 7
- Trang Master
Trong ASP.NET trang master có định dạng .master
Một trang master luôn bắt đầu bằng chỉ dẫn trang
Master
Đoạn mã phía sau chỉ dẫn Master giống với các trang
aspx thông thường khác cũng gồm các phần tử ,
,
Template & Điều hướng trang Web 8
- Trang Master
Trang master luôn phải chứa một điều khiển
ContentPlaceHolder chỉ định vùng hiển thị trang nội
dung nằm trong thẻ Form
- File Code-behind của trang Master
Trang Master cũng chứa một File Code-behind chứa các
mã xử lý sự kiện.
Các sự kiện tương ứng của trang master được kích hoạt
sau trang nội dung
Ví dụ: Sự kiện Load của trang nội dung xảy ra trước sự
kiện Load của trang master
Sự kiện của các điều khiển trên trang nội dung sẽ được xử
lý trước trang master
Template & Điều hướng trang Web 10
- File Code-behind của trang Master
File code-behind của trang master khá giống với File
code-behind của Web Form thông thường
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class MasterPage : System.Web.UI.MasterPage
Dẫn xuất từ lớp
{ MasterPage
protected void Page_Load(object sender, EventArgs e)
{
}
}
Template & Điều hướng trang Web 11
- Trang nội dung
Trang nội dung có định dạng là .aspx giống với một Web
Form.
Tuy nhiên, trang nội dung không chứa các phần tử
, , , Form
Trang nội dung bắt đầu bằng chỉ dẫn Page tương tự
WebForm nhưng thêm thuộc tính MasterPageFile chỉ
định trang master mà trang sử dụng
Trang nội dung chứa phần tử Content chỉ định ID của
điều khiển ContentPlaceHolder trên trang master
Template & Điều hướng trang Web 12
- Trang nội dung
Mã aspx của một trang nội dung
Template & Điều hướng trang Web 13
- Hướng dẫn sử dụng trang Master
Các bước tạo ứng dụng ASP.NET sử dụng trang Master
Tạo Web Site
Thêm một trang master vào WebSite. Trình bày bố cục (sử
dụng bảng hoặc CSS) và thêm các phần tử vào trang
master
Thêm các trang nội dung cho WebSite.
Viết các mã xử lý sự kiện cho trang master và các trang
nội dung
Template & Điều hướng trang Web 14
- Thêm một trang master
Tương tự như cách thêm một Web Form. Sử dụng hộp
thoại Add New Item
Khác: Chọn Template Master Page
Template & Điều hướng trang Web 15
- Sửa nội dung trang Master
Tương tự như Web Form. Lập trình viên có thể sử dụng
màn hình thiết kế để thêm các phần tử HTML, điều
khiển asp, ContentPlaceHolder…
Template & Điều hướng trang Web 16
- Thêm trang nội dung
Tương tự như Web Form, sử dụng cửa sổ Add New Item
để thêm trang nội dung
Khác: Chọn check box Select master page
Template & Điều hướng trang Web 17
- Demo
Sử dụng trang Master
Nội dung demo Banner
1. Thêm một trang master
vào Website
2. Trình bày bố cục cho
trang Master sử dụng bảng. Side bar chứa
Vùng chứa
nội dung
Bố cục trang gồm: menu
Một banner
Một sidebar bên trái
Một vùng chứa nội dung
Footer
Footer
Template & Điều hướng trang Web 18
- Demo
Sử dụng trang master
Banner
3. Thêm một trang nội dung
cho WebSite
4. Thêm các phần tử vào trang
nội dung Side bar chứa
Vùng chứa
nội dung
5. Khám phá mã nguồn của
menu
trang master và trang nội dung
6. Chạy thử ứng dụng
Footer
Template & Điều hướng trang Web 19
- Kiểm tra tính hợp lệ của dữ liệu & Quản lý trạng thái 20
nguon tai.lieu . vn
