Bài 4: Template & điều hướng trang Web
Các trang trong một ứng dụng, thường có các thành phần giống nhau như: Barner quảng cáo ở đầu trang Menu ở phía bên trái trang Phần Footer của trang Web ASP.NET cung cấp một phương pháp để tạo các trang có các thành phần giống nhau mà không cần viết các đoạn mã giống nhau trên từng trang Web đó là sử dụng trang Master
Bạn đang xem trước 20 trang tài liệu Bài 4: Template & điều hướng trang Web, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên
Bài 4:
Template & điều hướng trang Web
Các nội dung đã học trong bài trước
Kiểm tra tính hợp lệ của dữ liệu
Quản lý trạng thái
Hệ thống bài cũ
Template & Điều hướng trang Web 2
Mục tiêu bài học
1. Trang Master
2. Điều hướng trang Web
Template & Điều hướng trang Web 3
3. Sử dụng Theme
Kiểm tra tính hợp lệ của dữ liệu & Quản lý trạng thái 4
Các trang trong một ứng
dụng, thường có các thành
phần giống nhau như:
Barner quảng cáo ở đầu trang
Menu ở phía bên trái trang
Phần Footer của trang Web
ASP.NET cung cấp một
phương pháp để tạo các
trang có các thành phần
giống nhau mà không cần
viết các đoạn mã giống nhau
trên từng trang Web đó là sử
dụng trang Master
Trang Master
Template & Điều hướng trang Web 5
Hai trang khác nhau trong cùng một ứng dụng chỉ
có phần nội dung hiển thị ở giữa khác nhau, còn
các thành phần khác giống nhau
Trang master cung cấp các
thành phần giống nhau cho các
trang trong một ứng dụng Web
Trang nội dung: chứa phần nội
dung hiển thị trên trang master.
Vùng chứa nội dung: Vùng
không gian hiển thị trang nội
dung
Kết hợp giữa trang master và
trang nội dung tạo nên giao diện
của từng trang đơn lẻ trong ứng
dụng Web
Trang Master/Trang nội dung
Template & Điều hướng trang Web 6
Ví dụ: Mã nguồn của trang master được tạo bởi Visual
Studio
Trang Master
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs"
Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"">
Untitled Page
<asp:ContentPlaceHolder id="ContentPlaceHolder1"
runat="server">
Template & Điều hướng trang Web 7
Trong ASP.NET trang master có định dạng .master
Một trang master luôn bắt đầu bằng chỉ dẫn trang
Master
<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs"
Inherits="MasterPage" %>
Đoạn mã phía sau chỉ dẫn Master giống với các trang
aspx thông thường khác cũng gồm các phần tử ,
,
Trang Master
Template & Điều hướng trang Web 8
Trang master luôn phải chứa một điều khiển
ContentPlaceHolder chỉ định vùng hiển thị trang nội
dung nằm trong thẻ Form
Lập trình viên có thể thêm mã html, asp, các điều khiển
lên trang Master.
Tất cả các phần tử HTML hoặc asp được thêm vào bên
ngoài vùng chứa nội dung sẽ hiển thị trên tất cả các
trang
Trang Master
Template & Điều hướng trang Web 9
Trang Master cũng chứa một File Code-behind chứa các
mã xử lý sự kiện.
Các sự kiện tương ứng của trang master được kích hoạt
sau trang nội dung
Ví dụ: Sự kiện Load của trang nội dung xảy ra trước sự
kiện Load của trang master
Sự kiện của các điều khiển trên trang nội dung sẽ được xử
lý trước trang master
File Code-behind của trang Master
Template & Điều hướng trang Web 10
File code-behind của trang master khá giống với File
code-behind của Web Form thông thường
File Code-behind của trang Master
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class MasterPage : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
Template & Điều hướng trang Web 11
Dẫn xuất từ lớp
MasterPage
Trang nội dung có định dạng là .aspx giống với một Web
Form.
Tuy nhiên, trang nội dung không chứa các phần tử
, , , Form
Trang nội dung bắt đầu bằng chỉ dẫn Page tương tự
WebForm nhưng thêm thuộc tính MasterPageFile chỉ
định trang master mà trang sử dụng
Trang nội dung chứa phần tử Content chỉ định ID của
điều khiển ContentPlaceHolder trên trang master
Trang nội dung
Template & Điều hướng trang Web 12
Mã aspx của một trang nội dung
Trang nội dung
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Order.aspx.cs" Inherits="Order" Title="Untitled
Page" %>
<asp:Content ID="Content3" ContentPlaceHolderID="head"
Runat="Server">
<asp:Content ID="Content4" ContentPlaceHolderID=" ContentPlaceHolder1 "
Runat="Server">
Template & Điều hướng trang Web 13
Các bước tạo ứng dụng ASP.NET sử dụng trang Master
Tạo Web Site
Thêm một trang master vào WebSite. Trình bày bố cục (sử
dụng bảng hoặc CSS) và thêm các phần tử vào trang
master
Thêm các trang nội dung cho WebSite.
Viết các mã xử lý sự kiện cho trang master và các trang
nội dung
Hướng dẫn sử dụng trang Master
Template & Điều hướng trang Web 14
Tương tự như cách thêm một Web Form. Sử dụng hộp
thoại Add New Item
Khác: Chọn Template Master Page
Thêm một trang master
Template & Điều hướng trang Web 15
Tương tự như Web Form. Lập trình viên có thể sử dụng
màn hình thiết kế để thêm các phần tử HTML, điều
khiển asp, ContentPlaceHolder…
Sửa nội dung trang Master
Template & Điều hướng trang Web 16
Tương tự như Web Form, sử dụng cửa sổ Add New Item
để thêm trang nội dung
Khác: Chọn check box Select master page
Thêm trang nội dung
Template & Điều hướng trang Web 17
Nội dung demo
1. Thêm một trang master
vào Website
2. Trình bày bố cục cho
trang Master sử dụng bảng.
Bố cục trang gồm:
Một banner
Một sidebar bên trái
Một vùng chứa nội dung
Footer
Demo
Sử dụng trang Master
Side bar chứa
menu
Vùng chứa
nội dung
Banner
Template & Điều hướng trang Web 18
Footer
3. Thêm một trang nội dung
cho WebSite
4. Thêm các phần tử vào trang
nội dung
5. Khám phá mã nguồn của
trang master và trang nội dung
6. Chạy thử ứng dụng
Demo
Sử dụng trang master
Side bar chứa
menu
Vùng chứa
nội dung
Banner
Template & Điều hướng trang Web 19
Footer
Kiểm tra tính hợp lệ của dữ liệu & Quản lý trạng thái 20
Bất kì web site chuyên
nghiệp nào đều cung cấp
cho người dùng các liên kết
để điều hướng đến các
trang trong web site
Các liên kết có thể trình bày
dưới dạng:
Menu
Đường dẫn liên kết (Site
Map Path)
Điều hướng trang Web
Menu dạng
TreeView
Site Map Path
SQL Server 2008 và Cơ sở dữ liệu quan hệ 21
Với các trang HTML thuần, lập trình viên sử dụng các
Hyperlink để xây dựng các liên kết điều hướng
Với một ứng dụng ASP.NET có nhiều cách để xây dựng
các liên kết điều hướng
Sử dụng HTML hyperlink, hoặc điều khiển hyperlink,
linkbutton của asp…
ASP.NET cung cấp nhóm các điều khiển Navigation để
xây dựng liên kết điều hướng dễ dàng.
TreeView
Menu
SiteMapPath
Điều hướng trang web như thế nào?
SQL Server 2008 và Cơ sở dữ liệu quan hệ 22
TreeView: Hiển thị các
liên kết dưới dạng cây,
giống cấu trúc thư mục
trên Windows
Explorer.
Menu: Quá quen thuộc
SiteMapPath: Hiển thị
dưới dạng dãy các liên kết
từ trang chủ đến trang
hiện tại
TreeView, Menu, SiteMapPath
SiteMapPath
Menu
SQL Server 2008 và Cơ sở dữ liệu quan hệ 23
TreeView
Các điều khiển TreeView, Menu, SiteMapPath hiển
thị cấu trúc điều hướng đã được định nghĩa trong một
file XML, có tên Web.sitemap
Web.sitemap phải được đặt trong thư mục gốc của
ứng dụng.
Để hiển thị cấu trúc điều hướng được định nghĩa trên file
Web.sitemap, điều khiển TreeView, Menu phải buộc
với một điều khiển SiteMapDataSource
Ngược lại, điều khiển SiteMapPath tự động hiển thị
cấu trúc điều hướng trong Web.sitemap không cần sử
dụng điều khiển SiteMapDataSource
Web.sitemap
SQL Server 2008 và Cơ sở dữ liệu quan hệ 24
Mỗi phần tử SiteMapNode định nghĩa một trang trong
web site
Một SiteMapNode có thể chứa các SiteMapNode con để
quy định cấu trúc phân cấp của các trang trong web
site
Web.sitemap
<siteMapNode url="" title=""
description="" />
<siteMapNode url="" title=""
description="" />
SQL Server 2008 và Cơ sở dữ liệu quan hệ 25
- URL: Url của trang
-Title: Đoạn văn bản hiển thị trên
menu
- Description: Đoạn văn bản tool tip
của trang
Ví dụ
File web.sitemap & hiển thị
<siteMapNode url="Default.aspx" title="Home"
description="Home page.">
<siteMapNode url="Service.aspx" title="Service and Support"
description="Customer service and product support.">
<siteMapNode url="CustService.aspx" title="Customer Service"
description="Customer service.">
<siteMapNode url="Support.aspx" title="Product Support"
description="Product support.">
<siteMapNode url="Map.aspx" title="Site Map"
description="A map of all the pages on this web site.">
<siteMapNode url="About.aspx" title="About Us"
description="All about our company.">
SQL Server 2008 và Cơ sở dữ liệu quan hệ 26
Các bước tạo liên kết điều hướng
B1. Tạo file web.sitemap định nghĩa cấu trúc phân cấp của
các liên kết điều hướng (như đã học)
B2. Thêm điều khiển TreeView (hoặc Menu hoặc
SiteMapPath)
B3. Thêm một điều khiển SiteMapDataSource và liên kết
tới file web.sitemap
Tạo liên kết
điều hướng như thế nào?
SQL Server 2008 và Cơ sở dữ liệu quan hệ 27
<asp:TreeView ID="TreeView2" runat="server“ DataSourceID="SiteMapDataSource1"
ShowLines="True">
Mã aspx của điều khiển Treeview (Tham khảo các thuộc tính của điều khiển TreeView,
SiteMapPath, Menu trong SGK)
Mã aspx định nghĩa điều khiển SiteMapDataSource của TreeView (Tham khảo các
thuộc tính trong SGK)
Trên từng trang riêng lẻ
Trên trang Master
Thông thường, các thành phần điều hướng hiển thị
giống nhau trên các trang một web site, nên sử dụng
điều hướng trên trang master
Sử dụng
điều hướng trang Web ở đâu?
SQL Server 2008 và Cơ sở dữ liệu quan hệ 28
Nội dung demo
Tạo ba cấu trúc điều hướng
(hiển thị như hình bên) sử dụng
TreeView, SiteMapPath, Menu
trên trang master đã tạo ở slide
trước.
Tùy chỉnh menu (màu sắc, kích
thước menu…)
Demo
Tạo liên kết điều hướng
SQL Server 2008 và Cơ sở dữ liệu quan hệ 29
Các bước
Thêm file web.sitemap. Cấu hình cấu trúc phân cấp điều
hướng trên file này
Thêm các điều khiển lên trang master
Thêm điều khiển menu vào phần sidebar
Thêm điều khiển SiteMapPath & điều khiển TreeView vào
phần trung tâm trang bên ngoài vùng chứa nội dung
Thêm điều khiển SiteMapDatasource
Chạy và kiểm tra ứng dụng
Thay đổi các thuộc tính màu sắc, độ rộng cho menu
Demo
Tạo liên kết điều hướng
SQL Server 2008 và Cơ sở dữ liệu quan hệ 30
Kiểm tra tính hợp lệ của dữ liệu & Quản lý trạng thái 31
Khi thiết kế một website, việc
định dạng hiển thị cho các
thành phần trên trang như bố
cục trang web, hiển thị hình
ảnh, font chữ, nền, button…
sẽ tạo sự lôi cuốn cho trang
web.
Định dạng trang Web
SQL Server 2008 và Cơ sở dữ liệu quan hệ 32
Các cách định dạng thường dùng
Sử dụng thuộc tính của các điều khiển
Sử dụng inline style
Sử dụng internal style
Sử dụng external style (File CSS)
Ngoài các cách định dạng trên, ASP.NET cung cấp
một tính năng để định dạng trang web. Đó là sử
dụng Theme
Có thể tạo ra các theme khác nhau và áp dụng các theme
này vào các trang trong ứng dụng để định dạng hiển thị
cho các thành phần trên trang
Có thể áp dụng một Theme cho toàn bộ web site hoặc mỗi
trang trong web site áp dụng một Theme khác nhau
Định dạng trang Web
SQL Server 2008 và Cơ sở dữ liệu quan hệ 33
Hai thành phần cơ bản
củaTheme
File CSS
File Skin
File CSS
Chứa các StyleSheet định dạng
hiển thị cho các phần tử HTML
trên trang ASP
File skin
Định dạng hiển thị cho các
điều khiển web server
Theme
SQL Server 2008 và Cơ sở dữ liệu quan hệ 34
Một ứng dụng Web sử dụng Theme để định dạng
hiển thị cho các phần tử html và các điều khiển
Theme được chứa trong thư
mục App_Themes
Thư mục App_Themes có thể
chứa nhiều Folder con. Mỗi
Folder con định nghĩa một
Theme.
Cấu trúc một folder Theme gồm
Các File CSS
Các File Skin
Folder Images chứa ảnh hoặc các
tài nguyên khác được sử dụng
trong file CSS và skin
Cấu trúc thư mục Theme
SQL Server 2008 và Cơ sở dữ liệu quan hệ 35
Cấu trúc thư mục Theme
File CSS của Theme
BODY {
FONT-FAMILY: Verdana, Geneva, Arial, Helvetica,
sans-serif;
FONT-SIZE: 11pt;
LINE-HEIGHT: 110%;
COLOR : #585880;
}
H1 {
font-family: Verdana, Geneva, Arial, Helvetica,
sans-serif;
COLOR: #585880;
margin-top: 3px;
}
SQL Server 2008 và Cơ sở dữ liệu quan hệ 36
Mã định dạng skin cho các điều khiển tương tự đoạn mã
của điều khiển trên trang aspx, chỉ khác không chứa
thuộc tính ID.
Hai loại skin
Skin mặc đinh
Không chứa thuộc tính skinID
Skin được đặt tên
Tên của skin được gán cho thuộc tính SkinID
Skin
SQL Server 2008 và Cơ sở dữ liệu quan hệ 37
<asp:TextBox runat="server"
BackColor="#FFFFFF" BorderStyle="Solid"
Font-Names="Verdana" ForeColor="#585880"
BorderColor="#585880" BorderWidth="1pt" />
Skin mặc định
Skin được đặt
tên
ASP.NET cung cấp hai loại theme khác nhau
Theme tùy chỉnh
Theme StyleSheet
Theme tùy chỉnh
Các style của theme tùy chỉnh được áp dụng sau external,
internal, inline style và các thuộc tính của điều khiển
Theme StyleSheet
Style của Theme StyleSheet được áp dụng trước external,
internal, inline style và thuộc tính của điều khiển
Theme tùy chỉnh/ Theme StyleSheet
SQL Server 2008 và Cơ sở dữ liệu quan hệ 38
Các bước tạo Theme
Tạo Folder chứa Theme bằng cách nhấn chuột phải vào
website>Add Asp.net Folder, chọn Theme. Đặt tên cho
Folder
Thêm file css vào Folder Theme
Thêm file skin vào Folder Theme
Tạo Theme
SQL Server 2008 và Cơ sở dữ liệu quan hệ 39
Một Theme tùy chỉnh có thể được áp dụng cho toàn bộ
ứng dụng hoặc cho các trang được chọn.
Áp dụng Theme tùy chỉnh cho toàn bộ ứng dụng
Thêm phần tử Page vào file web.config. Chỉ định giá trị
thuộc tính Theme bằng tên Theme
Hướng dẫn sử dụng Theme tùy chỉnh
SQL Server 2008 và Cơ sở dữ liệu quan hệ 40
Áp dụng Theme tùy chỉnh cho một trang
Ở giai đoạn thiết kế
Thêm thuộc tính Theme vào chỉ dẫn Page
<%@ Page="" Language="C#" Theme="SmokeAndGlass"
%>
Tại thời gian chạy
Gán giá trị cho thuộc tính Theme của lớp Page trong phương
thức xử lý sự kiện Page_PreInit
protected void Page_PreInit(object sender, EventArgs e)
{
Page.Theme = Session["MyTheme"].ToString();
}
Hướng dẫn sử dụng Theme tùy chỉnh
SQL Server 2008 và Cơ sở dữ liệu quan hệ 41
Áp dụng skin cho một điều khiển
Ở giai đoạn thiết kế
Gán giá trị cho thuộc tính SkinID của điều khiển
<asp:Label ID="lblName" runat="server"
SkinID="Head1">
Tại thời gian chạy
Gán giá trị cho thuộc tính SkinID của điều khiển trong
phương thức xử lý sự kiện PreInit
protected void Page_PreInit(object sender, EventArgs e)
{
lblName.SkinID = Session["MySkinID"].ToString();
}
Hướng dẫn sử dụng Theme tùy chỉnh
SQL Server 2008 và Cơ sở dữ liệu quan hệ 42
Hủy theme tùy chỉnh cho tất cả các trang trong web site
Thiết lập thuộc tính Theme của phần tử Page trong file
web.config bằng xâu rỗng
Hướng dẫn sử dụng Theme tùy chỉnh
SQL Server 2008 và Cơ sở dữ liệu quan hệ 43
Hủy theme tùy chỉnh cho một trang web
Ở giai đoạn thiết kế
Thiết lập thuộc tính Theme của chỉ dẫn Page bằng xâu rỗng
Tại thời gian chạy
Trong phương thức xử lý sự kiện PreInit gán giá trị thuộc
tính Theme của lớp Page bằng xâu rỗng
protected void Page_PreInit(object sender, EventArgs e)
{
Page.Theme = "";
}
Hướng dẫn sử dụng Theme tùy chỉnh
SQL Server 2008 và Cơ sở dữ liệu quan hệ 44
Hủy theme tùy chỉnh cho một điều khiển
Ở giai đoạn thiết kế
Thiết lập thuộc tính EnableTheming của điều khiển bằng
False
<asp:Label ID="lblName" runat="server"
EnableTheming="False" ForeColor="red">
Tại thời gian chạy
Trong phương thức xử lý sự kiện PreInit gán giá trị thuộc
tính EnableTheming của lớp điều khiển bằng False
protected void Page_PreInit(object sender, EventArgs e)
{
lblName.EnableTheming = false;
lblName.ForeColor = System.Drawing.Color.Red;
}
Hướng dẫn sử dụng Theme tùy chỉnh
SQL Server 2008 và Cơ sở dữ liệu quan hệ 45
Nội dung demo:
Tạo Theme
Tạo file CSS cho theme
Tạo file skin cho theme.
Định dạng hiển thị cho các điều khiển button, textbox…
Gán Theme tùy chỉnh cho toàn bộ trang trong web site.
Chạy thử
Hủy bỏ Theme tùy chỉnh cho toàn bộ trang. Chạy thử
Gán Theme tùy chỉnh cho một trang. Chạy thử
Hủy bỏ Theme tùy chỉnh cho một trang. Chạy thử
Gán skin cho một điều khiển. Chạy thử
Demo
Sử dụng Theme
SQL Server 2008 và Cơ sở dữ liệu quan hệ 46
Trang Master
Sử dụng trang master để tạo các trang có những thành
phần giống nhau (barner, menu, footer…)
Mỗi trang Master phải chứa tối thiểu một điều khiển
ContentPlaceHolder, nằm trong thẻ , quy định
vùng chứa nội dung (vùng hiển thị trang nội dung)
Trang nội dung chứa phần nội dung của từng trang riêng
lẻ
Tất thành phần được thêm bên ngoài vùng chứa nội dung,
sẽ được hiển thị trên mọi trang trong website.
Có thể tạo nhiều trang master cho một website, và chỉ
định trang master cho từng trang nội dung riêng lẻ.
Tổng kết
SQL Server 2008 và Cơ sở dữ liệu quan hệ 47
Điều hướng trang Web
ASP.NET cung cấp điều khiển Navigation để tạo các liên
kết điều hướng trang Web
TreeView
Menu
SiteMapPath
TreeView, Menu, SiteMapPath hiển thị cấu trúc phân cấp
điều hướng trang web được định nghĩa trong file xml, có
tên Web.sitemap
SiteMapPath tự động hiển thị cấu trúc phân cấp điều
hướng trong file web.sitemap
TreeView & Menu phải buộc với một điều khiển
SiteMapDataSource để hiển thị cấu trúc phân cấp điều
hướng trong file web.sitemap
Tổng kết
SQL Server 2008 và Cơ sở dữ liệu quan hệ 48
Theme
ASP.NET cung cấp tính năng Theme để định dạng hiển thị
cho các thành phần trên trang Web
Hai thành phần cơ bản của Theme
File CSS: Chứa các StyleSheet định dạng hiển thị cho các
phần tử HTML trên trang ASP
File Skin: Định dạng hiển thị cho các điều khiển web server
Hai loại Theme
Theme tùy chỉnh: Các style của theme tùy chỉnh được áp
dụng sau external, internal, inline style và các thuộc tính của
điều khiển
Theme: Style của Theme StyleSheet được áp dụng trước
external, internal, inline style và thuộc tính của điều khiển
Tổng kết
SQL Server 2008 và Cơ sở dữ liệu quan hệ 49
