Công ngh ệ .NET .NET Technology L ng Tr n Hy...

Công nghệ .NET.NET Technology

Lương Tr ần Hy Hi ếnBộ môn Hệ thống Thông tinKhoa Công Nghệ Thông Tin

Trường ĐHSP TP. Hồ Chí Minh

Chương 3 (tt):

Thiết kế giao diện Web

Công nghệ NET 3 HIENLTH

Nội dung chính

� Master Page� Theme & Skin� User Control� Navigation Control� Sitemap� Javascript


Master page

� Master page định nghĩa một khuôn mẫu chung cho phép áp dụng cho nhiều trang trong web site

� Content page là web form có sử dụng master page Master

PageContent

Page


Cách thức master page làm việc

� Master page định nghĩa cấu trúc cơ bản của trango Bao gồm các thành phần chung như header, footer,

menu…

� 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


Minh h ọa Master page


Cú pháp của Master page

� Tạo trang master pageo Phần mở rộng là .master

� Directive: <%@ master %>� Xây dựng các phần nội dung chung cho toàn

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


Cú pháp của Content page

� Đối với những trang .aspxo Tham chiếu đến master page trong directiveo 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 riêng

• Có thể có nhiều vùng content control, tùy theo cách thiết kế master page

• Ánh xạ các content control này vào placeholder trong master page.


Kết hợp Master Page & Content Page

� Trang master định nghĩa nội dung chung và placeholdero <asp:ContentPlaceHolder>

� Content page tham chiếu đến master và đưa nội dung vào các placeholdero <asp:Content>


Master 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 MasterPageo Đị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ấuContentPlaceHolder

Áp dụngAspx Page

Chuyển đổiMasterPage


Cách tạo Master page


Cách tạo Master page (2)

� Mặc định site.master có dạng sau

Để dành nội dung Cho content page



� Ta thiết kế lại site.mastero Thêm table vào, chia làm các phần header, left, main

content và footer header

Content placeholder

footer

left



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


Cách tạo Content page

� Tạo form mới có template là “web content form”.

Chọn Web content form

Tên file aspx


Cách tạo Content page (2)

� Tiếp theo chọn master page cho content web form

Tên file master page



� Phần source của content page: DemoWebForm1.aspx

Ánh xạ đến placeholder control “MainContent”

trong site1.master



� 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, không edit ở đây được



� Ví dụ bổ sung nội dung cho Content page



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


Khai báo sử dụng master page

� Khai báo trong từng file aspxo 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#"

MasterPageFile="~/Site1.Master"

CodeBehind="DemoWebForm1.aspx.cs"

Inherits=“DemoProject.DemoWebForm1" %>

<system.web>

<pages masterPageFile="~/Site1.Master" />

</system.web>

Web.config


Ư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 siteo Đị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 pageo 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

Theme & Skin


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 HTMLo Cả hai cách tiếp cận cho phép sử dụng lại định dạng trong

nhiều nơio Style áp dụng cho client, trong khi theme được xử lý trên servero 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 controlo Có thể sử dụng CSS và theme trong cùng ứng dụng! Chúng bổ

sung cho nhau


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


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


Skin 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


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


Minh họa tạo theme

� Tạo ứng dụng ASP.NETo Tạo web form có layout như sau

• Trên form có 2 text box và Button là dạng ASP.NET control

browser



� Tạo skin cho Web appo Tạo thư mục theme

• Đặt tên theme là DemoTheme



� Tạo skin file cho DemoThemeo 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



� Đị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" />



� Ứng dụng khi chạy, hiển thị trong trình duyệt với skin đã chọn.

� Có thể tạo nhiều theme khác để tùy chọn sử dụng.

WEB USER CONTROL & CUSTOM CONTROL


Web Custom control

� ASP.NET có hai loại custom controlo User control cho phép reuse một phần của trang

web bằng cách đặt vào trong .ascx fileo 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


User 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


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 formo User control bắt đầu với Control directive thay vì Page

directive của Pageo User control sử dụng phần mở rộng ascx thay vì aspxo User control không thể request trực tiếp từ client.


User 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" />


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();

}}


User control

� Sử dụng User controlo Insert vào trong web pageo 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" />


User control

� Minh họa sử dụng User Control

User control


User 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 user control.

� Tuy nhiên user control có tính chất tương tự như controlo Thuộc tínho Phương thứco Sự kiện

� Sử dụng Property , Method, Event để lấy thông tin các thành phần bên trong User Control.


User control

� Tạo thuộc tính & phương thức cho user controlpublic string Content{

get // lấy nội dung (label) của user control{

return Label1.Text;}set // thiết lập nội dung cho user control{

Label1.Text =value;}

}public void SetContent(string str){

// thiết lập nội dung cho labelLabel1.Text = str;

}

Code behind của user control


User 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ộngo Không thể customize lại phần HTML thể hiện với user controlo 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.


User control

� Demo tạo user control có text box yêu cầu phải nhập giá trị số

� Các bước thực hiệno Tạo project DemoUserControlo Tạo User control tên NumberTextBox


User control

� Bước 2: Tạo User control tên NumberTextBoxo 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


User control

� Bước 3: Trong màn hình Design của user controlo Kéo thả TextBox và một Validation control kiểu

CompareValidator• Đặt id của TextBox là txtContent• Đặt id của CompareValidator là cvCheckNumber• Thiết lập thuộc tính cho cvCheckNumber

ErrorMessage: “Nhập giá trị số!”ControlToValidate: txtContentOperator: DataTypeCheckType: Integer


User control


User control

� Bước 4: sử dụng user control trong web pageo Để 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ả


User control

� VS tự động tạo tag Register và tag sử dụng User control NumberTextbox trong default.aspx


User control

� Chạy demo trang default.aspx

User control: NumberTextBox

Bổ sung thêm Labelcho 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 Labelcho 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.


User control

� Yêu cầu bài tậpo Tạo một user control LienHeo Chứa các text box cho phép nhập các thông tin

• Họ tên• Cơ quan• Chức vụ• Điện thoại• Email• …

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!


Custom control

� Custom control được tạo giống như class. � Tạo và sử dụng custom control theo dạng

library classo Tạo ASP.NET Custom controlo 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ườngo Cho phép dùng lại trong nhiều ứng dụng web khác

nhau.


Custom 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


Custom control

public class TitledTextBox : TextBox{

private string title;public string Title{

get { return title; }set { title = value; }

}protected override void Render(HtmlTextWriter writer){

// tạo bổ sung tag HTML với titlewriter.Write("<h1>" + title + "</h1>");// gọi Render của lớp cơ sở, nội dung của textbox sẽ xuất rabase.Render(writer);

}}

public class TitledTextBox : TextBox{

private string title;public string Title{

get { return title; }set { title = value; }

}protected override void Render(HtmlTextWriter writer){

// tạo bổ sung tag HTML với titlewriter.Write("<h1>" + title + "</h1>");// gọi Render của lớp cơ sở, nội dung của textbox sẽ xuất rabase.Render(writer);

}}


Custom 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: ASP.NET Server Control.o Đặt tên cho Custom control là: MyServerControl


Custom control

� Bước 2: thay đổi lớp cơ sở mặc định từ WebControl sang TextBox


Custom control

� Bước 3: o Tạo biến thành viên kiểu chuỗi chứa caption của

textbox.o Tạo property cho chuỗi caption


Custom control

� Bước 4: Override lại phương thức Render của Textbox, bổ sung thêm caption


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


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 pageo Trong sự kiện Load của web page, thiết lập lại

caption của custom control


Custom control

� Import custom control vào ToolBox


Custom control

� Custom control hiển thị trên tool box như một control chuẩn


Custom control

� Kéo thả custom control vào trang web� Thiết lập thuộc tính Caption của custom control


Custom control

� Bài tậpo Tạo một custom control cho phép hiển thị thông tin

bản quyền theo mẫu sau

o Trong đó có 3 thuộc tính cho phép bổ sung từ bên ngoài của custom control

• [từ năm], [đến năm] và [tác giả]

©Copyright [từ năm – đến năm] [tác giả]. All rights reserved®[tác giả] giữ bản quyền nội dung trên website này.©Copyright [từ năm – đến năm] [tác giả]. All rights reserved®[tác giả] giữ bản quyền nội dung trên website này.

Chương 3 (tt):

Site Navigation & Javascript


Site Navigation

� XML SiteMap� SiteMapDataSource� SiteMapPath� Menu� TreeView


Cấu trúc website


XML SiteMap

� Định nghĩa cấu trúc website trong file Web.sitemap

� Cấu trúc của tập tin site map như sau:

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

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

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

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

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

</siteMapNode>

</siteMap>


Sử dụng XML Site Map

� Tạo SiteMapDataSource<asp:SiteMapDataSource ID="SiteSource" runat="server" />


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


Menu Control

� Hiển thị cấu trúc website dưới dạng Menu<asp:Menu ID="MenuMain" runat="server“

DataSourceID="SiteSource“></asp:Menu>

Orientation=“Vertical" StaticDisplayLevels="2" StaticSubMenuIndent="0px"

Orientation="Horizontal" StaticDisplayLevels="2" StaticSubMenuIndent="10px”


TreeView Control

� Hiển thị cấu trúc website dưới dạng TreeView<asp:TreeView ID="TreeViewMain" runat="server" DataSourceID="SiteSource”></asp:TreeView>


TreeView Control

ImageSet=“Arrows" ImageSet=“BulletedList4" ImageSet="WindowsHelp"


Cấu hình tùy chỉnh XML SiteMap

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

JavaScript


Thực thi mã Javascript

� Thông qua thuộc tính OnClientClick của các control<asp:Button ID="Button1" runat="server" onclientclick="alert('Click me here!');" Text="Button" />

� Thêm attribute vào control trong code-behideButton2.Attributes.Add("onclick", "return confirm('Bạn có chắc xóa không?')");


Problem & Solution

� Problemo Làm sao gọi được hàm javascript trong code-behide?

� Solution

o ___________________________

o ___________________________


Inject code block

� Sử dụng ClientScript.RegisterClientScriptBlock

o Khai báo script dưới dạng stringo Sau đó chèn vào page


Truy xuất nội dung server control

� Sử dụng thuộc tính ClientID của server control


Tham khảo

� Slide bài giảng này tham khảo từ:o Slide của thầy Nguyễn Hà Giang, ĐH KTCN TpHCMo Slide Lập trình Web 2, ĐH KHTN TpHCM


THE END

Công ngh ệ .NET .NET Technology L ng Tr n Hy...

Documents

Transcript of Công ngh ệ .NET .NET Technology L ng Tr n Hy...