bài 2 hướng dẫn làm việc với các điều khiển

Bài 2:
Hướng dẫn làm việc với các điều khiển
ASP.NET và các khái niệm cơ bản
Phát triển ứng dụng ASP.NET
Kiểm thử và gỡ lỗi ứng dụng
Hệ thống bài cũ
Hướng dẫn làm việc với các điều khiển
2
Mục tiêu bài học
1. Điều khiển
Hướng dẫn làm việc với các điều khiển
3
2. Làm việc với điều khiển Web Server
Hướng dẫn làm việc với các điều khiển
4
Điều khiển
Một thành phần quan trọng
để tạo ra các Web Form là
điều khiển
Điều khiển sử dụng để:
Xây dựng giao diện đồ họa
cho ứng dụng
Hiển thị dữ liệu cho người
dùng
Cho phép người dùng tương
tác với Web Form: nhập liệu,
chuyển trang…
Hướng dẫn làm việc với các điều khiển
5
Một thành phần quan trọng
để tạo ra các Web Form là

điều khiển
Điều khiển sử dụng để:
Xây dựng giao diện đồ họa
cho ứng dụng
Hiển thị dữ liệu cho người
dùng
Cho phép người dùng tương
tác với Web Form: nhập liệu,
chuyển trang…
ASP.NET cung cấp hai loại điều
khiển sau
Điều khiển Web Server
Điều khiển HTML
Các loại điều khiển trong ASP.NET
Các điều khiển
Web server
Các điều khiển
HTML
ASP.NET cung cấp hai loại điều
khiển sau
Điều khiển Web Server
Điều khiển HTML
Hướng dẫn làm việc với các điều khiển
6
Các điều khiển
HTML
Máy client
HTML Request
HTML Response
Trình duyệt Web xử lý HTML Response

và hiển thị giao diện trang web
Server Web
Server CSDL
Điều khiển Web Server
Được thực thi như mã kịch bản phía server
ASP.NET cung cấp các lớp để làm việc với các điều khiển.
Các lớp này nằm trong namespace:
System.Web.UI.WebControls
Ngoài các điều khiển nhập liệu quen thuộc như textbox,
label, button…
còn có các điều khiển sử dụng cho mục đích đặc biệt như:
calender, Menu, Treeview….
Điều khiển Web Server
Điều khiển Web Server
Được thực thi như mã kịch bản phía server
ASP.NET cung cấp các lớp để làm việc với các điều khiển.
Các lớp này nằm trong namespace:
System.Web.UI.WebControls
Ngoài các điều khiển nhập liệu quen thuộc như textbox,
label, button…
còn có các điều khiển sử dụng cho mục đích đặc biệt như:
calender, Menu, Treeview….
Hướng dẫn làm việc với các điều khiển
7
Cú pháp
<asp:control_name id="some_id" runat="server" />
Các tính năng cung cấp bởi điều khiển Web Server:
Phát hiện trình duyệt
Sử dụng Template (học trong bài 5)
Sử dụng theme (học trong bài 5)

Điều khiển Web Server
Cú pháp
<asp:control_name id="some_id" runat="server" />
Các tính năng cung cấp bởi điều khiển Web Server:
Phát hiện trình duyệt
Sử dụng Template (học trong bài 5)
Sử dụng theme (học trong bài 5)
Hướng dẫn làm việc với các điều khiển
8
Điều khiển HTML
Không được thực thi trên Server.
Để nhận diện như một điều khiển trên server, phải thiết
lập giá trị “server”: cho thuộc tính runat của điều khiển
Cú pháp giống như các phần tử HTML chuẩn
Ví dụ textbox <input id =“txtProductName type =“text”/>
Không cung cấp nhiều tính năng như điều khiển Web
Server
Điều khiển HTML
Điều khiển HTML
Không được thực thi trên Server.
Để nhận diện như một điều khiển trên server, phải thiết
lập giá trị “server”: cho thuộc tính runat của điều khiển
Cú pháp giống như các phần tử HTML chuẩn
Ví dụ textbox <input id =“txtProductName type =“text”/>
Không cung cấp nhiều tính năng như điều khiển Web
Server
Hướng dẫn làm việc với các điều khiển
9
Hướng dẫn làm việc với các điều khiển
10

Hai công cụ đắc lực khi làm việc
với điều khiển là:
Toolbox
Chứa các điều khiển được phân
theo nhóm
Cửa sổ Properties
Dùng để thiết lập thuộc tính và
sự kiện cho điều khiển
Thêm một điều khiển
Kéo điều khiển từ Toolbox vào
màn hình thiết kế
Thiết lập thuộc tính và sự kiện
cho điều khiển sử dụng cửa sổ
Properties
Làm việc với các điều khiển
Nút hiển thị sự
kiện
Nút hiển thị thuộc
tính
Hai công cụ đắc lực khi làm việc
với điều khiển là:
Toolbox
Chứa các điều khiển được phân
theo nhóm
Cửa sổ Properties
Dùng để thiết lập thuộc tính và
sự kiện cho điều khiển
Thêm một điều khiển
Kéo điều khiển từ Toolbox vào
màn hình thiết kế

Thiết lập thuộc tính và sự kiện
cho điều khiển sử dụng cửa sổ
Properties
Hướng dẫn làm việc với các điều khiển
11
Danh sách thuộc tính/sự
kiện
Toolbox
Tool box: Hỗ trợ việc tạo các điều khiển qua giao diện
đồ họa. Các điều khiển được sắp xếp theo nhóm
TextBox
Drop-down list
Image Button
Hướng dẫn làm việc với các điều khiển
12
Nhóm Standard gồm các điều khiển cơ bản dùng cho nhập liệu
Label
Button
Drop-down list
Radio button/ Radio
button list
Check box
Textbox
Toolbox
SqlDataSource truy vấn dữ liệu từ CSDL
Hướng dẫn làm việc với các điều khiển
13
Nhóm Data chứa các điều khiển dùng để truy
xuất và hiển thị giá trị từ CSDL
GridView: Hiển thị dữ liệu từ

sqlDataSource dưới dạng bảng
Toolbox
Hướng dẫn làm việc với các điều khiển
14
Nhóm Validation gồm các điều
khiển kiểm tra tính hợp lệ của dữ
liệu được nhập vào Web Form
RequiredFieldValidator
CompareValidator
Toolbox
SiteMapPath
Hướng dẫn làm việc với các điều khiển
15
Nhóm Navagation tạo menu
điều hướng
SiteMapPath
TreeView
Menu
Toolbox
Hướng dẫn làm việc với các điều khiển
16
Cung cấp các tính năng xác
thực người dùng
Hỗ trợ sử dụng AJAX trong Web
Form
Sử dụng để:
Thiết lập thuộc tính
Thêm sự kiện
Các thuộc tính thường dùng
ID, Text, Visible, Height,

Width, Font, ForeColor,
TabIndex
Cửa sổ Properties
Danh sách thuộc tính của
điều khiển
Sử dụng để:
Thiết lập thuộc tính
Thêm sự kiện
Các thuộc tính thường dùng
ID, Text, Visible, Height,
Width, Font, ForeColor,
TabIndex
Hướng dẫn làm việc với các điều khiển
17
Các sự kiện thường dùng
Click: Các điều khiển button,
image map
TextChanged: Textbox
SelectedIndexChanged: Các
điều khiển list
CheckChanged: check box,
radio button
Cửa sổ Properties
Danh sách sự kiện của
môt điều khiển
Các sự kiện thường dùng
Click: Các điều khiển button,
image map
TextChanged: Textbox
SelectedIndexChanged: Các

điều khiển list
CheckChanged: check box,
radio button
Hướng dẫn làm việc với các điều khiển
18
Nhóm Standard
Nhóm
Điều khiển
Tiền tố
ID
Mô tả
Điều khiển
nhập liệu
Label
Lbl
Hiển thị thông tin mô tả
TextBox
txt
Cho phép người dùng nhập&sửa giá trị văn bản
CheckBox
Chk
Bật tắt một lựa chọn
RadioButton
Rdo
Bật tắt một lựa chọn. Chỉ một radio button trong nhóm
được chọn
Hướng dẫn làm việc với các điều khiển
19
Bật tắt một lựa chọn. Chỉ một radio button trong nhóm
được chọn

Button
Button
Btn
Gửi một trang để xử lý.
Ba loại điều khiển này giống nhau về chức năng, chỉ khác
nhau về cách hiển thị
ImageButton
Ibtn
LinkButton
Lbtn
Nhóm Standard
Nhóm Điều khiển Tiền
tố ID
Mô tả
Điều khiển
hiển thị dữ
liệu dưới
dạng danh
sách
ListBox Lst Cho phép người dùng chọn một hoặc nhiều mục trong
danh sách
DropDownList Ddl Cho phép người dùng chọn một mục trong danh sách thả
CheckBoxList Cbl Bật hoặc tắt nhiều lựa chọn trong một danh sách các lựa
chọn.
RadioButtonList Rbl Bật hoặc tắt một lựa chọn. Chỉ có thể bật một radio
button
Hướng dẫn làm việc với các điều khiển
20
BulletedList Blst
Hiển thị một danh sách đánh theo số thứ tự hoặc theo kí

hiệu.
Điều khiển
khác
HyperLink Hlnk Cho phép người dùng chuyển sang trang khác trong một
ứng dụng.
Image Img Hiển thị một hình ảnh.
Calender cln Hiển thị lịch và cho phép người dùng chọn một hoặc
nhiều ngày.
FileUpload Upl Hiển thị một hộp văn bản và một nút cho phép người
dùng duyệt tìm file muốn tải lên.
ImageMap imap Hiển thị một hình ảnh với một hoặc nhiều vùng có thể
kích chọn.
Nội dung demo:
Tạo Form gồm các điều khiển nhập liệu cơ bản
Hiển thị thông báo khi người dùng nhập liệu và nhấn chuột
lên button
Demo
Điều khiển TextBox, Label, Button
Hướng dẫn làm việc với các điều khiển
21
Lúc ban đầu
Sau khi người dùng nhập liệu và nhấn lên button
Các bước thực hiện
Thêm các điều khiển
Thiết lập thuộc tính cho điều khiển
sử dụng cửa sổ Properties
TextBox: ID, TextMode, Text
MaxLength
Label: ID, Text
Button: ID, Text

Thêm sự kiện, viết mã xử lý sự kiện Click của điều khiển
button
Gán giá trị cho thuộc tính Text của Label
Demo
Điều khiển TextBox, Label, Button
Các bước thực hiện
Thêm các điều khiển
Thiết lập thuộc tính cho điều khiển
sử dụng cửa sổ Properties
TextBox: ID, TextMode, Text
MaxLength
Label: ID, Text
Button: ID, Text
Thêm sự kiện, viết mã xử lý sự kiện Click của điều khiển
button
Gán giá trị cho thuộc tính Text của Label
Hướng dẫn làm việc với các điều khiển
22
Đoạn mã tạo Text box Password
Demo
Điều khiển TextBox, Label, Button
<asp:TextBox
ID="txtPassWord" runat="server"
TextMode="Password">
</asp:TextBox>
Đoạn mã tạo Button Sign Up
Hướng dẫn làm việc với các điều khiển
23
<asp:Button
ID="btnSingUp" runat="server"

onclick="btnSingUp_Click“ Text="Sign Up"
/>
protected void btnSingUp_Click(object sender, EventArgs e)
{
lblMessage.Text = "Thank you for sign up <br/> The request is
processing";
}
Đoạn mã xử lý sự kiện nhấn chuột vào button SignUp
Check Box
Radio Button
Tiền tố cho ID
Chk
Rdo
Thuộc tính
AutoPostPack
Checked
Text
Width
AutoPostPack
Checked
Text
GroupName
Check Box, Radio Button
Thuộc tính/Sự kiện quan trọng
Thuộc tính
AutoPostPack
Checked
Text
Width
AutoPostPack

Checked
Text
GroupName
Sự kiện
CheckedChange
CheckedChange
Hướng dẫn làm việc với các điều khiển
24
Nội dung demo
Tạo trang sử dụng các check box và Radio button
Hiển thị nội dung của check box & radio button được chọn
Demo
Check Box, Radio Button
Hướng dẫn làm việc với các điều khiển
25
Lúc ban đầu
Sau khi người dùng chọn các check box,
Radio button và nhấn Submit