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

KHOA CAO ĐẲNG THỰC HÀNH

THIẾT KẾ & LẬP TRÌNH WEBSITE
(Chuyên ngành: Đồ Họa Đa Truyền Thông)

Chương 5:
CÁC ĐIỀU KHIỂN TRONG ASP.NET

1
© Dương Thành Phết

www.thayphet.net -


NỘI DUNG
1. Tổng quan về các controls
2. HTML Control
3. Web Server Controls
4. Validation Controls
5. Web User controls
6. Master Pages

7. Data Controls

2
© Dương Thành Phết

www.thayphet.net -


1. TỔNG QUAN VỀ CÁC CONTROLS

3
© Dương Thành Phết

www.thayphet.net -


2. HTML CONTROL
 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

4
© Dương Thành Phết

www.thayphet.net -


2. HTML CONTROL
Để 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

5
© Dương Thành Phết

www.thayphet.net -


3. WEB SERVER CONTROL
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

6
© Dương Thành Phết

www.thayphet.net -


3. WEB SERVER CONTROL
Thuộc tính

Ý nghĩa

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

7

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.

Bảng liệt kê các thuộc tính chung của các Web control
© Dương Thành Phết

www.thayphet.net -


3. WEB SERVER CONTROL
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 ="<B>Còn đây là chuỗi được in đậm</B>";

8
© Dương Thành Phết

www.thayphet.net -


3. WEB SERVER CONTROL
3.2 TextBox
Được dùng để nhập và hiển thị dữ liệu văn bản.
Các thuộc tính:
Text: Nội dung chứa trong Textbox
TextMode:
SingleLine: Hiển thị và nhập liệu 1 dòng
MultiLine: Hiển thị và nhập liệu nhiều dòng
Password: Hiển thị dấu * thay cho các ký tự.
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 đủ.
9
© Dương Thành Phết

www.thayphet.net -


3. WEB SERVER CONTROL
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

10
© Dương Thành Phết

www.thayphet.net -


3. WEB SERVER CONTROL
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.
Các thuộc tính:

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

- Ngồ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.

11
© Dương Thành Phết

www.thayphet.net -


3. WEB SERVER CONTROL
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 tốn như sau:

12

Xử lý sự kiện:
protected void btTinhtien_Click(object sender, EventArgs e)
{
int soluong=int.Parse(txtSoluong.Text );
int dongia=int.Parse(txtDongia.Text );
int Thanhtien=soluong * dongia;
txtThanhtien.Text = Thanhtien.ToString();
}
© Dương Thành Phết

www.thayphet.net -


3. WEB SERVER CONTROL
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.

13
© Dương Thành Phết

www.thayphet.net -


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

14
© Dương Thành Phết

www.thayphet.net -


3. WEB SERVER CONTROL
3.6. Listbox và DropdownList
Là điều khiển hiển thị danh sách lựa chọn, có thể
chọn một hoặc nhiều.
Các thuộc tính:
+ AutoPostBack: Có tự động PostBack về Server khi
chỉ số của mục chọn bị thay đổi. Mặc định False
+ Items: Tập chứa các mục chọn của điều khiển. thêm
vào mục chọn qua thuộc tính ListItem Collection Editor.
+ Rows: Chiều cao của ListBox theo số dòng.
+ 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.
15
© Dương Thành Phết

www.thayphet.net -


3. WEB SERVER CONTROL
Tập hợp Items
Add: Thêm mục mới vào cuối danh sách
Items.Add(<String>);
Insert: Thêm mục mới vào danh sách tại một vị trí
Items.Insert(<index>,<String>);
Count: Trả về số mục (Item) có trong danh sách.
Items.Count;
Remove: Xóa đối tượng Item tại ra khỏi danh sách.
Items.Remove(<Chuoi>);
RemoveAt: Xóa item tại vị trí index khỏi danh sách.
Items.RemoveAt(<index>);
Clear: Xóa tất cả Item có trong danh sách.
Items.Clear();
16
© Dương Thành Phết

www.thayphet.net -


3. WEB SERVER CONTROL
Xử lý mục chọn

Thuộc tính Selected của đối tượng Items[i] để kiểm tra
xem mục thứ i đó có được chọn hay khơng.
SelectedIndex: Cho biết chỉ số của mục được chọn.
Trong trường hợp chọn nhiều mục SelectedIndex sẽ trả
về chỉ số mục chọn đầu tiên.
SelectedItem: Cho biết mục được chọn. Trong trường
hợp chọn nhiều mục, SelectedItem sẽ trả về mục chọn
đầu tiên.
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.
17
© Dương Thành Phết

www.thayphet.net -


3. WEB SERVER CONTROL
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.

18
© Dương Thành Phết

www.thayphet.net -


3. WEB SERVER CONTROL

19

Xử lý sự kiện:
protected void Page_Load(. . . ) {
if (!IsPostBack) {
lstDiadanh.Items.Add("Vịnh Hạ Long");
lstDiadanh.Items.Add("Phan Thiết - Mũi Né");
lstDiadanh.Items.Add("Nha Trang");
…….
int n = lstDiadanh.Items.Count;
lbSoDD.Text = n.ToString();
}
}
protected void btChon_Click(. . .) {
lbDiadanh.Text = "";
for (int i = 0; i <= lstDiadanh.Items.Count - 1; i ++) {
if (lstDiadanh.Items[i].Selected)
lbDiadanh.Text += "<li>" + lstDiadanh.Items[i].Value;
}
}
© Dương Thành Phết

www.thayphet.net -


3. WEB SERVER CONTROL
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.
20
© Dương Thành Phết

www.thayphet.net -


3. WEB SERVER CONTROL
Ví dụ: Tạo trang web gồm Nhóm các RadioButton Giới tính,
Thu nhập, Nhóm Checkbox Ngoại ngữ

21
© Dương Thành Phết

www.thayphet.net -


3. WEB SERVER CONTROL
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

22
© Dương Thành Phết

www.thayphet.net -


3. WEB SERVER CONTROL
Các thuộc tính
RepeatColumns: Số cột hiển thị.
RepeatDirection: Hình thức hiển thị
Vertical: Theo chiều dọc
Horizontal: Theo chiều ngang
AutoPostBack: Có được phép tự động PostBack về
Server khi các mục chọn của điều khiển bị thay đổi.
Mặc định là False.

23
© Dương Thành Phết

www.thayphet.net -


3. WEB SERVER CONTROL
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

24
© Dương Thành Phết

www.thayphet.net -


3. WEB SERVER CONTROL
Ví dụ: Tạo trang web khi click nút Đăng ký thì hiện thị các
thơng tin được chọn.

25
© Dương Thành Phết

www.thayphet.net -