CHỦ ĐỀ 4 : CÁC ĐIỀU KHIỂN WEB FORM CƠ BẢN

TRƯỜNG ĐẠI HỌC NHA TRANG

THIEÁT KEÁ VAØ LAÄP TRÌNH WEB

Chủ đề 4. CÁC ĐIỀU KHIỂN WEBFORM CƠ BẢN

1


1. GIỚI THIỆU

-

Web control cung cấp nhiều tính năng hơn so với HTML và ASP.

-

Hỗ trợ nhiều sự kiện và gần giống với Windows control.

-

Một số thành phần UI không có trong HTML control như GirdView, Calendar và Validation.

-

Web control thông minh tự động phát sinh ra các thẻ HTML tương ứng với trình duyệt.

2


Ví dụ:

3


4


5


2. MỘT SỐ WEB CONTROL CƠ BẢN

2.1 Label

-

Dùng để hiển thị và trình bày nội dung trên trang Web

-

Nội dung hiển thị xác định qua thuộc tính Text

6


2.2 TextBox

7

2.3 Button, LinkButton, ImageButton

8


2.4 Hyperlink

9


2.5 Image

- Hiển thị hình ảnh lên Web
- Thuộc tính:

• ImageUrl: Đường dẫn đến tập tin cần hiện thị
• AlternateText: Chuỗi hiển thị khi ảnh không tồn tại
• ImageAlign: Canh lề giữa nội dung và hình ảnh

10


2.6 ListBox và DropDownList

- Hiển thị danh sách lựa chọn mà người dùng có thể chọn một hoặc nhiều (ListBox).
- Các mục chọn có thể thêm vào danh sách thông qua lệnh hoặc cửa sổ thuộc tính.
- Các thuộc tính:
 AutoPostBack: khi mục chọn thay đổi có cho phép post back hay không?
 Items: danh sách các mục chọn.
 Rows: quy định số Item hiển thị

 SelectionMode: cách thức lựa chọn (Single, Multiple)

11


12


13


Các thuộc tính:

- SelectedIndex: Chỉ số item được chọn
- SelectedItem: Cho biết item được chọn
- SelectedValue: Giá trị item được chọn
- Trường hợp có nhiều item được chọn thì các giá trị trên trả về thông tin liên quan đến item đầu tiên được chọn.

14


Tập họp Items: Chứa danh sách các item:
- Add: thêm mục tin mới vào cuối danh sach: Items.Add(…)
- Insert: thêm mục tin vào vị trí xác định: Items.Insert(…)
- Count: trả về số mục item có trong danh sách: Items.Count
- Contains: kiểm tra xem 1 item có trong danh sách hay không: Items.Contains(…)
- Remove: Xoá đối tượng item ra khỏi danh sách
- RemoveAt: xoá item tại vị trí index ra khỏi danh sách
- Clear: xoá tất cả item trong danh sách

15


Ví dụ:

16


Code xử lý nút lệnh Thêm (Minh hoạ VB.NET):
Protected Sub btnAdd_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnAdd.Click
Dim Name As String
'Lấy nội dung user nhập trong textbox
Name = txtName.Text
Dim newItem As ListItem
'Tạo listitem có thông tin là họ tên mới này
newItem = New ListItem(Name)
' Kiểm tra nếu item không có trong listbox thì add
' Items.Contains() trả về true nếu tồn tại,
If (lblDanhSach.Items.Contains(newItem)) <> True Then
lblDanhSach.Items.Add(newItem) 'chưa có thêm vào
End If
End Sub

17


2.7 CheckBox & RadioButton

- Thuộc tính:

• Checked: Cho biết trạng thái được chọn
• TextAlign: Quy định vị trí hiển thị văn bản với điều khiển.
• AutoPostPack: Quy định có post back khi mục chọn thay đổi, mặc định là không.
• GroupName: (RadioButton), nhóm các điều khiển radiobutton lại thành một nhóm.

18


Ví dụ:

19


Ví dụ tổng hợp, Xây dựng trang Web:

Ngành học có các giá trị: Công nghệ thông tin, Công nghệ chế biến, Công nghệ thực phẩm, Kế toán – Tài chính, .
20


Nhập dữ liệu và click vào nút lệnh Xác nhận sẽ cho kết quả:

21


Code của nút lệnh Xác nhận (Minh hoạ VB.NET):

Protected Sub btnXacNhan_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles
btnXacNhan.Click
Dim GT As String
Dim ST As String = ""

If (rNam.Checked) Then
GT = "Nam"
Else
GT = "Nữ"
End If
If (cDuLich.Checked) Then
ST = ST + "- Du lịch"
End If
22


If (cAmNhac.Checked) Then
ST = ST + "- Âm nhạc"
End If
If (cTheThao.Checked) Then
ST = ST + "- Thể thao"
End If
If (cKhac.Checked) Then
ST = ST + "- Lĩnh vực khác"
End If
lblXacNhan.Text = "Mã sinh viên: " + txtMaSV.Text + "
Họ tên: " + txtHoTen.Text + "
Ngày sinh: " + txtNgaySinh.Text + "
Giới tính:
" + GT + "
Ngành học: " + dropNganh.SelectedItem.Text + "
Sở thích: " + ST
End Sub

23


4.3. CÁC ĐIỀU KHIỂN KIỂM TRA DỮ LIỆU NHẬP
NỘI DUNG:

 RequiredFieldValidator
 CompareValidator
 RangeValidator
 RegularExpressionValidator
 CustomValidator
 ValidationSummary

Mục tiêu: Biết cách vận dụng các đối
tượng điều khiển kiểm tra dữ liệu
nhập để ràng buộc dữ liệu trên các
webform.

24


Ví dụ, Trang Web cho phép khách hàng đăng ký thông tin:

25