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.
Trang 1Bài12: Masterpage và UserControls
Lê Quang Lợi Email: loilequang@gmail.com loilq@utehy.edu.vn
Trang 2» Masterpage
» UserControl
» Them và Skin
Bài 12: Masterpage và UserControls
Trang 3» Master Page : là trang khung (layout) Còn được gọi là
» 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
» Thống nhất giao diện, giảm thiết kế, sử dụng lại
12.1 MasterPage
Trang 4 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
Trang 512.1 MasterPage
Cấu trúc trang
MasterPage
ContendPlateHolder
Trang 6
12.1.1 Trang Master Page
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org
/TR/xhtml11/DTD/xhtml11.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server" > <title>Master page title</title> </head>
<body>
<form id="form1" runat="server"> <table> <tr> <td>
<asp:contentplaceholder
id="Main" runat ="server" />
</td> <td>
<asp:contentplaceholder
id="Footer" runat ="server" />
</td> </tr> </table>
</form>
</body>
</html>
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
Trang 712.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 >
< asp:Content ID="Content2"
ContentPlaceHolderID ="Footer"
Runat ="Server" > Footer content
</ asp: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)
Trang 8» UserSontrol : server control được thiết kế dựa trên các
control khác (kể cả control vừa thiết kế)
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
Trang 912.2 UserControls
<%@ Control Language ="C#"
ClassName ="SampleUserControl" %>
<h3> <u>User Control</u> </h3>
Enter Name:
<asp:textbox id ="Name" runat=server />
<asp:button Text ="Enter"
OnClick ="EnterBtn_Click" runat=server />
<br> <br>
<asp:label id ="Label1" runat=server />
<script runat=server> void EnterBtn_Click(Object sender, EventArgs e) {
Label1.Text = "Hi " + Name.Text +
" welcome to ASP.NET!";
}
</script>
Chỉ thị UserControl
Nội dung Usercontrol
Trang 1012.2 UserControls
<%@ Page Language="C#" %>
<%@ Register TagPrefix="uc"
TagName ="Spinner"
Src ="~/ SampleUserControl.ascx "
%>
<html> <body>
<form runat="server">
<uc:Spinner id ="Spinner1" />
</form>
</body>
ĐĂNG KÝ VỚI TRANG aspx
Sử dụng Usercontrol
Trang 11» <%@ Control Language ="C#" ClassName =“ust" %>
» Đố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
Chú ý: UserControl được dịch cùng với trang khi gọi
12.2.1 Tạo UserControls
Trang 12» Đă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
12.2.2 Sử dụng
Trang 13» 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
Trang 14» 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 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
Trang 15» 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)
12.3.1 Tạo Skin và Them
Trang 16» Web APP file Config
<configuration>
<system.web>
<pages StyleSheetTheme ="Themename" />
</system.web>
</configuration>
<%@ Page Theme ="ThemeName" %>
<%@ Page StyleSheetTheme ="ThemeName" %>
12.3.2 Sử dụng