Bài giảng Công nghệ Web (ASP.NET): Bài 12 - Lê Quang Lợi
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (531.64 KB, 16 trang )
Bài12: Masterpage và UserControls
Lê Quang Lợi
Email:
Bài 12: Masterpage và UserControls
» Masterpage
» UserControl
» Them và Skin
Lê Quang Lợi:
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:
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:
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:
Môn học : Công nghệ WEB (ASP.NET)
CNPM-CNTT-ĐHSPKT HY
12.1.1 Trang Master Page
<%@ Master Language="C#" %>
"
/TR/xhtml11/DTD/xhtml11.dtd">
<head runat="server" > <title>Master page title</title> </head>
<body>
<form id="form1" runat="server"> <table> <tr> <td>
Chỉ thị trang MasterPage
ControlPalte Holder cho
phép Page kế thừa và cài
đặt giao diện riêng
</td> <td>
</td> </tr> </table>
</form>
</body>
</html>
Lê Quang Lợi:
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
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"
Chỉ thị trang MasterPage
Title="Content Page 1" %>
ContentPlaceHolderID="Main"
Kế thừa từ khung và cài
đặt riêng
Runat="Server"> Main content
</asp:Content>
Nội dung cho phép cài đặt
riêng (mã HTML + Server
tags)
Runat="Server" > Footer content
</asp:content>
Lê Quang Lợi:
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:
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" %>
<u>User Control</u>
Nội dung Usercontrol
Enter Name:
<asp:textbox id="Name" runat=server/>
<script runat=server> void
EnterBtn_Click(Object sender,
EventArgs e) {
Label1.Text = "Hi " + Name.Text +
" welcome to ASP.NET!";
}
</script>
<asp:label id="Label1" runat=server/>
Lê Quang Lợi:
Môn học : Công nghệ WEB (ASP.NET)
CNPM-CNTT-ĐHSPKT HY
12.2 UserControls
<%@ Page Language="C#" %>
<%@ Register TagPrefix="uc"
ĐĂNG KÝ VỚI TRANG aspx
TagName="Spinner"
Src="~/SampleUserControl.ascx"
Sử dụng Usercontrol
%>
<html> <body>
<form runat="server">
<uc:Spinner id="Spinner1" />
</form>
</body>
Lê Quang Lợi:
Môn học : Công nghệ WEB (ASP.NET)
CNPM-CNTT-ĐHSPKT HY
12.2.1 Tạo UserControls
» <%@ Control Language="C#" ClassName=“ust" %>
» 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:
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
<%@Register TagPrefix="My"TagName=“new"Src="~/new.ascx" %>
» Sử dụng: Tương tác như một control bình thường
Thẻ: <My:new runat="server" ID=“new1" />
Lập trình: tạo/ thiết lập(thuộc tính, sự kiện)/ Thêm
Lê Quang Lợi:
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:
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:
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: <asp:tên runat="server" thuộc tính=“giatri”/>
Ví dụ
<asp:Button runat="server" BackColor=“Red" ForeColor="black" />
Chú ý: thuộc tính là các thuộc tính trình bày nội dung (CSS)
Lê Quang Lợi:
Mơn học : Công nghệ WEB (ASP.NET)
CNPM-CNTT-ĐHSPKT HY
12.3.2 Sử dụng
» Web APP file Config
<configuration>
<system.web>
</system.web>
</configuration>
» Page: EnableTheming=“true“
<%@ Page Theme="ThemeName" %>
<%@ Page StyleSheetTheme="ThemeName" %>
» Controls: SkinID=“tenSkin"
Lê Quang Lợi:
Môn học : Công nghệ WEB (ASP.NET)
CNPM-CNTT-ĐHSPKT HY
