Bài giảng Thiết kế và lập trình Website: Chương 5 - ThS. Dương Thành Phết

Chương 5 của bài giảng Thiết kế và lập trình Website giúp người học có những hiểu biết về các điều khiển trong ASP.Net. Chương này trình bày những nội dung cụ thể như: Tổng quan về các controls, HTML Control, Web Server Controls, Validation Controls, Web User controls, Master Pages, Data Controls. Mời các bạn tham khảo.

Trang 1

1

Chương 5:

CÁC ĐIỀU KHIỂN TRONG ASP.NET

THIẾT KẾ & LẬP TRÌNH WEBSITE

(Chuyên ngành: Đồ Họa Đa Truyền Thông)

Trang 3

3

Trang 4

 HTML Control được tạo ra từ các tag HTML tĩnh thường được sử dụng lập trình ở phía client

Khi sử dụng HTML Control để lập trình phía Server ta gán thuộc tính runat="Server" cho HTML Control đó được gọi là HTML Server Control

HTML Control trên Toolbox

Trang 5

5

Để chuyển các HTML Control thành các HTML Server Control, ta chọn Run As Server Control từ menu ngữ cảnh hoặc gán thuộc tính runat=“Server” cho HTML Control

Trang 6

Những lý do nên sử dụng Standard Web Control:

Đơn giản, tương tự như Windows Form Controls

Đồng nhất: Có các thuộc tính giống nhau  dễ tìm hiểu và sử dụng

Hiệu quả: Tự động phát sinh ra các tag HTML theo từng loại Browser

Trang 7

7 Bảng liệt kê các thuộc tính chung của các Web control

(ID) Tên của điều khiển Tên của điều khiển là duy nhất

AccessKey Ký tự để di chuyển nhanh đến điều khiển - phím nóng

Attributes Tập hợp các thuộc tính của điều khiển HTML

BackColor Màu nền của điều khiển

BorderColor Màu đường viền của điều khiển

BorderStyle Kiểu đường viền của điều khiển

BorderWidth Độ rộng của đường viền

CssClass Hình thức hiển thị của điều khiển qua tên CSS

Enabled Điều khiển có được hiển thị hay không Mặc định là True

Font Font hiển thị cho điều khiển

ForeColor Màu chữ hiển thị trên điều khiển

Height Chiều cao của điều khiển

ToolTip Dòng chữ sẽ hiển thị khi rê chuột vào điều khiển

Width Độ rộng của điều khiển

www.thayphet.net - phetcm@gmail.com

Trang 8

3.1 Label

Được sử dụng để hiển thị và trình bày nội dung văn bản, chấp nhận hiển thị nội dung với các tag HTML

Ví dụ:

lblA.Text = "Đây là chuỗi văn bản thường";

lblB.Text ="Còn đây là chuỗi được in đậm";

Trang 9

Rows: Số dòng hiển thị nếu textbox có nhiều dòng

Maxlength: Số ký tự tối đa được nhập

Wrap: Văn bản có được phép tự động xuống dòng khi độ rộng của textbox không đủ

Trang 10

3.3 Image

Được dùng để hiển thị hình ảnh lên trang Web

Các thuộc tính:

ImageURL: Đường dẫn tập tin hình ảnh

AlternateText: Chuỗi văn bản sẽ hiển thị chú thích ImageAlign: Vị trí hiển thị giữa hình và nội dung

NotSet,Left, Middle,TextTop,Right

Trang 11

11

3.4 Button, ImageButton, LinkButton

Mặc định là các nút Submit Button, khi được nhấn vào sẽ PostBack về Server

- Text: Chuỗi văn bản hiển thị trên điều khiển

- CommandName: Tên lệnh được sử dụng trong sự kiện Command

- Ngoài những thuộc tính trên, điều khiển ImageButton còn

có các thuộc tính ImageURL, ImageAlign và AlternateText như điều khiển Image

Trang 12

Ví dụ: Tạo trang web với các điều khiển: Label, Textbox, Button thực hiện chức năng tính toán như sau:

Trang 13

13

3.5 HyperLink

Được sử dụng để tạo ra các liên kết siêu văn bản

Các thuộc tính:

ImageURL: Tập tin ảnh hiển thị trên điều khiển

Text: Nhãn văn bản hiển thị trên điều khiển NavigateUrl: Đường dẫn cần liên kết đến

Target: Xác định cửa sổ sẽ hiển thị cho mối liên kết _blank: Hiển thị trang liên kết ở cửa sổ mới

_self: Hiển thị trang liên kết tại cửa sổ chứa liên kết _parent: Hiển thị trang liên kết ở frame cha

Trang 14

Ví dụ: Tạo trang web gồm 3 điều khiển Hyperlink

Trang 15

+ SelectionMode: Cách chọn các mục trong ListBox

Single: Chỉ chọn một mục có trong danh sách

Multiple: Cho phép chọn nhiều mục

Trang 17

SelectedValue: Cho biết giá trị của mục được chọn Trong trường hợp chọn nhiều mục, SelectedValue sẽ trả

về giá trị mục chọn đầu tiên

Trang 18

Ví dụ: Tạo trang Web gồm 1 listbox, 2 label , 1 Button khi click nút chọn sẽ hiện tên các địa danh được chọn

Trang 20

3.7 Checkbox, RadioButton

Các thuộc tính

Checked: Trạng thái của mục chọn (chọn hay không)

TextAlign: Vị trí của điều khiển so với chuỗi văn bản

AutoPostBack: Có được tự động PostBack về Server khi các mục chọn bị thay đổi, mặc định là False

GroupName (RadioButton): Tên nhóm, thuộc tính này được sử dụng để nhóm các điều khiển RadioButton lại thành 1 nhóm

Trang 21

21

Thu nhập, Nhóm Checkbox Ngoại ngữ

Trang 22

3.8 CheckBoxList, RadioButtonList

 Dùng để tạo ra một nhóm các CheckBox/Radio Button, Là điều khiển danh sách nên có thuộc tính Items chứa tập hợp các mục chọn như ListBox/DropDownList

 Các thao tác trên tập hợp Items, xử lý mục chọn cũng tương tự như ListBox/DropDownList

Tạo mới:

Kéo thả RadioButtonList (Hoặc CheckbocList) vào Form

 Chọn Edit Items

Trang 24

Ví dụ: Tạo trang web gồm Nhóm RadioButton Thu nhập

Xử lý sự kiện:

Private Sub rblThu_nhap_SelectedIndexChanged(…)…

lblThu_nhap.Text = "Bạn chọn thu nhập: " +

rblThu_nhap.SelectedItem.Text; End Sub

Trang 25

25

thông tin được chọn

Trang 26

3.9 Điều khiển Literal

Tương tự như điều khiển Label, Literal được sử dụng để hiển thị chuỗi văn bản trên trang Web

Điểm khác biệt là khi thi hành, Literal không tạo thêm tag Html, còn Label sẽ tạo ra tag span (được sử dụng để lập trình ở phía client)

Trang 27

Label1.Text="Đây là chuỗi ký tự trong label";

Literal1.Text = " Đây là chuỗi ký tự trong Literial";

}

Khi thiết kế

Xem source:

Đây là chuỗi ký tự trong label

Đây là chuỗi ký tự trong Literial

Trang 28

3.10 Điều khiển AdRotator

Được dùng để tạo ra các ảnh quảng cáo (tại 1 vùng

sẽ có nhiều ảnh, xuất hiện theo tuần xuất), nó tự động thay đổi các hình ảnh mỗi khi có yêu cầu (PostBack về server)

Trang 29

29

Thuộc tính

AdvertisementFile: Tên tập tin dữ liệu (dưới dạng xml) cho

điều khiển Cú pháp của tập tin Advertisement (*.xml)

<Ad>

<ImageUrl> Đường dẫn tập tin hình ảnh </ImageUrl>

<NavigateUrl> Đường dẫn liên kết </NavigateUrl>

<AlternateText> Chuỗi văn bản Tooltip </AlternateText>

</Ad>

</Advertisements>

Lưu ý: Các giá trị có phân biệt chữ Hoa chữ thường

Trang 30

Sự kiện

AdCreated: Xảy ra khi điều khiển tạo ra các quảng cáo

Trang 31

31

Bước 1 Thiết kế giao diện

Bước 2 Tạo tập tin dữ liệu: Quangcao.xml

Sử dụng chức năng Add New Item… từ thực đơn ngữ cảnh

Chọn XML File trong hộp thoại Add New Item

Trang 32

Nhập vào nội dung cho tập tin Quangcao.xml

</Ad>

</Advertisements>

Trang 34

Bước 3 Thiết lập thuộc tính cho điều khiển adQuangcao

AdvertisementFile: Quangcao.xml Target: _blank

KeywordFilter: Không thiết lập (Hiển thị tất cả ảnh)

Bước 4 Thi hành ứng dụng

Trang 35

35

3.11 Điều khiển Calendar

Dùng để hiển thị và cập nhật dữ liệu kiểu ngày

Trang 36

Thuộc tính

DayHeaderStyle: Tiêu đề của các ngày trong tuần

DayStyle: Các ngày trong điều khiển

NextPrevStyle: Tháng trước/sau của tháng đang chọn

SeleltedDayStyle: Ngày đang được chọn

TitleStyle: Tiêu đề của tháng được chọn

TodayDayStyle: Ngày hiện hành (trên server)

WeekendDayStyle: Các ngày cuối tuần (thứ 7, chủ nhật)

OtherMonthDayStyle: Các ngày không nằm trong tháng hiện tại -

SelectedDate: Giá trị ngày được chọn trên điều khiển

Trang 37

37

Sự kiện

SelectionChanged: Sự kiện này xảy ra khi chọn một ngày

VisibleMonthChanged: Xự kiện xảy ra khi chọn một tháng

Trang 38

Ví dụ: Tạo Calendard trên trang web

Bước 1: Tạo Calendard vào trang

Bước 2: Chọn mẫu định dạng: Click phải /Auto Format

Trang 39

39

Xử lý sự kiện:

protected void Page_Load(object sender, EventArgs e){

lbNgay.Text = "Hôm nay ngày " +

DateTime.Today.ToString ("dd/MM/yyyy"); }

protected void Calendar1_SelectionChanged1( ) {

lbThongbao.Text ="Bạn đang chọn " +

Calendar1.SelectedDate.ToString("dd/MM/yyyy"); }

Trang 40

3.12 Điều khiển File Upload

Sử dụng Upload file từ chính ứng dụng Web File sau khi Upload có thể lưu trữ ở 1 nơi nào đó trên webserver

Enable Vô hiệu hoá điều khiển FileUpload

FileBytes Lấy nội dung file đã được upload như một mảng Byte FileContent Lấy nội dung của file đã được upload theo dòng dữ liệu FileName Lấy tên file được Upload

HasFile Trả về giá trị true khi File được Upload

Trang 41

41

Các phương thức:

Focus: Chuyển con trỏ đến điều khiển FileUpload

SaveAs: Cho phép lưu file được upload lên hệ thống

Trang 42

Ví dụ: Tạo điều khiển File Upload

Thiết kế và tạo FileUpload vào trang

Trang 43

43

3.13 Điều khiển Panel và PlaceHolder

 Sử dùng để chứa các điều khiển khác

 Thuộc tính Visible= True thì các điều khiển chứa bên trong sẽ được hiển thị và ngược lại

Tuy nhiên, điều khiển Panel cho phép chúng ta kéo những điều khiển vào bên trong nó lúc thiết kế, còn điều khiển PlaceHolder thì không

Trang 46

protected void Page_Load(object sender, EventArgs e) {

for (int i = 1; i < 100; i++) {

Trang 47

47

Cho phép ẩn hoặc hiện các phần khác nhau của trang Web, tiện ích khi tạo một TabPage để chia 1 trang web có độ dài lớn thành các phần để hiển thị

Điều khiển MultiView chứa đựng 1 hoặc nhiều điều khiển View

Trang 49

Tạo 1 Multiview1 gồm 3 View (View1 View2, View3)

Tạo Control Menu1 gồm 3 Tab (Tab1, Tab2, Tab3)

Tạo Control Menu vào Form

Trang 50

Chọn Edit Menu Item

Lần lượt khái báo các nhãn (Text) là: Tab 1, Tab 2, Tab 3

và các giá trị (Value) tương ứng là: 0 , 1, 2 Thuộc tính Orientation: Horizaltal (Menu hướng ngang)

Trang 52

void Menu1_MenuItemClick(object sender, MenuEventArgs e){

int index = int.Parse(e.Item.Value);

</script>

Trang 53

53

4.1 Giới thiệu chung

4.2 Điều khiển Required Field Validator

4.3 Điều khiển Compare Validator

4.4 Điều khiển Range Validator

4.5 Điều khiển Regular Expression Validator

4.6 Điều khiển Custom Validator

4.7 Điều khiển Validation Summary

Trang 55

55

Mỗi khi PostBack về Server, trang Web luôn kiểm tra tính hợp lệ dữ liệu (nếu có yêu cầu khi thiết kế) Nếu dữ liệu không hợp lệ (bỏ trống, vi phạm miền giá trị, mật khẩu nhập lại không đúng, …), trang web sẽ không thể PostBack về Server

Trang 56

Trang Dangky.htm với ngôn ngữ HTML & Javascript  Khó khăn trong thiết kế và lập trình (trên 100 dòng code)

Trang 58

Công dụng:

Dùng để kiểm tra giá trị trong điều khiển phải được nhập Để kiểm tra ràng buộc khác rỗng (Not null)

Thuộc tính:

Trang 60

Thuộc tính:

 ControlToCompare: Tên điều khiển cần so sánh

 ValueToCompare: Giá trị để so sánh

 Operator: Qui định phép so sánh (=, >, >=, <, <=, <>), kiểm tra kiểu dữ liệu ( DataTypeCheck)

 Type: Qui định kiểu dữ liệu để kiểm tra hoặc so sánh(String, Integer, Double, Date, Currency)

Trang 64

Thuộc tính:

ValidationExpression: Qui định mẫu kiểm tra dữ liệu

Trang 67

Nếu giá trị của thuộc tính ErrorMessage không được xác định, thông báo lỗi đó sẽ không được xuất hiện trong bảng lỗi

Trang 68

Thuộc tính:

- HeaderText: Dòng tiêu đề của thông báo lỗi

- ShowMessageBox: Qui định bảng thông báo lỗi có được phép hiển thị như cửa sổ MessageBox hay không

- ShowSummary: Qui định bảng thông báo lỗi có được phép hiển thị hay không

Trang 69

69

khiển ValidateControl để kiểm tra dữ liệu nhập trên các điều khiển có trong hồ sơ đăng ký khách hàng

Trang 72

Private Sub butDang_ky_Click(…)…

lblThong_bao.Text = "Đăng ký thành công";

End Sub

Trang 74

Nếu tất cả đều hợp lệ

Trang 75

75

5.1 Giới thiệu

Khi kết hợp các control để tạo thành một control mới gọi

là Web user control (UC)

 Sử dụng UC cũng giống như sử dụng thủ tục, hàm  khả năng tái sử dụng UC trên các trang web

 Phần mở rộng của UC là: ascx

Trang 76

5.2 Tạo và sử dụng User control

Tạo mới User control:

 Tạo mới 1 Web user control

 Thiết kế giống như thiết kế 1 trang aspx

Chọn: Web User Control

Đặt tên: *.ascx

Trang 78

 Master page là tập tin có phần mở rộng master

 Thao tác thiết kế: Giống như trang aspx, nhưng phải

bổ sung ít nhất một điều khiển ContentPlaceHolder

Trang 80

6.2 Tạo trang Master

 Bước 1: Tạo mới Item  chọn icon Master Page và đặt tên trang: *.master

Trang 81

81

 Bước 2: Thiết kế bố cục chung (có thể sử dụng User control) và bổ sung ContentplaceHolder vào trang master

Trang 82

6.3 Sử dụng trang Master

 Bước 1: Tạo mới trang web (.aspx) khai báo sử dụng trang master

Trang 84

7.1 Điều khiển kết nối cơ sở dữ liệu 7.2 Điều khiển liên kết cơ sở dữ liệu

Trang 85

85

 Là các điều khiển dùng để chứa nguồn dữ liệu được

rút trích từ các hệ QT CSDL như: Access, SQLServer,

XML, Ocracle

 Có các điều khiển Data-Source sau: SQLDataSource,

Access Data Source, XML Data Source,

Trang 86

 Dùng để kết nối CSDL trong các hệ quản trị CSDL SQLServer, Ocracle Server,

 Chọn đối tượng CSDL như Table, View, Procedure hay câu lệnh SQL và khai báo điều kiện lọc (Where) với nhiều cách như: Giá trị định sẳn, đối tượng Session, Request.Form, Request.QueryString

Tạo kết nối

Kéo điều khiển SQLDataSource từ Tollbox vào trang

Chọn Conigure Data Source 

Trang 88

 Chọn QTCSDL (Microsoft SQLServer)

 Chọn Continue để tiếp tục

Trang 89

Chọn tên CSDL

Kiểm tra kết nối

Đồng ý kết nối

Trang 90

Đặt tên cho kết nối

Tên kết nối

Trang 91

91

Xác định nguồn dữ liệu từ Table, View hay câu lệnh

SQL có thể chỉ định điều kiện lọc dữ liệu, sắp xếp hay các chỉ định vcho xử lý thêm, xoá, sửa

Xác định nguồn dữ liệu

Từ câu lệnh SQL hay

Từ Table, View Xác định điều kiện

Chỉ định sắp xếp

Các lệnh thê, xoá, sửa

Trang 92

 Chọn Test Query để kiểm tra kết quả nguồn dữ liệu

 Chọn Finish để hòan thành

Trang 93

93

Điều khiển SQL DataSource và tham số Request.QueryString

Để lọc dữ liệu theo điều kiện thì giá trị tham số có thể được gán trực tiếp thông qua đối tượng Request.Querystring (Truyền tham số qua liên kết)

Khi click vào liên kết trang có địa chỉ kèm theo tham số dạng:

http://localhost:49222/ /SachNXB.aspx?MaNXB=3

Tiêu đề	Các Điều Khiển Trong Asp.net
Tác giả	Dương Thành Phết
Trường học	Khoa Cao Đẳng Thực Hành
Chuyên ngành	Thiết kế & Lập trình Website
Thể loại	bài giảng

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