Bài giảng Lập trình Web ASP.Net: Chương 3 - Dương Thành Phết

Chương 3
Các ðiều Khiển WebServer
1. Tổng quan về ASP.Net Server Control
2. HTML Control
3. WebSever Control
4. Các ñiều khiển khác
5. ðối tượng ViewState

1
Written by: Dương Thành Phết




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

2
Written by: Dương Thành Phết




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

3
Written by: Dương Thành Phết




3. ASP.NET Webserver 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

4
Written by: Dương Thành Phết




3. ASP.NET Webserver 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.

5

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
Written by: Dương Thành Phết

3. ASP.NET Webserver 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>";

6
Written by: Dương Thành Phết




3. ASP.NET Webserver 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 ñủ.
7
Written by: Dương Thành Phết

3. ASP.NET Webserver 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

8
Written by: Dương Thành Phết




3. ASP.NET Webserver 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.

9
Written by: Dương Thành Phết




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:

10

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();
}
Written by: Dương Thành Phết




3. ASP.NET Webserver 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.

11
Written by: Dương Thành Phết




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

12
Written by: Dương Thành Phết




3. ASP.NET Webserver 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.
13
Written by: Dương Thành Phết




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();
14
Written by: Dương Thành Phết




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.
15
Written by: Dương Thành Phết




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.

16
Written by: Dương Thành Phết




17

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");
lstDiadanh.Items.Add("ðà Lạt");
lstDiadanh.Items.Add("Phú Quốc");
lstDiadanh.Items.Add("Huế - Hội An");
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;
}
}
Written by: Dương Thành Phết




3. ASP.NET Webserver 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.
18
Written by: Dương Thành Phết




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ữ

19
Written by: Dương Thành Phết




3. ASP.NET Webserver 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

20
Written by: Dương Thành Phết




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.

21
Written by: Dương Thành Phết




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

22
Written by: Dương Thành Phết




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

23
Written by: Dương Thành Phết




4. Các ñiều khiển khác
4.1. ð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).

24
Written by: Dương Thành Phết




Ví dụ:

Khi thiết kế.
Lệnh xử lý:
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text="<b>ðây là chuỗi ký tự trong label</b>";
Literal1.Text = "<i> ðây là chuỗi ký tự trong Literial</i>";
}

Xem source:
<span id="Label1" style="display:inline-block;width:417px;">
<b>ðây là chuỗi ký tự trong label</b></span>

<i> ðây là chuỗi ký tự trong Literial</i>
25
Written by: Dương Thành Phết