Bài giảng Công nghệ Web - Bài 12: Masterpage và UserControls

Nội dung text: Bài giảng Công nghệ Web - Bài 12: Masterpage và UserControls

1. Bài12: Masterpage và UserControls Lê Quang Lợi Email: loilequang@gmail.com loilq@utehy.edu.vn
2. Bài 12: Masterpage và UserControls » Masterpage » UserControl » Them và Skin Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
3. 12.1 MasterPage » Master Page: là trang khung (layout). Còn được gọi là trang Template (mẫu/khung) » Cho phép các trang ASPX khác kế thừa » Không cho phép kế thừa trang khác » Master page không tự hiển thị giao diện » Webpage chỉ kế thừa duy nhất một trang Masterpage » Một ứng dụng có thể có nhiều Masterpage » Thống nhất giao diện, giảm thiết kế, sử dụng lại Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
4. 12.1 MasterPage  Thực thi trang Master page Trang ASPX: chứa nội dung riêng. Kết cấu kế thừa từ trang MasterPage Trang MasterPage: cho các trang khác kế thừa cấu trúc Trang kết quả được đưa ra có sự kết hợp của masterpage và trang thực thi Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
5. 12.1 MasterPage  Cấu trúc trang MasterPage ContendPlateHolder Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
6. 12.1.1 Trang Master Page  ControlPalte Holder cho Master page title phép Page kế thừa và cài đặt giao diện riêng Thành phần giao diện của - Cho phép Page kế thừa - Chứa mã thể hiện khung Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
7. 12.1.2 Page kết thừa từ Masterpage Main content Nội dung cho phép cài đặt Footer content Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
8. 12.2 UserControls » UserSontrol: server control được thiết kế dựa trên các control khác (kể cả control vừa thiết kế) » UserControl: Rick control theo yêu cầu cụ thể » Một số lợi ích: . Xây dựng giao diện riêng biệt/đặc thù cho ứng dụng . Kế thừa thiết kế đã có . Sử dụng lại, nhiều nơi . Thống nhất khi thay đổi, phát triển, bảo trì . Giảm chi phí: thời gian, nhân lực, tiền bạc Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
9. 12.2 UserControls User Control Nội dung Usercontrol Enter Name: void EnterBtn_Click(Object sender, " welcome to ASP.NET!"; } Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
10. 12.2 UserControls Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
11. 12.2.1 Tạo UserControls » » Giao diện: ServerControl + thẻ HTML » Đối tượng: Kết thừa từ đối tượng Control » Sự kiện: Giống sự kiện của Page + Tự xây dựng » Thuộc tính: tự tạo bởi người phát triển » Phương thức: ServerControl+ Tự xây dựng » Hoạt động: như servercontrol Chú ý: UserControl được dịch cùng với trang khi gọi Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
12. 12.2.2 Sử dụng » Đăng ký sử dụng » Sử dụng: Tương tác như một control bình thường . Thẻ: . Lập trình: tạo/ thiết lập(thuộc tính, sự kiện)/ Thêm Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
13. 12.2.3 Custom Control » Server control tự xây dựng » Kế thừa từ lớp Control » Xây dựng server tag riêng cho từng ứng dụng » Xây dựng server tag cho ASPX » Mọi công việc phải xây dựng từ đầu . Tạo thuộc tính . Tạo phương thức . Tạo sự kiện . Đăng ký với hệ thống . Xây dựng giao diện từ: HtmlTextWriter Chú ý: Xây dựng CustomControl khó hơn userControl rất nhiều Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
14. 12.3 Them và Skin » Skin và Them thể hiện giao diện tương tự như CSS » Sự khác biệt duy nhất: chỉ áp dụng cho các serverCotrols » Skin: thể hiện các gái trị cài đặt của thẻ » Them: thẻ hiện tập các skin khác nhau » Them và skin có thể lập trình được còn CSS thì không » Them và Skin làm cho ứng dụng web có nhiều cách thể hiện giao diện khác nhau: màu sắc, kích thước, vị trí Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
15. 12.3.1 Tạo Skin và Them » Skin: quy định/chứa các giá trị của thuộc tính server control nhất định nào đó » Skin nằm trong file .Them Cú pháp: Ví dụ Chú ý: thuộc tính là các thuộc tính trình bày nội dung (CSS) Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
16. 12.3.2 Sử dụng » Web APP file Config » Page: EnableTheming=“true“ . . » Controls: SkinID=“tenSkin" Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY