Bài giảng Công nghệ Web - Bài 12: Masterpage và UserControls - Lê Quang Lợi
Bài 12: Masterpage và UserControls
» Masterpage
» UserControl
» Them và Skin
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
Nội dung tài liệu Bài giảng Công nghệ Web - Bài 12: Masterpage và UserControls - Lê Quang Lợi, để tải tài liệu về máy bạn click vào nút DOWNLOAD ở trên
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" Chỉ thị trang MasterPage
"
/TR/xhtml11/DTD/xhtml11.dtd"> <html
xmlns="" > ControlPalte Holder cho
Master page title phép Page kế thừa và cài
đặt giao diện riêng
<asp:contentplaceholder
id="Main" runat="server" />
Thành phần giao diện của
<asp:contentplaceholder trang Masterpage
id="Footer" runat="server" /> - 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
<% @ Page Language="C#"
Chỉ thị trang MasterPage
MasterPageFile="~/Master.master"
Title="Content Page 1" %>
<asp:Content ID="Content1" Kế thừa từ khung và cài
đặt riêng
ContentPlaceHolderID="Main"
Runat="Server"> Main content
Nội dung cho phép cài đặt
<asp:Content ID="Content2" riêng (mã HTML + Server
tags)
ContentPlaceHolderID="Footer"
Runat="Server" > 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
<%@ Control Language="C#" Chỉ thị UserControl
ClassName="SampleUserControl" %>
User Control Nội dung Usercontrol
Enter Name:
void
EnterBtn_Click(Object sender,
<asp:button Text="Enter" EventArgs e) {
Label1.Text = "Hi " + Name.Text +
OnClick="EnterBtn_Click" runat=server/> " 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
<%@ Register TagPrefix="uc" ĐĂNG KÝ VỚI TRANG aspx
TagName="Spinner"
Sử dụng Usercontrol
Src="~/SampleUserControl.ascx"
%>
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
»
» 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.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
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ụ
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
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
Các file đính kèm theo tài liệu này:
bai_giang_cong_nghe_web_bai_12_masterpage_va_usercontrols_le.pdf
