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

MỘT SỐ WEB CONTROL CƠ BẢN2.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... - Các mục chọn có thể thêm vào danh sách th

THIẾT KẾ VÀ LẬP TRÌNH WEB

1

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

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

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

4

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

2.2 TextBox

2.3 Button, LinkButton, ImageButton

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

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)

12

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

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

Ví dụ:

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

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

Ví dụ:

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,

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

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)

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

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

Tại sao phải kiểm tra dữ liệu nhập:

- Có rất nhiều lỗi có thể xảy ra trên web form:

• User có thể bỏ qua thông tin quan trọng (bỏ trống)

• User có thể nhập không đúng định dạng

Địa chỉ email, số điện thoại

• User có thể nhập ký tự chữ cái trong trường yêu cầu nhập số

• User có thể submit giá trị ngoài miền cho phép…

• Web app gặp phải một số khó khăn khi kiểm tra các ràng buộc,

do chúng dựa trên các HTML input control cơ bản.

• Không có đặc tính tương đồng với Windows application:

• Kỹ thuật chung của Windows application là xử lý sự kiện, ví dụ KeyPress của TextBox để kiểm tra việc chỉ nhập ký tự số

• Điều này không thể trong Web application, do việc post back server thì chậm

• Thậm chí nếu sử dụng client side JavaScript, user cũng có thể

né trách việc kiểm tra và post giá trị không hợp lệ!

Quá trình kiểm tra các điều khiển nhập liệu:

Các thuộc tính chung:

1 RequiredFieldValidator

• Sử dụng để bắt buộc một control nào đó phải được nhập liệu

• Xác nhận thành công khi nhập liệu không phải chuỗi rỗng

2 CompareValidator

- Dùng để so sánh giá trị của một control với giá trị control khác hoặc một giá trị xác định

- Thông qua thuộc tính Operator, ta có thể thực hiện phép so sánh

như: =, <>, >,<, >=,<= hoặc dùng kiểm tra kiểu dữ liệu

- Thường dùng để kiểm tra ràng buộc miền giá trị, kiểu giá trị, liên

thuộc tính

- Trong trường hợp không nhập dữ liệu thì điều khiển sẽ không thực hiện việc kiểm tra

- Xác nhận thành công khi dữ liệu có giá trị phù hợp với giá trị khác

hoặc giá trị của control khác

Các thuộc tính:

• ControlToCompare: tên control cần kiểm tra giá trị

• Operator: phép so sánh, kiểm tra dữ liệu

=, >, >=, <, <=, <>

DataTypeCheck: kiểm tra kiểu dữ liệu

• Type: quy định kiểu dữ liệu để kiểm tra

String, Integer, Double, Date, Currency

• ValueToCompare: giá trị cần so sánh

3 RangeValidator

• Kiểm tra giá trị của điều khiển nằm khoảng từ min -> max

• Dùng để kiểm tra ràng buộc miền giá trị

• Nếu không nhập dữ liệu thì không thực hiện kiểm tra

• Thuộc tính:

• MinimumValue: giá trị nhỏ nhất

• MaximumValue: giá trị lớn nhất

• Type: xác định kiểu để kiểm tra dữ liệu

• String, integer, double, date, currency

4 RegularExpressionValidator

• Kiểm tra giá trị phải theo mẫu quy định trước: địa chỉ email, số điện thoại, mã vùng, số chứng minh…

• Xác nhận thành công khi dữ liệu phù hợp với định dạng xác định

• Trong trường hợp không nhập liệu thì không kiểm tra

• Thuộc tính ValidationExpress: mẫu kiểm tra

35

5 CustomValidator

• Điều khiển này cho phép bạn tự viết hàm xử lý kiểm tra lỗi

• Sự kiện: ServerValidator: đặt các hàm kiểm tra dữ liệu trong sự kiện này Việc kiểm tra thực hiện ở server

37

Trình xử lý ServerValidate trên server:

protected void KiemTraSo_ServerValidate(object source, ServerValidateEventArgs args)

Xử lý sự kiện click của nút lệnh DangKy:

protected void DangKy_Click(object sender, EventArgs e)

{

if (!IsValid) // nếu chưa xác nhận trả về => không xử lý

return;

}

6 ValidationSummary

• Điều khiển dùng để hiển thị ra bảng lỗi chứa tất cả các lỗi trên trang web

• Nếu điều khiển nào có dữ liệu không hợp lệ, giá trị thuộc tính

ErrorMessage của validation control sẽ được hiển thị

• 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 xuất hiện trong bảng lỗi

• Các thuộc tính:

• HeaderText: dòng tiêu đề thông báo lỗi

• ShowMessageBox: quy định thông báo lỗi có được phép hiển thị như cửa sổ MessageBox hay không, mặc định là false

• ShowSummary: bảng thông báo được hiển thị hay không, mặc định là true