Công nghệ web - Bài 12: Masterpage và usercontrols
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
Bạn đang xem nội dung tài liệu Công nghệ web - Bài 12: Masterpage và usercontrols, để 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
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
» Masterpage
» UserControl
» Them và Skin
Bài 12: Masterpage và UserControls
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
» 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
12.1 MasterPage
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
Thực thi trang Master page
12.1 MasterPage
Trang kết quả được đưa ra
có sự kết hợp của
masterpage và trang thực thi
Trang MasterPage: cho các
trang khác kế thừa cấu trúc
Trang ASPX: chứa nội dung
riêng. Kết cấu kế thừa từ
trang MasterPage
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"
"
/TR/xhtml11/DTD/xhtml11.dtd"> <html
xmlns="" >
Master page title
<asp:contentplaceholder
id="Main" runat="server" />
<asp:contentplaceholder
id="Footer" runat="server" />
Chỉ thị trang MasterPage
ControlPalte Holder cho
phép Page kế thừa và cài
đặt giao diện riêng
Thành phần giao diện của
trang Masterpage
- 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#"
MasterPageFile="~/Master.master"
Title="Content Page 1" %>
<asp:Content ID="Content1"
ContentPlaceHolderID="Main"
Runat="Server"> Main content
<asp:Content ID="Content2"
ContentPlaceHolderID="Footer"
Runat="Server" > Footer content
Chỉ thị trang MasterPage
Kế thừa từ khung và cài
đặt riêng
Nội dung cho phép cài đặt
riêng (mã HTML + Server
tags)
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
» 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
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 UserControls
<%@ Control Language="C#"
ClassName="SampleUserControl" %>
User Control
Enter Name:
<asp:button Text="Enter"
OnClick="EnterBtn_Click" runat=server/>
void
EnterBtn_Click(Object sender,
EventArgs e) {
Label1.Text = "Hi " + Name.Text +
" welcome to ASP.NET!";
}
Chỉ thị UserControl
Nội dung Usercontrol
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"
TagName="Spinner"
Src="~/SampleUserControl.ascx"
%>
ĐĂNG KÝ VỚI TRANG aspx
Sử dụng Usercontrol
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
»
» 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
12.2.1 Tạo UserControls
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
» Đă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
12.2.2 Sử dụng
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
» 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
12.2.3 Custom Control
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
» 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í
12.3 Them và Skin
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
» 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)
12.3.1 Tạo Skin và Them
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
» Web APP file Config
» Page: EnableTheming=“true“
» Controls: SkinID=“tenSkin"
12.3.2 Sử dụng
