Lập trình ASP.NET_Xây dựng giao diện Website potx

Môn học: Lập trình ASP.NET Xây dựng giao diện Website TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM ------Nội dung Web Server Controls và các thàn

Môn học: Lập trình ASP.NET

Xây dựng giao diện Website

TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN

KHOA CÔNG NGHỆ THÔNG TIN

BỘ MÔN CÔNG NGHỆ PHẦN MỀM

-
 -Nội dung

Web Server Controls và các thành phần thể hiện

giao diện

Sử dụng CSS trong ASP.NET

Skins và Themes

Master Pages

User Controls

2

Thành phần thể hiện giao diện

BackColor Thành phần background color

BorderColor Thành phần boder color

BorderWidth Độ dày của đường boder

BoderStyle Loại đường viền border (dotted, dashed, solid, double, etc)

CssClass Xác định tên của lớp Css được gán cho control

Enabled Enable, hoặc disable control

Font Xác định font chữ cho các control

ForeColor Xác định màu sắc của text hiển thị

Height Độ cao của control

Style Các định dạng thể hiện của control

Visible Xác định control có hiển thị ra giao diện website hay không

Width Độ rộng của control

3

Thành phần thể hiện giao diện

4

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 styles

Thành phần thể hiện giao diện

5

Inside CSS

CSS và ASP.NET

Ngoài cách thay đổi giao diện Website thông qua các

thuộc tính thành phần của các control, ASP.NET còn hỗ

trợ cơ chế Cascading Style Sheet (CSS)

Các Web Server Control có thể định nghĩa CSS thông

qua thuộc tính CssClass

6

Vì sao sử dụng CSS

Ưu điểm:

website

giao diện (CSS)

Khuyết điểm:

tag HTML

7

CSS và ASP.NET

Khi xây dựng các ứng dụng ASP.NET, cần lựa chọn

các xây dựng giao diện thể hiện như thế nào cho

website:

(Forecolor, BackColor,…)

Ví dụ: để xác định thuộc tính Font cho các controls

trong một trang web, thay vì phải khai báo nhiều lần

trên tất cả controls thì ta chỉ cần khai báo một luật duy

nhất trong CSS và áp dụng nó cho tất cả các control

8

Themes và skins

Themes và Skins là một cơ chế mở rộng trong

ASP.NET dùng với mục đích quản lý tập trung các thể

hiện giao diện của website

Giống như CSS, themes là cơ chế giúp tách biệt giữa

phần nội dung và định dạng thể hiện của website

Themes có thể kết hợp sử dụng cùng với CSS

9

Themes và skins

10

Themes và skins

ASP.NET hỗ trợ xây dựng

nhiều themes trong cùng

một website và mỗi theme là

1 thư mục đặt trong thư muc

App_Themes

Trong mỗi thư mục themes

có thể tiếp tục định nghĩa

nhiều file skins, thực

images, file CSS…

11

Skin

Một skin xác định phần thể hiện giao diện của 1

hay nhiều control

Ví dụ:

Ghi chú rằng trong phần định nghĩa skin không đi

kèm với thuộc tính Id

Một skin file có thể chứa nhiều thể hiện giao diện

của nhiều control

12

Skin File

Skin file định dạng hiển thị các asp.net server

control

 Ví dụ: Định nghĩa style áp dụng đối với mọi Label và TextBox trong trang

web

< asp : Label runat ="server"

ForeColor ="Blue" Font-Size ="10pt“ Font-Name ="Verdana" />

< asp : TextBox runat ="server"

BackColor ="#FFFFC0" ForeColor ="Green“ />

Lưu ý: Skin file chỉ chứa các định nghĩa style cho control

Và KHÔNG CÓ thuộc tính ID

13

SkinID

SkinID dùng thiết lập nhiều định dạng khác nhau

 Skin File:

< asp : TextBox runat ="server"

BackColor ="#FF0000" ForeColor ="White" SkinID ="skin1"

/>

 Sử dụng trong WebForm

< asp : TextBox ID ="TextBoxUsername" runat ="server“

SkinID ="skin1" />

14

Một theme là một thư mục riêng chứa trong thư

mục App_Themes của website

Một theme được sử dụng cho một webpage thông

qua chỉ thị Page directive

Hoặc thông qua code-behind file

15

Theme

1 Theme có thể xem là 1 giao diện của trang web

Tất cả theme phải đặt trong thư mụcApp_Themes

Mỗi theme định nghĩa nhiềuskin file, css file, hình

ảnh,

16

Sử dụng Theme

Sử dụng Theme trong 1 Web form

 <% @ Page Theme ="Theme1“

Sử dụng Theme trong mọi Web form

Trong file web.config, bổ sung:

<system.web>

…

<pages theme=“ Theme1 " />

…

</system.web>

17

Lập trình Thay đổi Theme

Gán theme mới cho Page.Theme trong hàm xử lý

sự kiện Page_PreInit

18

protected void Page_PreInit(object sender, EventArgs e)

{

Page.Theme = “Theme2”;

}

Master pages

Cách tạo một master pages tương tự như cách tạo

một Web form

Bao gồm thành phần markup, server controls và

code behind file

Phần mở rộng master

Có thể bao gồm một hay nhiều ContentPlaceHolder

control

19

Content-place-holder

ContentPageHolder định nghĩa một vùng trong

Master page mà sẽ được thay thế bởi nội dung của

Webpage sử dụng Master page này

20

22

Master page và themes

Mục đích chung:

website.

Master Page: cung cấp các thành phần tĩnh, ít biến

động, các layout chung cho toàn bộ website

Themes: liên quan tới các graphical elements,

matting, layout…

23

Master Page

nhất quán cho toàn bộ WebForm trong site

và bổ sung thêm nội dung

Master Page ( master ) Content Page ( aspx )

24

Master Page

Master page sẽ định nghĩa các PlaceHolderControl

Content page sẽ chèn nội dung tương ứng vào các

PlaceHolderControl trong master page

25

Lập trình thay đổi Master Page

Gán MasterPage mới cho Page.MasterPageFile

trong hàm xử lý sự kiệnPage_PreInit

26

protected void Page_PreInit(object sender, EventArgs e)

{

Page.MasterPageFile = "~/AnotherMasterPage.master";

}

Xử lý sự kiện phát sinh từ Master trong Content Page

Đóng gói control phát sinh sự kiện trong MasterPage

Bắt sự kiện xử lý trong ContentPage

27

// MasterPage.aspx.cs\

public RadioButtonList MyRadioList {

get {

return RadioButtonList1;

}

}

// ContentPage.aspx.cs

protected void Page_Load (object sender, EventArgs e) {

Master.MyRadioList.SelectedIndexChanged +=

new System.EventHandler(ContentList_Changed);

}

protected void ContentList_Changed (object sender, EventArgs e) {

RadioButtonList myRadioList = (RadioButtonList)sender;

Response.Write(myRadioList.SelectedValue);

}

Sử dụng CSS với ASP.NET Server Control

Cách 1: Thay đổi Properties của các asp.net server

control lúc thiết kế (inline css)

28

<span id="LabelMsg"

style="display:inline-block;

color:Red;

background-color:#FFFF80;

border-color:Lime;

border-style:Dashed;

font-weight:bold;

font-style:italic;

text-decoration:underline;">

Hello World

Cách 2: Thay đổi nội dung thuộc tính Style

ứng

 Ví dụ: Code behind:

LabelMsg.Style[ “font-style" ] = " italic “ ;

LabelMsg.Style[ “text-decoration" ] = “ underline “ ;

LabelMsg.Style[ “color" ] = “ Red “ ;

<span id="LabelMsg"

style="font-style:italic;

text-decoration:underline;

color:Red;“>

Hello World

</span>

29

Sử dụng CSS với ASP.NET Server Control

tượng control ( embeded, external css )

 Ví dụ:.myStyle {

font-style: bold ; text-decoration: line-through ;

color: green ; }

 Code behind:

LabelMsg.Style.Clear( );

LabelMsg.CssClass = “myStyle”;

30

Sử dụng CSS với ASP.NET Server Control

Nội dung

Master Page

Sử dụng CSS với ASP.NET Server Control

Skin và Theme

31

Site Navigation

XML Site Map

SiteMapDataSource

SiteMapPath Control

Menu Control

TreeView Control

32

Cấu trúc website

33

XML Site Map

Định nghĩa cấu trúc website trong file

Web.sitemap

34

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

<siteMap

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

<siteMapNode url=“Home.aspx" title="Home " description="HomePage">

<siteMapNode url=“Product.aspx" title=“Product" >

<siteMapNode url=“Manufactory.aspx" title=“Manufactory" />

<siteMapNode url=“Category.aspx" title=“Category“ >

…

</siteMapNode>

</siteMapNode>

<siteMapNode url=“Search.aspx" title=“Search" />

Sử dụng XML Site Map

Tạo SiteMapDataSource

35

<asp:SiteMapDataSource ID=" SiteSource " runat="server" />

Web.Sitemap

Cấu hình SiteMap File

Cấu hình thay đổi file sitemap trongWeb.Config

36

<configuration>

<system.web>

<siteMap defaultProvider=“ XmlSiteMapProvider "

enabled="true">

<providers>

<add name=“ SpecialSiteMapProvider "

type=" System.Web.XmlSiteMapProvider "

siteMapFile="~/Special.Sitemap"/>

<add name=“ XmlSiteMapProvider "

type="System.Web.XmlSiteMapProvider"

siteMapFile="~/web.Sitemap"/>

</providers>

</siteMap>

</system.web>

</configuration>

SiteMapPath Control

Hiển thị đường dẫn truy cập từ root node (trang

chủ) đến node hiện tại (breadcrumb)

Mỗi node phân cách nhau bởi PathSeperator

37

Menu Control

Hiển thị cấu trúc website dưới dạng Menu

38

<asp:Menu ID="MenuMain" runat="server“

DataSourceID="SiteSource“ >

StaticDisplayLevels="2"

StaticSubMenuIndent="0px

"

Orientation="Horizontal"

StaticDisplayLevels="2"

StaticSubMenuIndent="10p x

TreeView Control

Hiển thị cấu trúc website dưới dạng TreeView

39

<asp:TreeView ID="TreeViewMain" runat="server"

DataSourceID="SiteSource” >

</asp:TreeView>

ImageSet=“ Arrows " ImageSet=“ BulletedList6 " ImageSet=" WindowsHelp "