lẬp trÌnh webfit.mta.edu.vn/files/danhsach/bai5.pdflẬp trÌnh web biên soạn: chu thị...

LẬP TRÌNH WEB

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

TRANG MASTER VÀ CÁC ĐIỀU KHIỂN TRONG ASP.NET

LẬP TRÌNH WEB

� Xây dựng trang Master.� Giới thiệu� Các phần tử trong trang Master� Tạo trang Master và contentLập trình tương tác với trang Master

NỘI DUNG

Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT 04:57 - 2

� Lập trình tương tác với trang Master

� Nhóm điều khiển trong ASP.NET: � Giới thiệu� Các điều khiển Web server � Các điều khiển Validation,� Các điều khiển HTML server.

� Master Page là gì?� Xét kịch bản thiết kếmột ứng dụng web gồm20 trang.Tất cả cáctrang đều giống nhauvề sự kết hợp màu sắc,

MASTER PAGES


về sự kết hợp màu sắc,logos, menu, ...

� Giả sử thiết kế của logothay đổi:

� Điều gì xảy ra?

� Giải pháp gì?

� Master Page là gì?� ASP.NET Master Pages giúpchúng ta tạo một templatehoặc một layout thống nhấtcho nhiều trang trong mộtứng dụng Web.

MASTER PAGES


ứng dụng Web.� Định nghĩa các tính năngchuẩn của một ứng dụng webtrong trang Master

� Các tính năng này có thể đượclặp lại trên tất cả hoặc mộtnhóm các trang bằng cách kếthừa trang Master này.

� Đặc điểm trang Master:� Trang Master có đuôi mởrộng .master và được nhậndạng bằng dẫn xuất@Master. Mỗi trang webđược bao gồm hai phần:

MASTER PAGES


được bao gồm hai phần:� Master Page

� Content Pages

� Các phần tử trong trangMaster: Có 3 loại phần tửtrong một trang Master :

� Content Placeholders

� Non editable regions

MASTER PAGES


� HTML Elements

� Các phần tử trong trangMaster:� Content Placeholders:

� Là vùng có thể thay đổiđược trên trang Master vàta có thể tùy biến được cho

MASTER PAGES


ta có thể tùy biến được chomỗi trang.

� Một trang Master có thể cónhiều hơn một ContentPlaceholders.

� Điều khiểnContentPlaceholders chophép tùy biến nội dung.

� Các phần tử trong trangMaster:� Vùng không thay đổi (Noneditable regions): Là vùngkhông tùy biến được trênmỗi trang, chứa các phần

MASTER PAGES


mỗi trang, chứa các phầntử chung của các trangtrong ứng dụng web.� Các phần tử này có thể là:Logos công ty, menu,copyright,…

� Các phần tử trong trangMaster:� HTML Elements: Trangmaster chứa các phần tửHTML ở mức top như<html>, <head>, <body>,

MASTER PAGES


<html>, <head>, <body>,<form>,... Ngoài ra, cácthẻ HTML còn dùng chothiết kế các phần tử dùngchung.

� Tạo trang Master

MASTER PAGES


� Thêm content cho trang Master:

MASTER PAGES

� Một trang Master phảicó ít nhất mộtContentPlaceHolder,tuy nhiên cũng có thể


có nhiều hơn mộtContentPlaceHolder,bằng cách:

�� CáchCách 11:: SửSử dụngdụngDesignDesign ViewView

� Thêm contentcho trangMaster:� Cách 2: Khaibáo cú pháp

MASTER PAGES


� Tạo file content sử dụng trang Master:

MASTER PAGES

� Cách 1: Dùng cửasổ Add New Item



MASTER PAGES

� Cách 2:

� Right Click lêntrang Master.

� Chọn Add


� Chọn AddContent Page.


� Cách 3: Khai báo cú pháp

MASTER PAGES


� Lập trình tương tác với trang Master:

MASTER PAGES


GiỚI THIỆU NHÓM CÁC ĐIỀU KHIỂN WEB SERVER

� ASP.NET cung cấpnhiều nhóm điều khiểnserver khác nhau:� HTML Server controls

� Web server controls


� Web server controls

� Navigation controls

� Validation controls

� Data controls

� Login controls

� User defined controls

GIỚI THIỆU NHÓM CÁC ĐIỀU KHIỂN WEB SERVER

� HTML Server controls

� Là các lớp bọc các phần tử HTMLchuẩn và có thêm tính năng tương tácphía server.

� Chuyển thẻ HTML sang điều khiểnHTML bằng cách thêm thuộc tính


HTML bằng cách thêm thuộc tínhrunat="server“.

Ví dụ:<label for="txtUsername"> Tên đăng nhập</label>

<input id="txtUsername" type="text" runat="server" />

<label for="txtFullname">Họ tên </label>

<input id="txtHoten" type="text" runat="server"/>


� Web server controls (Webcontrols)

� Là các lớp trùng lặp cácchức năng của các phần tửHTML cơ bản, nhưngchúng có các tập thuộc tính


chúng có các tập thuộc tínhvà phương thức có tínhnhất quán, ý nghĩa giúpngười pháp triển dễ dàngkhai báo và truy cập.


� Web server controls (Web controls)

� Web server controls có tất cả các tínhnăng của các điều khiển HTML server.



� Validation controls

� Kiểm tra tính hợp lệ của dữ liệu trêncác điều khiển input.



� Navigation controls

� Là nhóm điều khiển được thiết kế hiểnthị site map.

� Cho phép điều hướng từ trang nàysang trang khác.



� Login controls

� Cung cấp các điều khiểnphục vụ cho việc xác thựcngười dùng.



� Data controls

� Là nhóm các điều khiển hỗ trợ truy xuấtvà hiển thị dữ liệu.

� User defined controls

� Là nhóm các điều khiển do người dùngđịnh nghĩa, gồm hai loại:


định nghĩa, gồm hai loại:

� User Controls

� Custom controls

ĐIỀU KHIỂN WEB SERVER

� Đặc điểm của các điều khiển web server :� Tự động dò tìm trình duyệt� Sử dụng Template: Một số điều khiển WebServer cho phép người dùng định nghĩa thêmlayout bằng cách sử dụng Template


layout bằng cách sử dụng Template� Hỗ trợ các themes, cho phép định nghĩa nhấtquán giao diện các điều khiển trên toàn bộ site.


� Namespace System.Web.UI.WebControls� System.Web.UI.WebControls chứa các lớpcho phép tạo các điều khiển Web Server

� Các lớp thuộc không gian miền này như Lable,Textbox, Button, ListBox, …


Textbox, Button, ListBox, …� Class WebControl thuộc không gian miềnSystem.Web.UI.WebControls. Nó đóng vaitrò lớp cơ sở cho hầu hết các điều khiển WebServer.


� Lớp WebControl: Bảng sau là các thuộc tính, phươngthức và các sự kiện thông thường được kế thừa cho cácđiều khiển dẫn xuất từ lớp này.

Tên Mô tả

AccessKey Property Chỉ định Key cho phép điều hướng nhanh đến


AccessKey Property Chỉ định Key cho phép điều hướng nhanh đếnđiều khiển.

BackColor Property Chỉ định hoặc truy xuất màu nền của điều khiểnWeb Server

ForeColor Property Chỉ định hoặc truy xuất ForeColor của điềukhiển Web Server

Height Property Chỉ định hoặc try xuất chiều cao của điều khiển.


� Lớp WebControl:Tên Mô tả

CssClass Chỉ định hoặc truy xuất đến tập CSS style gắn vớiđiều khiển.

ID Property Chỉ định hoặc truy xuất nhận dạng duy nhất được


ID Property Chỉ định hoặc truy xuất nhận dạng duy nhất đượcgán cho điều khiển.

Visible Property Chỉ định hoặc truy xuất giá trị Boolean gán cho điềukhiển mà điều khiển có được hiển thị hay không.

Width Property Chỉ định hoặc truy xuất độ rộng của điều khiển.

Focus() method Thiết lập forcus cho điều khiển

Load event Xuất hiện khi điều khiển được load trong bộ nhớ.


� Các lớp Web server controls cơ bản:ASP.NET Tag Tên Class Key

<asp:Label> Label Text, AssociatedControlID

<asp:TextBox> TextBox AutoPostBack, Columns, MaxLength,ReadOnly, Rows, Text, TextMode,


ReadOnly, Rows, Text, TextMode,TextChanged event

<asp:Button> Button Text, PostBackUrl, Click event

<asp:Image> Image AlternateText, ImageAlign, ImageUrl

<asp:ImageButton> ImageButton AlternateText, ImageUrl, PostBackUrl, Click event

<asp:HyperLink> HyperLink ImageUrl, NavigateUrl, Target, Text

<asp:LinkButton> LinkButton Text, PostBackURL , Click event


� Các lớp Web server controls cơ bản:ASP.NET Tag Tên Class Key

<asp:Panel> Panel BackImageUrl, DefaultButton, GroupingText, HorizontalAlign, Scrollbars

<asp:CheckBox> CheckBox AutoPostBack, Checked, Text, TextAlign,


<asp:CheckBox> CheckBox AutoPostBack, Checked, Text, TextAlign, CheckedChanged event

<asp:RadioButton> RadioButton AutoPostBack, Checked, GroupName, Text, TextAlign, CheckedChanged event

<asp:Table> Table BackImageUrl, CellPadding, CellSpacing, GridLines, Rows (collection)

<asp:TableCell> TableCell ColumnSpan, HorizontalAlign, RowSpan, Text, VerticalAlign,

<asp:TableRow> TableRow Cells (collection), Horizontal/VerticalAlign


� Các điều khiển List Control:ASP.NET Tag Tên Class Mô tả

<asp:DropDownList> DropDownList Là danh sách dạng drop down cácđối tượng <asp:ListItem>

<asp:ListBox> ListBox Là tập hợp danh sách các đối


<asp:ListBox> ListBox Là tập hợp danh sách các đốitượng <asp:ListItem>

<asp:CheckBoxList> CheckBoxList Các phần tử của nó được hoàn trảnhư các check boxes.

<asp:RadioButtonList> RadioButtonList Các phần tử của nó được hoàn trảnhư các Radio button.

<asp:BulletedList> BulletedList Cho danh sách các bullet hoặcnumber.


� Các điều khiển List Control: Bảng sau chứa các thuộctính của lớp ListControl

Thuộc tính Mô tả

AutoPostBack Nếu true, form tự động tạo posted back khi người dùngthay đổi lựa chọn hiện tại.


thay đổi lựa chọn hiện tại.

Items Trả về tập hợp các phần tử ListItem

SelectedIndex Chỉ định hoặc truy xuất đến Index của phần tử có giá trịindex nhỏ nhất trong danh sách các phần tử được chọn.

SelectedItem Tả về tham chiếu đến ListItem đầu tiên trong danh sáchlựa chọn.


� Các điều khiển List Control: Bảng sau chứa các thuộctính của lớp ListControl

Thuộc tính Mô tả

DataSource Chỉ định đối tượng chứa thông tn muốn hiển thị như DataSet, DataTable, collection...


DataSet, DataTable, collection...

DataMember Chỉ định bảng muốn sử dụng trong trường hợpDataSource chứa nhiều hơn một bảng.

DataTextField Chỉ định trường muốn hiển thị đối với thuộc tính Textcủa mỗi Item..

DataValueField Chỉ định trường muốn gán cho thuộc tính Value trênmỗi phần tử Item


� Ví dụ khai báo và sử dụng<asp:ListBox runat="server" ID="Listbox1"

SelectionMode="Multiple" Rows="5"><asp:ListItem Selected="true">Option 1</asp:ListItem><asp:ListItem>Option 2</asp:ListItem>

</asp:ListBox>


<asp:DropDownList runat="server" ID="DropdownList1"><asp:ListItem Selected="true">Option 1</asp:ListItem><asp:ListItem>Option 2</asp:ListItem>

</asp:DropDownList>

//Lập trình truy xuất đến phần tử được chọn.foreach (ListItem li in Listbox1.Items){if (li.Selected) Response.Write(li.Text + "<br />");

}

ĐIỀU KHIỂN ĐiỀU HƯỚNG TRANG VÀ NÂNG CAO

� Các điều khiển điều hướng trang:� Menu� TreeView� SiteMapPath.


� SiteMapPath.

� Các điều khiển nâng cao:� ImageMap� FileUpload� View� MultiView

ĐIỀU KHIỂN ĐIỀU HƯỚNG TRANG

� Điều khiển SiteMapData Source:



� Điều khiển Menu: Cho phép tạo menu tronghệ thống website.<asp:Menu ID="Menu2" runat="server">

<Items><asp:MenuItem


Text="Home“Value="Home">

</asp:MenuItem></Items>

</asp:Menu>


� Điều khiển TreeView.<asp:TreeView><Nodes><asp:TreeNode> </asp:TreeNode><asp:TreeNode>


<asp:TreeNode> </asp:TreeNode>

</Nodes></asp:TreeView>

ĐIỀU KHIỂN ĐiỀU HƯỚNG TRANG

� Các điều khiển nâng cao.

ASP.NET Tag Key

<asp:ImageMap> HotSpotMode, HotSpot, ImageURL,

AlternateText, Click Event


AlternateText, Click Event

<asp:CircleHotSpo> AccessKey, PostBackValue, NavigateUrl,

Radius, x, y, GetCoordinates method

<asp:RectangleHotSpot> AccessKey, Coordinates, PostBackValue,

GetCoordinates method, ..

<asp:PolygonHotSpot> AccessKey, Left, Bottom, Right, Top

PostBackValue, GetCoordinates method,


� Các điều khiển nâng cao.

ASP.NET Tag Key

<asp:FileUpload > HasFile, FileName, PostedFile, SaveAs

Method


Method

<asp:multiview> ActiveViewIndex , Views, SetActiveView

Method, ActiveViewChanged Event

<asp:View>


� Ví dụ khai báo và sử dụng<asp:Menu ID="Menu1" runat="server">

<Items><asp:MenuItem NavigateUrl="~/Default.aspx" Text="Trang chủ"

Value="Trangchu"></asp:MenuItem><asp:MenuItem Text="Sản phẩm" Value=“SP">


<asp:MenuItem Text="Ti vi" Value=“TV"></asp:MenuItem><asp:MenuItem Text="Tủ lạnh" Value=“TL"></asp:MenuItem>

</asp:MenuItem></Items>

</asp:Menu>

ĐIỀU KHIỂN VALIDATION

� Giới thiệu:� Xác nhận tính hợp lệ(Validation) là tiến trình xác địnhsự đúng đắn của thực thể đượccung cấp.

� Dữ liệu trước khi được chấp


� Dữ liệu trước khi được chấpnhận từ phía người dùng cầnđược kiểm tra tính hợp lệ:

� Kiểu,� Giá trị,� Định dạng, ...


� Class BaseValidator: Các lớp điều khiển Validation nằmtrong System.Web.UI.WebControls. Lớp BaseValidtor cungcấp như là một lớp cơ sở cho tất cả các điều khiển Validation.

Thuộc tính Mô tảControlToValidate Chỉ định hoặc truy xuất đến ID của điều khiển Web


ControlToValidate Chỉ định hoặc truy xuất đến ID của điều khiển WebServer cần kiểm tra tính hợp lệ.

Display Chỉ định hoặc truy xuất đến cách thức hiển thị chuỗithông báo lỗi trên điều kiển Validation. Có thể nhận cácgiá trị: None, Static, Dynamic

ErrorMessage Chỉ định hoặc truy xuất chuỗi thông báo lỗi trên điềukhiển Validtion khi tính hợp lệ không thỏa mãn.

IsValid Chỉ định hoặc truy xuất giá trị (true, false) chỉ định xemdữ liệu Input có thỏa điều kiện hợp lệ hay không.


� Các điều khiển:Điều khiển Mô tả

RequiredFieldValidator Đảm bảo người dùng nhập dữ liệu trên các điều khiển Input

CompareValidator So sách giá trị của một điều khiển Input với một điều

khiển Input khác hoặc với một giá trị hằng.


RangeValidator kiểm tra giá trị người dùng nhập vào có nằm trong phạm

vi được chỉ định hay không?

RegularExpressionValid

ator

Kiểm tra tính hợp lệ của giá trị trên điều khiển Input theo

một khuôn mẫu của biểu thức.

CustomValidator Kiểm tra tính hợp lệ của giá trị nhập trên điều khiển Input

có hợp lệ theo một logic đã chỉ định hay không?

ValidationSummary Dùng để xem lại các thông báo lỗi xuất hiện trên các điều

khiển Validation khác.


� Các điều khiển:Điều khiển Key

RequiredFieldValidator InitialValue, SetFocusOnError, Text, ErrorMessage,

CompareValidator Operator, ValueToCompare, Text

RangeValidator ErrorMessage, IsValid, MaximumValue , MinimumValue,


RangeValidatorText, Type,...

RegularExpressionValid

ator

ControlToValidate, Display, ErrorMessage , Text , IsValidValidationExpression

CustomValidator ClientValidationFunction, ControlToValidate, ErrorMessage, ValidateEmptyText, ServerValidate Event

ValidationSummary DisplayMode, HeaderText, ShowMessageBox , ShowSummary,...


� Thuộc tính Page.Isvalid:� Thuộc tính Page.IsValid dùng để

truy xuất đến giá trị chỉ định sự

kiểm tra tính hợp lệ của trang?

� Thuộc tính này nhận giá trị True

khi tất cả các điều khiển


khi tất cả các điều khiển

Validation trên trang đều xác

nhận thành công tính hợp lệ.

� Dựa trên giá trị trả về của thuộc

tính Page.IsValid để quyết định

tiếp tục hay không tiến trình Post

Back tới Server.


� Ví dụ sử dụng các điều khiển:

<asp:RequiredFieldValidator ID="valPass" runat="server" ControlToValidate="txtPass" ErrorMessage="Chưa nhập Password">*

</asp:RequiredFieldValidator>


</asp:RequiredFieldValidator>

<asp:RegularExpressionValidator ID="valPassC" runat="server"

ControlToValidate="txtPass" ValidationExpression="[a-zA-Z]\w{3,9}">*

</asp:RegularExpressionValidator>

ĐIỀU KHIỂN HTML SERVER

� Giới thiệu:� HTML Server Controls cung cấp để truy xuấtvào các thuộc tính và tính chất của các thẻHTML.

� HTML Server Controls trong ASP.NET là tập


� HTML Server Controls trong ASP.NET là tậpcác điều khiển tương ứng các thẻ HTML, chúngđược khai báo trên Web page bằng cách thêmthuộc tính runat=“Server”.


� Không gian miền System.Web.UI.HtmlControls:� Gồm các lớp giúp cho việc tạo các điều khiểnHTML Server.

� Bao gồm nhiều lớp HtmlInputButton,HtmlImage, HtmlForm, HtmlTable,...


HtmlImage, HtmlForm, HtmlTable,...� Dựa trên chức năng có thể được phân lớpthành các nhóm như container controls, Inputcontrols và Image controls


� Một số điều khiển HTML:



� Ví dụ sử dụng điều khiển HTML:

� MarkUp code:<input id="txtFirst" type="text" runat="server"/>

� Programming code:HtmlInputText txtTextBox = new HtmlInputText();


HtmlInputText txtTextBox = new HtmlInputText();txtTextBox.ID = "txtFirstName";txtTextBox.Value = "Chu Thị Hường";txtTextBox.MaxLength = 10;txtTextBox.Size = 15;form1.Controls.Add(txtTextBox);

THẢO LUẬN – CÂU HỎI


� Thực hành các ví dụ

� Thực hành sử dụng các điều khiển.

� Xây dựng, thiết kế trang Master cho bàitập lớn được phân công

BÀI TẬP


tập lớn được phân công

lẬp trÌnh webfit.mta.edu.vn/files/danhsach/bai5.pdflẬp trÌnh web biên soạn: chu thị...

Documents