bài 4 template và điều hướng trang web

Trang master cung cấp cácthà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

Trang 1

Bài 4:

Template & điều hướng trang Web

Trang 2

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ũ

Trang 3

Mục tiêu bài học

1 Trang Master

2 Điều hướng trang Web

3 Sử dụng Theme

Trang 5

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

Trang Master

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

Trang 6

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

Trang Master/Trang nội dung

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

Trang 7

Ví dụ: Mã nguồn của trang master được tạo bởi Visual

< head id="Head1" runat="server">

< title >Untitled Page</ title >

<asp:ContentPlaceHolder id="head" runat="server">

< head id="Head1" runat="server">

< title >Untitled Page</ title >

<asp:ContentPlaceHolder id="head" runat="server">

Trang 8

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

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ử <html>,

Trang Master

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

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ử <html>,

Trang 9

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

< asp:ContentPlaceHolder id="ContentPlaceHolder1“ runat="server">

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

< asp:ContentPlaceHolder id="ContentPlaceHolder1“ runat="server">

Trang 10

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

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

Trang 11

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

Trang 12

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ử

<html>, <head>, <body>, 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

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ử

<html>, <head>, <body>, 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 13

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 "

<% @ Page Language="C#" MasterPageFile="~/MasterPage.master"

AutoEventWireup="true" CodeFile="Order.aspx.cs" Inherits="Order" Title="Untitled Page" %>

< asp : Content ID="Content3" ContentPlaceHolderID=" head "

Trang 14

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

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

Trang 15

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

Trang 16

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

Trang 17

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

Trang 18

Nội dung demo

1 Thêm một trang master

Banner

Nội dung demo

1 Thêm một trang master

Trang 19

3 Thêm một trang nội dung

Trang 21

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

Site Map Path

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

Trang 22

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

Điều hướng trang web như thế nào?

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

Trang 23

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

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

Trang 24

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ử

Web.sitemap

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ử

Trang 25

Mỗi phần tử SiteMapNode định nghĩa một trang trong

< siteMapNode url="" title="" description="">

< siteMapNode url="" title=""

< siteMapNode url="" title="" description="">

< siteMapNode url="" title=""

Trang 26

Ví dụ File web.sitemap & hiển thị

<? xml version ="1.0" encoding ="utf-8" ?>

< siteMap xmlns ="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

< 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 >

< siteMapNode url ="Support.aspx" title ="Product Support"

description ="Product support.">

</ siteMapNode >

< siteMapNode url ="Map.aspx" title ="Site Map"

description ="A map of all the pages on this web site.">

</ siteMapNode >

<? xml version ="1.0" encoding ="utf-8" ?>

< siteMap xmlns ="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

< 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 >

< siteMapNode url ="Support.aspx" title ="Product Support"

description ="Product support.">

</ siteMapNode >

< siteMapNode url ="Map.aspx" title ="Site Map"

description ="A map of all the pages on this web site.">

</ siteMapNode >

Trang 27

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ủacá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ếttới file web.sitemap

Tạo liên kết điều hướng như thế nào?

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ủacá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

Trang 28

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?

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

Trang 29

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

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…)

Trang 30

Các bước

Thêm file web.sitemap Cấu hình cấu trúc phân cấp điềuhướ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

Demo Tạo liên kết điều hướng

Các bước

Thêm file web.sitemap Cấu hình cấu trúc phân cấp điềuhướ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

Trang 32

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

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.

Trang 33

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ử

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ử

Trang 35

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

Cấu trúc thư mục Theme

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

Trang 36

File CSS của Theme

Trang 37

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

Tên của skin được gán cho thuộc tính SkinID

< asp : Label Runat="server" Text="Quantity:"></ asp : Label >

< asp : TextBox runat="server"

BackColor="#FFFFFF" BorderStyle="Solid"

Font-Names="Verdana" ForeColor="#585880"

Skin mặc định

Trang 38

ASP.NET cung cấp hai loại theme khác nhau

Theme tùy chỉnh/ Theme StyleSheet

ASP.NET cung cấp hai loại theme khác nhau

Trang 39

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

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

Trang 40

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

< system.web >

< pages theme ="ThemeName" />

</ system.web >

Hướng dẫn sử dụng Theme tùy chỉnh

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

< system.web >

< pages theme ="ThemeName" />

</ system.web >

Trang 41

Á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

{

Page.Theme = Session[ "MyTheme"].ToString();

Hướng dẫn sử dụng Theme tùy chỉnh

Á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

{

Page.Theme = Session[ "MyTheme"].ToString();

Định dạng
Số trang	49
Dung lượng	3,08 MB