Master pagelayout template nhất quán cho phép áp dụng cho nhiều Web Form trong site Page và bổ sung thêm nội dung Master Page Content Page... Công ngh ệ NET 5 HIENLTH Master page có thể
Trang 2Chương 3 (tt):
Thi ế t k ế giao di ệ n Web
Trang 3Công ngh ệ NET 3 HIENLTH
Master Page
Theme & Skin
Web User Control
Navigation Control
Javascript
Trang 4Master page
(layout template) nhất quán cho phép áp dụng
cho nhiều Web Form trong site
Page và bổ sung thêm nội dung
Master Page
Content Page
Trang 5Công ngh ệ NET 5 HIENLTH
Master page có thể chứa các content region
nơi mà nội dung mới có thể được thêm vào.
Một content page sẽ có tất cả các thành phần
cố định từ một master page, và có thể bổ sung
tùy ý vào các content region
Trang 6Minh h ọ a Master page
Trang 7Công ngh ệ NET 7 HIENLTH
o Header, footer, menu, layout…
Tạo các vùng placeholder control cho nội dung,
mà các trang sẽ tùy biến bổ sung vào!
Trang 8Cú pháp c ủ a Content page
Đối với những trang .aspx
o Tham chi ế u đế n master page trong directive
o Xây d ự ng n ộ i dung cho các ph ầ n placeholder control
đ ã t ạ o trong master page
• Thi ết kế phần Content control, mỗi trang sẽ có nội dung
Trang 9Công ngh ệ NET 9 HIENLTH
Trang master định nghĩa nội dung chung và
placeholder
o <asp:ContentPlaceHolder>
Content page tham chiếu đến master và đưa nội
dung vào các placeholder
o <asp:Content>
Trang 10Master page
Sử dụng các công cụ thiết kế web chuyên
nghiệp để thiết kế trang mẫu
Sử dụng Visual Studio để
o Chuy ể n thành MasterPage
o Đị nh ngh ĩ a các vùng cho phép thay đổ i (ContentPlaceHolder)
Tạo trang web áp dụng MasterPage
Thi ế t k ế
Layout
Đ ánh d ấ u ContentPlaceHolder
Áp d ụ ng Aspx Page Chuy ể n đổ i
MasterPage
Trang 11Công ngh ệ NET 11 HIENLTH
Cách t ạ o Master page
Trang 13Công ngh ệ NET 13 HIENLTH
Ta thiết kế lại site.master
o Thêm table vào, chia làm các ph ầ n header, left, main
Content placeholder
footer left
Trang 14Cách t ạ o Master page (4)
Phần source của site.master
Phần placeholder dành cho content page
Lưu ý: phần header , footer
và left sẽ được thiết kế tùy theo ứng dụng web cụ thể
Trang 15Công ngh ệ NET 15 HIENLTH
T ạ o form m ớ i có template là “web content form”.
Chọn Web content form
Tên file aspx
Trang 17Công ngh ệ NET 17 HIENLTH
Phần source của content page:
DemoWebForm1.aspx
Ánh xạ đến placeholder control “ MainContent ” trong site1.master
Trang 18Cách t ạ o Content page (4)
Trong màn hình design của content page
Phần thiết kế dành cho content page: DemoWebForm1.aspx ở
đây!
Phần này là của site1.master,
Trang 19Công ngh ệ NET 19 HIENLTH
Ví dụ bổ sung nội dung cho Content page
Trang 20Cách t ạ o Content page (6)
Các trang Content page chỉ chứa phần chỉ dẫn,
và các tag content control (phụ thuộc vào số
placeholder control của master page)
Bên trong các vùng content control ta thiết kế
web form bình thường.
Trang 21Công ngh ệ NET 21 HIENLTH
Khai báo trong t ừ ng file aspx
o S ử dụng thuộc tính MasterPageFile trong phần Directive
Khai báo s ử dụng master page trong toàn site
<%@ Page Title="" Language="C#"
Trang 22Ư u đ i ể m khi dùng Master page
Tạo ta khuôn mẫu chung cho toàn bộ phần
layout của site
o Định nghĩa một lần và sử dụng lại, chung cho toàn
site
Include phần nội dung chung của các page
o T ươ ng t ự nh ư User Control
Loại bỏ những phần trùng lắp, khi xây dựng
layout chung như các phiên bản trước của
ASP.NET
Trang 23Công ngh ệ NET 23 HIENLTH
Problem 1
Trong Content Page, làm sao truy xuất control
trên Master Page?
o S ử dụng phương thức FindControl từ đối tượng
Master
• VD: Trên Master Page có control có ID=“ lblCtrl ” Trên Content Page c ần truy xuất thì sử dụng FindControl:
Label lblCtrl = Master FindControl(“ lblCtrl ”) as Label ;
o Master Page : Đóng gói dữ liệu thành các thuộc tính
có th ể truy xu ấ t
Trang 24Problem 2
Thay đổi MasterPage cho Content Page:
protected void Page_PreInit(object sender, EvenrArgs e)
{
Page.MasterPageFile = "~/ NewMasterPage.master ";
}
Trang 25CSS, Theme & Skin
Trang 26Các thu ộ c tính giao di ệ n
Properties Mô tả
CssClass Xác định tên của lớp CSS được gán cho control
Trang 27Công ngh ệ NET 27 HIENLTH
Các thuộc tính thành phần này có thể được khai
báo thông qua markup hoặc programmatically.
Các thuộc tính thành phần này render trong
browser như các inline CSS style.
Trang 28Theme & Skin
Themes và Skins là một cơ chế mở rộng trong
Trang 29Công ngh ệ NET 29 HIENLTH
Theme
Theme cho phép áp d ụ ng m ộ t đị nh d ạ ng th ố ng nh ấ t cho
nhi ề u control, và trên nhi ề u page
Theme cho phép áp d ụng định dạng cho các control một
cách t ự động, không cần phải thiết lập cho từng thuộc
tính
Theme là khái ni ệ m t ươ ng t ự nh ư style c ủ a HTML
o C ả hai cách tiếp cận cho phép sử dụng lại định dạng trong
nhi ều nơi
o Style áp d ụng cho client, trong khi theme được xử lý trên server
o Style s ử dụng các thuộc tính định dạng CSS, trong khi theme có
th ể sử dụng bất cứ thuộc tính nào của ASP.NET control
o Có th ể sử dụng CSS và theme trong cùng ứng dụng! Chúng bổ
sung cho nhau
Trang 30Theme Folder
Để sử dụng theme trong web app, cần thiết phải
tạo thư mục định nghĩa theme đó.
Thư mục này chứa bên trong thư mục khác có
tên “App_Theme”, thư mục này đặt trên cùng
của thư mục web app
o VD: web app có tên MyWebApp m ột theme có tên
CloudTheme s ẽ được đặt bên trong thư mục
MyWebApp\App_Theme\CloudTheme
Một ứng dụng có thể định nghĩa nhiều theme,
chứa trong nhiều folder Chỉ một theme được
áp dụng cho một page tại một thời điểm
Trang 31Công ngh ệ NET 31 HIENLTH
Skin file
Để t ạ o các đị nh d ạ ng cho theme ch ứ a trong file g ọ i là
skin, t ố i thi ể u m ộ t theme ph ả i có 1 file skin
File Skin là d ạ ng file text có ph ầ n m ở r ộ ng là skin
Skin ch ứ a danh sách các control tag Các control tag
này không c ầ n ph ả i ch ứ a đầ y đủ các thành ph ầ n c ủ a
control, nó ch ứ a các thu ộ c tính c ầ n đị nh d ạ ng
VD: áp d ụ ng n ề n màu cam, v ớ i màu text là tr ắ ng cho
control textbox thì mô t ả nh ư sau
<asp:ListBox runat="server" ForeColor="White"
BackColor="Orange"/>
Trang 32Skin file
Có thể tạo nhiều skin file hoặc đặt tất cả control
tag vào cùng một file skin đều như nhau
Trang 33Công ngh ệ NET 33 HIENLTH
Minh h ọ a skin file đơ n gi ả n
Skin thiết lập màu nền và màu text cho một số
control cơ bản
Để áp dụng theme trong page ta thiết lập thuộc
tính theme trong page directive đến thư mục
theme tương ứng
<asp:ListBox runat="server" ForeColor="White" BackColor="Orange"/>
<asp:TextBox runat="server" ForeColor="White" BackColor="Orange"/>
<asp:Button runat="server" ForeColor="White" BackColor="Orange"/>
<%@ Page Language="C#" Theme="FunkyTheme" %>
Trang 34Minh h ọ a t ạ o theme
Tạo ứng dụng ASP.NET
o T ạ o web form có layout nh ư sau
• Trên form có 2 text box và Button là d ạng ASP.NET control
browser
Trang 35Công ngh ệ NET 35 HIENLTH
Trang 36Minh h ọ a t ạ o theme
Tạo skin file cho DemoTheme
o Kích chu ột phải lên thư mục DemoTheme trong App_Theme
ch ọn Add ⇒ New Items, ch ọn skin file trong phần template
Trang 37Công ngh ệ NET 37 HIENLTH
Định nghĩa style cho TextBox và Button trong
file Skin1.skin của DemoTheme
Khai báo sử dụng theme trong page
<%@ Page Language ="C#" AutoEventWireup ="true"
CodeBehind ="Default.aspx.cs"
Inherits ="WebApplication15._Default"
Theme="DemoTheme" %>
< asp : TextBox runat ="server" BackColor ="Yellow" ForeColor ="Red" />
< asp : Button runat ="server" BackColor ="Green" ForeColor ="White" />
Trang 39Công ngh ệ NET 39 HIENLTH
Bổ sung file web.config
Trang 40WEB USER CONTROL & CUSTOM CONTROL
Trang 41Công ngh ệ NET 41 HIENLTH
Web Custom control
ASP.NET có hai loại custom control
o User control cho phép reuse mộ t ph ầ n c ủ a trang web b ằ ng cách đặ t vào trong ascx file
o Custom server control cho phép thiế t k ế m ộ t control
m ớ i b ằ ng cách c ả i ti ế n control đ ã có ho ặ c xây d ự ng control m ới
Hai loại custom control đều cung cấp đầy đủ
phương thức, thuộc tính và sự kiện
Trang 42User control
User control s ử d ụ ng mô hình k ế t h ợ p (composition
model), có th ể ch ứ a HTML và server control khác
Page2.aspx Control1.ascx
Page1.aspx
Page3.aspx
Application A Application B
Trang 43Công ngh ệ NET 43 HIENLTH
User control
T ương tự như web form, Web user control được
chia làm hai ph ần:
o Ph ầ n HTML v ớ i các control tag ( ascx file)
o Code behind file v ới phần xử lý (.cs)
User control có cùng s ự kiện như một đối tượng
Page (nh ư Load và PreRender)
Sự khác nhau giữa user control và web form
o User control b ắt đầu với Control directive thay vì Page
directive c ủ a Page
o User control s ử dụng phần mở rộng ascx thay vì aspx
o User control không th ể request tr ự c ti ế p t ừ client
Trang 44User control
Ví dụ một user control chứa một Label bên
trong
<%@ Control Language=" C# " AutoEventWireup=" true "
CodeFile=" Footer.ascx.cs " Inherits=" Footer " %>
<asp:Label id=" lblFooter " runat=" server " />
<%@ Control Language=" C# " AutoEventWireup=" true "
CodeFile=" Footer.ascx.cs " Inherits=" Footer " %>
<asp:Label id=" lblFooter " runat=" server " />
Trang 45Công ngh ệ NET 45 HIENLTH
User control
Control directive s ử dụng cùng các thuộc tính với Page
directive cho web page nh ư
o Language, AutoEventWireup, Inherits
Code behind cho user control này t ươ ng t ự nh ư web form.
o S ử dụng sự kiện UserControl.Load để add text vào label
public partial class Footer : UserControl {
protected void Page_Load(Object sender, EventArgs e) {
lblFooter.Text = “Time: ";
lblFooter.Text += DateTime.Now.ToString();
} }
public partial class Footer : UserControl {
protected void Page_Load(Object sender, EventArgs e) {
lblFooter.Text = “Time: ";
lblFooter.Text += DateTime.Now.ToString();
} }
Trang 46User control
Sử dụng User control
o Insert vào trong web page
o S ử d ụ ng Register directive để khai báo s ử d ụ ng control
o Khai báo s ử dụng user control
<%@ Register TagPrefix=“HIENLTH" TagName=" Footer “ Src=" Footer.ascx " %>
<%@ Register TagPrefix=“HIENLTH" TagName=" Footer “ Src=" Footer.ascx " %>
<h1>Minh họa sử dụng Footer user control</h1><hr />
<br /><br />
< HIENLTH:Footer id="Footer1" runat="server" />
Trang 47Công ngh ệ NET 47 HIENLTH
User control
Minh họa sử dụng User Control
User control
Trang 48User control
User control bao bọc các thành phần bên trong
Do đó page không thể truy cập các control trong
Sử dụng Property, Method, Event để lấy thông
tin các thành phần bên trong User Control.
Trang 49Công ngh ệ NET 49 HIENLTH
User control
Tạo thuộc tính & phương thức cho user control
public string Content {
get // lấy nội dung (label) của user control
} }
public void SetContent( string str) {
// thiết lập nội dung cho label
Label1.Text = str;
}
Code behind của user control
Trang 50User control
User control là gi ả i pháp thu ậ n ti ệ n khi mu ố n k ế t h ợ p
nhi ề u web control vào chung m ộ t kh ố i th ố ng nh ấ t!
o S ử dụng user control kết hợp text box và validation control.
H ạ n ch ế c ủ a User control khi mu ố n b ổ sung ho ặ c m ở
r ộng
o Không th ể customize lại phần HTML thể hiện với user control
o Không th ể chia sẻ user control với những ứng dụng khác.
Đa số người lập trình chọn cách tạo custom web control
v ớ i đầ y đủ tính n ă ng h ơ n.
Trang 51Công ngh ệ NET 51 HIENLTH
Trang 52User control
Bước 2: Tạo User control tên NumberTextBox
o Kích chu ộ t ph ả i lên project ch ọ n Add => New Item…
o Ch ọ n Templates là Web User Control
Đặt tên user control
Chọn user control
Trang 53Công ngh ệ NET 53 HIENLTH
Trang 54User control
Trang 55Công ngh ệ NET 55 HIENLTH
User control
Bước 4: sử dụng user control trong web page
o Để s ử d ụ ng user control trong web page, ta có th ể
kéo th ả user control vào trang web c ầ n s ử d ụ ng
• Kéo user control NumberTextbox vào Default.aspx
Default.aspx
Kéo thả
Trang 56User control
VS tự động tạo tag Register và tag sử dụng
User control NumberTextbox trong default.aspx
Trang 57Công ngh ệ NET 57 HIENLTH
User control
Chạy demo trang default.aspx
User control: NumberTextBox
Bổ sung thêm Label cho user control: NumberTextBox, Label
này cho biết ý nghĩa dữ liệu mà user nhập vào.
Bổ sung thêm property để lấy giá trị mà user nhập trong TextBox
của User control.
Bổ sung thêm Label cho user control: NumberTextBox, Label
này cho biết ý nghĩa dữ liệu mà user nhập vào.
Bổ sung thêm property để lấy giá trị mà user nhập trong TextBox
của User control.
Trang 58User control
Yêu cầu bài tập
o T ạo một user control LienHe
o Ch ứ a các text box cho phép nh ậ p các thông tin
o V ớ i m ỗ i thông tin trên ph ả i t ạ o các property t ươ ng
ứ ng, để bên ngoài (web page ch ứ a user control) có
th ể l ấ y các giá tr ị này!
Trang 59Công ngh ệ NET 59 HIENLTH
Custom control
Custom control được tạo giống như class
Tạo và sử dụng custom control theo dạng
library class
o T ạ o ASP.NET Custom control
o Biên d ị ch thành DLL
o Import trong ứng dụng web (kéo thả, code) và sử
d ụ ng custom control nh ư l ớ p th ư vi ệ n bình th ườ ng
o Cho phép dùng l ại trong nhiều ứng dụng web khác
nhau.
Trang 60Custom control
Ta có th ể t ạ o custom control t ừ l ớ p control có s ẵ n, và b ổ
sung thêm nhi ều chức năng.
Ví d ụ : t ạ o m ộ t Text box v ớ i đị nh d ạ ng đặ c bi ệ t
Cho phép thay đổi phần HTML render:
o Override ph ương thức render
o Vi ết phần bổ sung HTML thông qua đối tượng HtmlWriter đi
kèm v ới phương thức Render để output trực tiếp HTML
o S ử dụng từ khóa base để gọi phương thức của lớp cơ sở
• Đảm bảo việc bổ sung sẽ không thay thế code mặc định
Trang 61Công ngh ệ NET 61 HIENLTH
Custom control
public class TitledTextBox : TextBox
{
private string title;
public string Title {
get { return title; } set { title = value; } }
protected override void writer) {Render(HtmlTextWriter
// tạo bổ sung tag HTML với title writer.Write("<h1>" + title + "</h1>");
// gọi Render của lớp cơ sở, nội dung của textbox sẽ xuất ra base.Render(writer);
} }
public class TitledTextBox : TextBox
{
private string title;
public string Title {
get { return title; } set { title = value; } }
protected override void writer) {Render(HtmlTextWriter
// tạo bổ sung tag HTML với title writer.Write("<h1>" + title + "</h1>");
// gọi Render của lớp cơ sở, nội dung của textbox sẽ xuất ra base.Render(writer);
} }
Trang 62Custom control
Demo cách tạo custom control dạng thư viện và
sử dụng trong ứng dụng khác.
Phần demo này tạo một custom control dạng
TextBox, có bổ sung một caption cho text box
Bước 1: Tạo một project có template dạng:
o Đặ t tên cho Custom control là: MyServerControl
Trang 63Công ngh ệ NET 63 HIENLTH
Custom control
Bước 2: thay đổi lớp cơ sở mặc định từ
WebControl sang TextBox
Trang 65Công ngh ệ NET 65 HIENLTH
Custom control
Bước 4: Override lại phương thức Render của
Textbox, bổ sung thêm caption
Trang 66Custom control
Bước 5: Build project, kết quả là file DLL
Đây là dạng file thư viện liên kết động, ta có thể
import vào web page để sử dụng.
Trang 67Công ngh ệ NET 67 HIENLTH
Custom control
Tạo project demo sử dụng custom control
Để import custom control vào project ta có thể
làm như sau:
o Import custom control vào ToolBox
• Kích chu ột phải lên toolbox Standard chọn Choose Items…
• Browse đến file DLL của custom control
o T ừ ToolBox kéo th ả custom control vào web page
o Trong s ự ki ệ n Load c ủ a web page, thi ế t l ậ p l ạ i caption c ủ a custom control