Bài giảng Công nghệ Web (ASP.NET): Bài 12 - Lê Quang Lợi

Bài 12 - Masterpage và UserControls. Các nội dung cơ bản được trình bày trong trang này gồm có: MasterPage, trang Master Page, Page kết thừa từ Masterpage, UserControls, tạo UserControls, custom control. Mời các bạn cùng tham khảo.
Nội dung trích xuất từ tài liệu:
Bài giảng Công nghệ Web (ASP.NET): Bài 12 - Lê Quang Lợi Bài12: Masterpage và UserControls Lê Quang Lợi Email: loilequang@gmail.com loilq@utehy.edu.vn 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 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 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 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 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 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 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 12.2 UserControls Nội dung Usercontrol User Control 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 12.2 UserControls Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 12.2.1 Tạo UserControls » 12.2.2 Sử dụng » Đăng ký sử dụng  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 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 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 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ụ 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